chore: add docs

components/_util/hooks/disabled.ts

@@ -0,0 +1,8 @@
+import type { ComputedRef } from 'vue'
+import { computed } from 'vue'
+import { useProviderConfigState } from '../../config-provider/context'
+
+export const useDisabled = (props: Record<string, any>) => {
+  const { componentDisabled } = useProviderConfigState()
+  return computed(() => props.disabled || componentDisabled.value) as ComputedRef<boolean>
+}

components/_util/hooks/size.ts

@@ -0,0 +1,9 @@
+import type { ComputedRef } from 'vue'
+import { computed } from 'vue'
+import type { SizeType } from '../../config-provider/context'
+import { useProviderConfigState } from '../../config-provider/context'
+
+export const useSize = (props: Record<string, any>) => {
+  const { componentSize } = useProviderConfigState()
+  return computed(() => props.size || componentSize.value) as ComputedRef<SizeType>
+}

components/_util/warning.ts

@@ -0,0 +1,21 @@
+import { warning as rcWarning, resetWarned } from '@v-c/utils'
+
+export { resetWarned }
+export function noop() {}
+
+type Warning = (valid: boolean, component: string, message?: string) => void
+
+// eslint-disable-next-line import/no-mutable-exports
+let warning: Warning = noop
+if (process.env.NODE_ENV !== 'production') {
+  warning = (valid, component, message) => {
+    rcWarning(valid, `[antd: ${component}] ${message}`)
+
+    // StrictMode will inject console which will not throw warning in React 17.
+    if (process.env.NODE_ENV === 'test') {
+      resetWarned()
+    }
+  }
+}
+
+export default warning

components/_util/wave/index.tsx

@@ -0,0 +1,60 @@
+import type { VNode } from 'vue'
+import { cloneVNode, computed, defineComponent, shallowRef } from 'vue'
+import { booleanType, classNames, filterEmpty, isVisible } from '@v-c/utils'
+import { useEventListener } from '@vueuse/core'
+import { useProviderConfigState } from '../../config-provider/context'
+import useStyle from './style'
+import useWave from './use-wave'
+
+const Wave = defineComponent({
+  name: 'Wave',
+  props: {
+    disabled: booleanType()
+  },
+  setup(props, { slots }) {
+    const { getPrefixCls } = useProviderConfigState()
+    const containerRef = shallowRef()
+
+    // ============================== Style ===============================
+    const prefixCls = computed(() => getPrefixCls('wave'))
+    const [, hashId] = useStyle(prefixCls)
+    const showWave = useWave(
+      containerRef,
+      computed(() => classNames(prefixCls.value, hashId.value))
+    )
+
+    const onClick = (e: MouseEvent) => {
+      const node = containerRef.value
+      const { disabled } = props
+      if (!node || node.nodeType !== 1 || disabled) {
+        return
+      }
+      // Fix radio button click twice
+      if (
+        (e.target as HTMLElement).tagName === 'INPUT' ||
+        !isVisible(e.target as HTMLElement) ||
+        // No need wave
+        !node.getAttribute ||
+        node.getAttribute('disabled') ||
+        (node as HTMLInputElement).disabled ||
+        node.className.includes('disabled') ||
+        node.className.includes('-leave')
+      ) {
+        return
+      }
+
+      showWave()
+    }
+
+    useEventListener(containerRef, 'click', onClick, true)
+
+    return () => {
+      const children = slots.default?.()
+      const child = filterEmpty(children)[0]
+      if (!child) return null
+      return cloneVNode(child as VNode, { ref: containerRef })
+    }
+  }
+})
+
+export default Wave

components/_util/wave/style.ts

@@ -0,0 +1,34 @@
+import { genComponentStyleHook } from '../../theme/internal'
+import type { FullToken, GenerateStyle } from '../../theme/internal'
+
+export interface ComponentToken {}
+
+export interface WaveToken extends FullToken<'Wave'> {}
+
+const genWaveStyle: GenerateStyle<WaveToken> = token => {
+  const { componentCls, colorPrimary } = token
+  return {
+    [componentCls]: {
+      position: 'absolute',
+      background: 'transparent',
+      pointerEvents: 'none',
+      boxSizing: 'border-box',
+      color: `var(--wave-color, ${colorPrimary})`,
+
+      boxShadow: `0 0 0 0 currentcolor`,
+      opacity: 0.2,
+
+      // =================== Motion ===================
+      '&.wave-motion-appear': {
+        transition: [`box-shadow 0.4s ${token.motionEaseOutCirc}`, `opacity 2s ${token.motionEaseOutCirc}`].join(','),
+
+        '&-active': {
+          boxShadow: `0 0 0 6px currentcolor`,
+          opacity: 0
+        }
+      }
+    }
+  }
+}
+
+export default genComponentStyleHook('Wave', token => [genWaveStyle(token)])

components/_util/wave/use-wave.ts

@@ -0,0 +1,11 @@
+import type { ComputedRef, Ref } from 'vue'
+import showWaveEffect from './wave-effect'
+
+export default function useWave(nodeRef: Ref<HTMLElement>, className: ComputedRef<string>): VoidFunction {
+  function showWave() {
+    // const node = nodeRef.va!
+    showWaveEffect(nodeRef, className)
+  }
+
+  return showWave
+}

components/_util/wave/util.ts

@@ -0,0 +1,35 @@
+export function isNotGrey(color: string) {
+  // eslint-disable-next-line no-useless-escape
+  const match = (color || '').match(/rgba?\((\d*), (\d*), (\d*)(, [\d.]*)?\)/)
+  if (match && match[1] && match[2] && match[3]) {
+    return !(match[1] === match[2] && match[2] === match[3])
+  }
+  return true
+}
+
+export function isValidWaveColor(color: string) {
+  return (
+    color &&
+    color !== '#fff' &&
+    color !== '#ffffff' &&
+    color !== 'rgb(255, 255, 255)' &&
+    color !== 'rgba(255, 255, 255, 1)' &&
+    isNotGrey(color) &&
+    !/rgba\((?:\d*, ){3}0\)/.test(color) && // any transparent rgba color
+    color !== 'transparent'
+  )
+}
+
+export function getTargetWaveColor(node: HTMLElement) {
+  const { borderTopColor, borderColor, backgroundColor } = getComputedStyle(node)
+  if (isValidWaveColor(borderTopColor)) {
+    return borderTopColor
+  }
+  if (isValidWaveColor(borderColor)) {
+    return borderColor
+  }
+  if (isValidWaveColor(backgroundColor)) {
+    return backgroundColor
+  }
+  return null
+}

components/_util/wave/wave-effect.tsx

@@ -0,0 +1,108 @@
+import type { ComputedRef, Ref } from 'vue'
+import { unrefElement, useResizeObserver } from '@vueuse/core'
+import { computed, defineComponent, onMounted, render, shallowRef, toRef } from 'vue'
+import { classNames, delayTimer, objectType, safeNextick, useState } from '@v-c/utils'
+import { getTargetWaveColor } from './util'
+function validateNum(value: number) {
+  return Number.isNaN(value) ? 0 : value
+}
+export const WaveEffect = defineComponent({
+  name: 'WaveEffect',
+  props: {
+    target: objectType<HTMLElement>()
+  },
+  setup(props, { attrs }) {
+    const divRef = shallowRef<HTMLDivElement | undefined>(undefined)
+
+    const [color, setWaveColor] = useState<string | null>(null)
+    const [borderRadius, setBorderRadius] = useState<number[]>([])
+    const [left, setLeft] = useState(0)
+    const [top, setTop] = useState(0)
+    const [width, setWidth] = useState(0)
+    const [height, setHeight] = useState(0)
+    const [enabled, setEnabled] = useState(false)
+    const [active, setActive] = useState(false)
+    const waveStyle = computed(() => {
+      const style: Record<string, any> = {
+        left: `${left.value}px`,
+        top: `${top.value}px`,
+        width: `${width.value}px`,
+        height: `${height.value}px`,
+        borderRadius: borderRadius.value.map(radius => `${radius}px`).join(' ')
+      }
+      if (color.value) {
+        style['--wave-color'] = color.value
+      }
+      return style
+    })
+    function syncPos() {
+      const { target } = props
+      const nodeStyle = getComputedStyle(target)
+
+      // Get wave color from target
+      setWaveColor(getTargetWaveColor(target))
+
+      const isStatic = nodeStyle.position === 'static'
+
+      // Rect
+      const { borderLeftWidth, borderTopWidth } = nodeStyle
+      setLeft(isStatic ? target.offsetLeft : validateNum(-parseFloat(borderLeftWidth)))
+      setTop(isStatic ? target.offsetTop : validateNum(-parseFloat(borderTopWidth)))
+      setWidth(target.offsetWidth)
+      setHeight(target.offsetHeight)
+
+      // Get border radius
+      const { borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius } = nodeStyle
+
+      setBorderRadius([borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius].map(radius => validateNum(parseFloat(radius))))
+    }
+    onMounted(async () => {
+      syncPos()
+      setEnabled(true)
+      await safeNextick()
+      setActive(true)
+      await delayTimer(5000)
+      const holder = divRef.value?.parentElement
+      holder!.parentElement?.removeChild(holder!)
+    })
+    const motionClassName = computed(() =>
+      classNames({
+        'wave-motion-appear': enabled.value,
+        'wave-motion': true
+      })
+    )
+    const motionClassNameActive = computed(() => ({
+      'wave-motion-appear-active': active.value
+    }))
+    useResizeObserver(toRef(props, 'target'), syncPos)
+
+    return () => {
+      if (!enabled.value) return null
+      return (
+        <div
+          ref={divRef}
+          class={[attrs.class, motionClassName.value, motionClassNameActive.value]}
+          style={waveStyle.value}
+        />
+      )
+    }
+  }
+})
+
+export default function showWaveEffect(nodeRef: Ref<HTMLElement>, className: ComputedRef<string>) {
+  const node = unrefElement(nodeRef)
+  // Create holder
+  const holder = document.createElement('div')
+  holder.style.position = 'absolute'
+  holder.style.left = `0px`
+  holder.style.top = `0px`
+  node?.insertBefore(holder, node?.firstChild)
+
+  render(
+    <WaveEffect
+      target={node}
+      class={className.value}
+    />,
+    holder
+  )
+}

components/button/button-helper.tsx

@@ -0,0 +1,67 @@
+const rxTwoCNChar = /^[\u4E00-\u9FA5]{2}$/
+export const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar)
+
+export function isUnBorderedButtonType(type?: ButtonType) {
+  return type === 'text' || type === 'link'
+}
+//
+// function splitCNCharsBySpace(child: VNodeChild , needInserted: boolean) {
+//     if (child === null || child === undefined) {
+//         return;
+//     }
+//
+//     const SPACE = needInserted ? ' ' : '';
+//
+//     if (
+//         typeof child !== 'string' &&
+//         typeof child !== 'number' &&
+//         isString((child as VNode)) &&
+//         isTwoCNChar((child as VNode).children)
+//     ) {
+//         return cloneVNode(child as , {
+//             children: child.props.children.split('').join(SPACE),
+//         });
+//     }
+//
+//     if (typeof child === 'string') {
+//         return isTwoCNChar(child) ? <span>{child.split('').join(SPACE)}</span> : <span>{child}</span>;
+//     }
+//
+//     if (isFragment(child)) {
+//         return <span>{child}</span>;
+//     }
+//
+//     return child;
+// }
+//
+// export function spaceChildren(children: React.ReactNode, needInserted: boolean) {
+//     let isPrevChildPure: boolean = false;
+//     const childList: React.ReactNode[] = [];
+//
+//     React.Children.forEach(children, (child) => {
+//         const type = typeof child;
+//         const isCurrentChildPure = type === 'string' || type === 'number';
+//         if (isPrevChildPure && isCurrentChildPure) {
+//             const lastIndex = childList.length - 1;
+//             const lastChild = childList[lastIndex];
+//             childList[lastIndex] = `${lastChild}${child}`;
+//         } else {
+//             childList.push(child);
+//         }
+//
+//         isPrevChildPure = isCurrentChildPure;
+//     });
+//
+//     return React.Children.map(childList, (child) =>
+//         splitCNCharsBySpace(child as React.ReactElement | string | number, needInserted),
+//     );
+// }
+
+const ButtonTypes = ['default', 'primary', 'ghost', 'dashed', 'link', 'text'] as const
+export type ButtonType = (typeof ButtonTypes)[number]
+
+const ButtonShapes = ['default', 'circle', 'round'] as const
+export type ButtonShape = (typeof ButtonShapes)[number]
+
+const ButtonHTMLTypes = ['submit', 'button', 'reset'] as const
+export type ButtonHTMLType = (typeof ButtonHTMLTypes)[number]

components/button/button.tsx

@@ -1,11 +1,186 @@
-import { defineComponent } from 'vue'
+import { computed, defineComponent, onMounted, shallowRef } from 'vue'
+import { tryOnBeforeUnmount } from '@vueuse/core'
+import { classNames, filterEmpty, getSlotsProps, runEvent, useState } from '@v-c/utils'
+import { useProviderConfigState } from '../config-provider/context'
+import warning from '../_util/warning'
+import Wave from '../_util/wave'
+import { useSize } from '../_util/hooks/size'
+import { useDisabled } from '../_util/hooks/disabled'
+import { useCompactItemContext } from '../space/compact'
+import useStyle from './style'
+import type { ButtonProps, LoadingConfigType } from './interface'
+import { buttonProps } from './interface'
+import { isTwoCNChar, isUnBorderedButtonType } from './button-helper'
+type Loading = number | boolean
+
+function getLoadingConfig(loading: ButtonProps['loading']): LoadingConfigType {
+  if (typeof loading === 'object' && loading) {
+    const delay = loading?.delay
+    const isDelay = !Number.isNaN(delay) && typeof delay === 'number'
+    return {
+      loading: false,
+      delay: isDelay ? delay : 0
+    }
+  }
+
+  return {
+    loading: !!loading,
+    delay: 0
+  }
+}
 
 const Button = defineComponent({
   name: 'AButton',
-  props: {},
+  inheritAttrs: false,
-  setup(props, { slots }) {
+  __ANT_BUTTON: true,
+  props: {
+    ...buttonProps
+  },
+  setup(props, { slots, attrs }) {
+    const { getPrefixCls, autoInsertSpaceInButton, direction } = useProviderConfigState()
+    const prefixCls = computed(() => getPrefixCls('btn', props.prefixCls))
+    const [wrapSSR, hashId] = useStyle(prefixCls)
+    const size = useSize(props)
+    const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction)
+    const sizeCls = computed(() => {
+      const sizeClassNameMap = { large: 'lg', small: 'sm', middle: undefined }
+      const sizeFullname = compactSize?.value || size.value
+      return sizeClassNameMap[sizeFullname!]
+    })
+    const disabled = useDisabled(props)
+    const buttonRef = shallowRef<HTMLButtonElement | null>(null)
+
+    const loadingOrDelay = computed(() => {
+      return getLoadingConfig(props.loading)
+    })
+
+    const [innerLoading, setLoading] = useState<Loading>(loadingOrDelay.value.loading)
+    const [hasTwoCNChar, setHasTwoCNChar] = useState(false)
+
+    let delayTimer: number | null = null
+
+    onMounted(() => {
+      if (loadingOrDelay.value.delay > 0) {
+        delayTimer = window.setTimeout(() => {
+          delayTimer = null
+          setLoading(true)
+        }, loadingOrDelay.value.delay)
+      } else {
+        setLoading(loadingOrDelay.value.loading)
+      }
+      // fixTwoCNChar()
+    })
+
+    function cleanupTimer() {
+      if (delayTimer) {
+        window.clearTimeout(delayTimer)
+        delayTimer = null
+      }
+    }
+    tryOnBeforeUnmount(() => {
+      cleanupTimer()
+    })
+
+    const handleClick = (e: MouseEvent) => {
+      // FIXME: https://github.com/ant-design/ant-design/issues/30207
+      if (innerLoading.value || disabled.value) {
+        e.preventDefault()
+        return
+      }
+      runEvent(props, 'onClick', e)
+    }
+
+    const showError = () => {
+      const { ghost, type } = props
+
+      const icon = getSlotsProps(slots, props, 'icon')
+
+      warning(!(typeof icon === 'string' && icon.length > 2), 'Button', `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`)
+
+      warning(!(ghost && isUnBorderedButtonType(type)), 'Button', "`link` or `text` button can't be a `ghost` button.")
+    }
+
     return () => {
-      return <button>{slots.default?.()}</button>
+      const { shape, rootClassName, ghost, type, block, danger } = props
+      const icon = getSlotsProps(slots, props, 'icon')
+      const children = filterEmpty(slots.default?.())
+      const isNeedInserted = () => {
+        return children.length === 1 && !slots.icon && isUnBorderedButtonType(props.type)
+      }
+
+      const fixTwoCNChar = () => {
+        // FIXME: for HOC usage like <FormatMessage />
+        if (!buttonRef.value || autoInsertSpaceInButton.value === false) {
+          return
+        }
+        const buttonText = buttonRef.value.textContent
+        if (isNeedInserted() && isTwoCNChar(buttonText as string)) {
+          if (!hasTwoCNChar) {
+            setHasTwoCNChar(true)
+          }
+        } else if (hasTwoCNChar) {
+          setHasTwoCNChar(false)
+        }
+      }
+      fixTwoCNChar()
+      showError()
+      const iconType = innerLoading.value ? 'loading' : icon
+
+      const autoInsertSpace = autoInsertSpaceInButton.value !== false
+
+      const hrefAndDisabled = attrs.href !== undefined && disabled.value
+
+      const classes = classNames(
+        prefixCls.value,
+        hashId.value,
+        {
+          [`${prefixCls.value}-${shape}`]: shape !== 'default' && shape,
+          [`${prefixCls.value}-${type}`]: type,
+          [`${prefixCls.value}-${sizeCls.value}`]: sizeCls.value,
+          [`${prefixCls.value}-icon-only`]: !children && children !== 0 && !!iconType,
+          [`${prefixCls.value}-background-ghost`]: ghost && !isUnBorderedButtonType(type),
+          [`${prefixCls.value}-loading`]: innerLoading.value,
+          [`${prefixCls.value}-two-chinese-chars`]: hasTwoCNChar.value && autoInsertSpace && !innerLoading.value,
+          [`${prefixCls.value}-block`]: block,
+          [`${prefixCls.value}-dangerous`]: !!danger,
+          [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
+          [`${prefixCls.value}-disabled`]: hrefAndDisabled
+        },
+        attrs.class,
+        compactItemClassnames.value,
+        rootClassName
+      )
+      const iconNode = icon && !innerLoading.value ? icon?.() : <>L</>
+
+      if (attrs.href !== undefined) {
+        return wrapSSR(
+          <a
+            {...attrs}
+            {...props}
+            class={classes}
+            onClick={handleClick}
+            ref={buttonRef}
+          >
+            {iconNode}
+            {children}
+          </a>
+        )
+      }
+      let buttonNode = (
+        <button
+          {...attrs}
+          onClick={handleClick}
+          class={classes}
+        >
+          {children}
+        </button>
+      )
+
+      if (!isUnBorderedButtonType(type)) {
+        buttonNode = <Wave>{buttonNode}</Wave>
+      }
+
+      return wrapSSR(buttonNode)
     }
   }
 })

components/button/demos/basic.vue

@@ -0,0 +1,13 @@
+<docs>
+---
+title: Basic
+---
+
+这是基础按钮
+</docs>
+
+<script lang="ts" setup></script>
+
+<template>
+  <div></div>
+</template>

components/button/index.md

@@ -0,0 +1 @@
+# Button

components/button/index.zh-CN.md

@@ -0,0 +1 @@
+# Button 按钮

components/button/interface.ts

@@ -0,0 +1,25 @@
+import { booleanType, someType, stringType, vNodeType } from '@v-c/utils'
+import type { ExtractPropTypes } from 'vue'
+import type { SizeType } from '../config-provider/context'
+import type { ButtonHTMLType, ButtonShape, ButtonType } from './button-helper'
+export interface LoadingConfigType {
+  loading: boolean
+  delay: number
+}
+
+export const buttonProps = {
+  type: stringType<ButtonType>('default'),
+  icon: vNodeType(),
+  shape: stringType<ButtonShape>(),
+  size: someType<SizeType | 'default'>([String], 'default'),
+  disabled: booleanType(),
+  loading: someType<boolean | LoadingConfigType>(),
+  prefixCls: stringType(),
+  rootClassName: stringType(),
+  ghost: booleanType(),
+  danger: booleanType(),
+  block: booleanType(),
+  htmlType: stringType<ButtonHTMLType>('button')
+}
+
+export type ButtonProps = ExtractPropTypes<typeof buttonProps>

components/button/style/group.ts

@@ -0,0 +1,80 @@
+import type { GenerateStyle } from '../../theme/internal'
+import type { ButtonToken } from '.'
+
+const genButtonBorderStyle = (buttonTypeCls: string, borderColor: string) => ({
+  // Border
+  [`> span, > ${buttonTypeCls}`]: {
+    '&:not(:last-child)': {
+      [`&, & > ${buttonTypeCls}`]: {
+        '&:not(:disabled)': {
+          borderInlineEndColor: borderColor
+        }
+      }
+    },
+
+    '&:not(:first-child)': {
+      [`&, & > ${buttonTypeCls}`]: {
+        '&:not(:disabled)': {
+          borderInlineStartColor: borderColor
+        }
+      }
+    }
+  }
+})
+
+const genGroupStyle: GenerateStyle<ButtonToken> = token => {
+  const { componentCls, fontSize, lineWidth, colorPrimaryHover, colorErrorHover } = token
+
+  return {
+    [`${componentCls}-group`]: [
+      {
+        position: 'relative',
+        display: 'inline-flex',
+
+        // Border
+        [`> span, > ${componentCls}`]: {
+          '&:not(:last-child)': {
+            [`&, & > ${componentCls}`]: {
+              borderStartEndRadius: 0,
+              borderEndEndRadius: 0
+            }
+          },
+
+          '&:not(:first-child)': {
+            marginInlineStart: -lineWidth,
+
+            [`&, & > ${componentCls}`]: {
+              borderStartStartRadius: 0,
+              borderEndStartRadius: 0
+            }
+          }
+        },
+
+        [componentCls]: {
+          position: 'relative',
+          zIndex: 1,
+
+          [`&:hover,
+          &:focus,
+          &:active`]: {
+            zIndex: 2
+          },
+
+          '&[disabled]': {
+            zIndex: 0
+          }
+        },
+
+        [`${componentCls}-icon-only`]: {
+          fontSize
+        }
+      },
+
+      // Border Color
+      genButtonBorderStyle(`${componentCls}-primary`, colorPrimaryHover),
+      genButtonBorderStyle(`${componentCls}-danger`, colorErrorHover)
+    ]
+  }
+}
+
+export default genGroupStyle

components/button/style/index.ts

@@ -0,0 +1,503 @@
+import type { CSSInterpolation, CSSObject } from '@antd-tiny-vue/cssinjs'
+import type { FullToken, GenerateStyle } from '../../theme/internal'
+import { genComponentStyleHook, mergeToken } from '../../theme/internal'
+import { genFocusStyle } from '../../style'
+import { genCompactItemStyle } from '../../style/compact-item'
+import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical'
+import genGroupStyle from './group'
+
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {}
+
+export interface ButtonToken extends FullToken<'Button'> {
+  // FIXME: should be removed
+  colorOutlineDefault: string
+  buttonPaddingHorizontal: number
+}
+
+// ============================== Shared ==============================
+const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSSObject => {
+  const { componentCls, iconCls } = token
+
+  return {
+    [componentCls]: {
+      outline: 'none',
+      position: 'relative',
+      display: 'inline-block',
+      fontWeight: 400,
+      whiteSpace: 'nowrap',
+      textAlign: 'center',
+      backgroundImage: 'none',
+      backgroundColor: 'transparent',
+      border: `${token.lineWidth}px ${token.lineType} transparent`,
+      cursor: 'pointer',
+      transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
+      userSelect: 'none',
+      touchAction: 'manipulation',
+      lineHeight: token.lineHeight,
+      color: token.colorText,
+
+      '> span': {
+        display: 'inline-block'
+      },
+
+      // Leave a space between icon and text.
+      [`> ${iconCls} + span, > span + ${iconCls}`]: {
+        marginInlineStart: token.marginXS
+      },
+
+      '> a': {
+        color: 'currentColor'
+      },
+
+      '&:not(:disabled)': {
+        ...genFocusStyle(token)
+      },
+
+      // make `btn-icon-only` not too narrow
+      [`&-icon-only${componentCls}-compact-item`]: {
+        flex: 'none'
+      },
+      // Special styles for Primary Button
+      [`&-compact-item${componentCls}-primary`]: {
+        [`&:not([disabled]) + ${componentCls}-compact-item${componentCls}-primary:not([disabled])`]: {
+          position: 'relative',
+
+          '&:before': {
+            position: 'absolute',
+            top: -token.lineWidth,
+            insetInlineStart: -token.lineWidth,
+            display: 'inline-block',
+            width: token.lineWidth,
+            height: `calc(100% + ${token.lineWidth * 2}px)`,
+            backgroundColor: token.colorPrimaryHover,
+            content: '""'
+          }
+        }
+      },
+      // Special styles for Primary Button
+      '&-compact-vertical-item': {
+        [`&${componentCls}-primary`]: {
+          [`&:not([disabled]) + ${componentCls}-compact-vertical-item${componentCls}-primary:not([disabled])`]: {
+            position: 'relative',
+
+            '&:before': {
+              position: 'absolute',
+              top: -token.lineWidth,
+              insetInlineStart: -token.lineWidth,
+              display: 'inline-block',
+              width: `calc(100% + ${token.lineWidth * 2}px)`,
+              height: token.lineWidth,
+              backgroundColor: token.colorPrimaryHover,
+              content: '""'
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+const genHoverActiveButtonStyle = (hoverStyle: CSSObject, activeStyle: CSSObject): CSSObject => ({
+  '&:not(:disabled)': {
+    '&:hover': hoverStyle,
+    '&:active': activeStyle
+  }
+})
+
+// ============================== Shape ===============================
+const genCircleButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+  minWidth: token.controlHeight,
+  paddingInlineStart: 0,
+  paddingInlineEnd: 0,
+  borderRadius: '50%'
+})
+
+const genRoundButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+  borderRadius: token.controlHeight,
+  paddingInlineStart: token.controlHeight / 2,
+  paddingInlineEnd: token.controlHeight / 2
+})
+
+// =============================== Type ===============================
+const genDisabledStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+  cursor: 'not-allowed',
+  borderColor: token.colorBorder,
+  color: token.colorTextDisabled,
+  backgroundColor: token.colorBgContainerDisabled,
+  boxShadow: 'none'
+})
+
+const genGhostButtonStyle = (
+  btnCls: string,
+  textColor: string | false,
+  borderColor: string | false,
+  textColorDisabled: string | false,
+  borderColorDisabled: string | false,
+  hoverStyle?: CSSObject,
+  activeStyle?: CSSObject
+): CSSObject => ({
+  [`&${btnCls}-background-ghost`]: {
+    color: textColor || undefined,
+    backgroundColor: 'transparent',
+    borderColor: borderColor || undefined,
+    boxShadow: 'none',
+
+    ...genHoverActiveButtonStyle(
+      {
+        backgroundColor: 'transparent',
+        ...hoverStyle
+      },
+      {
+        backgroundColor: 'transparent',
+        ...activeStyle
+      }
+    ),
+
+    '&:disabled': {
+      cursor: 'not-allowed',
+      color: textColorDisabled || undefined,
+      borderColor: borderColorDisabled || undefined
+    }
+  }
+})
+
+const genSolidDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+  '&:disabled': {
+    ...genDisabledStyle(token)
+  }
+})
+
+const genSolidButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+  ...genSolidDisabledButtonStyle(token)
+})
+
+const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+  '&:disabled': {
+    cursor: 'not-allowed',
+    color: token.colorTextDisabled
+  }
+})
+
+// Type: Default
+const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+  ...genSolidButtonStyle(token),
+
+  backgroundColor: token.colorBgContainer,
+  borderColor: token.colorBorder,
+
+  boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlTmpOutline}`,
+
+  ...genHoverActiveButtonStyle(
+    {
+      color: token.colorPrimaryHover,
+      borderColor: token.colorPrimaryHover
+    },
+    {
+      color: token.colorPrimaryActive,
+      borderColor: token.colorPrimaryActive
+    }
+  ),
+
+  ...genGhostButtonStyle(token.componentCls, token.colorBgContainer, token.colorBgContainer, token.colorTextDisabled, token.colorBorder),
+
+  [`&${token.componentCls}-dangerous`]: {
+    color: token.colorError,
+    borderColor: token.colorError,
+
+    ...genHoverActiveButtonStyle(
+      {
+        color: token.colorErrorHover,
+        borderColor: token.colorErrorBorderHover
+      },
+      {
+        color: token.colorErrorActive,
+        borderColor: token.colorErrorActive
+      }
+    ),
+
+    ...genGhostButtonStyle(token.componentCls, token.colorError, token.colorError, token.colorTextDisabled, token.colorBorder),
+    ...genSolidDisabledButtonStyle(token)
+  }
+})
+
+// Type: Primary
+const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+  ...genSolidButtonStyle(token),
+
+  color: token.colorTextLightSolid,
+  backgroundColor: token.colorPrimary,
+
+  boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlOutline}`,
+
+  ...genHoverActiveButtonStyle(
+    {
+      color: token.colorTextLightSolid,
+      backgroundColor: token.colorPrimaryHover
+    },
+    {
+      color: token.colorTextLightSolid,
+      backgroundColor: token.colorPrimaryActive
+    }
+  ),
+
+  ...genGhostButtonStyle(
+    token.componentCls,
+    token.colorPrimary,
+    token.colorPrimary,
+    token.colorTextDisabled,
+    token.colorBorder,
+    {
+      color: token.colorPrimaryHover,
+      borderColor: token.colorPrimaryHover
+    },
+    {
+      color: token.colorPrimaryActive,
+      borderColor: token.colorPrimaryActive
+    }
+  ),
+
+  [`&${token.componentCls}-dangerous`]: {
+    backgroundColor: token.colorError,
+    boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.colorErrorOutline}`,
+
+    ...genHoverActiveButtonStyle(
+      {
+        backgroundColor: token.colorErrorHover
+      },
+      {
+        backgroundColor: token.colorErrorActive
+      }
+    ),
+
+    ...genGhostButtonStyle(
+      token.componentCls,
+      token.colorError,
+      token.colorError,
+      token.colorTextDisabled,
+      token.colorBorder,
+      {
+        color: token.colorErrorHover,
+        borderColor: token.colorErrorHover
+      },
+      {
+        color: token.colorErrorActive,
+        borderColor: token.colorErrorActive
+      }
+    ),
+    ...genSolidDisabledButtonStyle(token)
+  }
+})
+
+// Type: Dashed
+const genDashedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+  ...genDefaultButtonStyle(token),
+  borderStyle: 'dashed'
+})
+
+// Type: Link
+const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+  color: token.colorLink,
+
+  ...genHoverActiveButtonStyle(
+    {
+      color: token.colorLinkHover
+    },
+    {
+      color: token.colorLinkActive
+    }
+  ),
+
+  ...genPureDisabledButtonStyle(token),
+
+  [`&${token.componentCls}-dangerous`]: {
+    color: token.colorError,
+
+    ...genHoverActiveButtonStyle(
+      {
+        color: token.colorErrorHover
+      },
+      {
+        color: token.colorErrorActive
+      }
+    ),
+
+    ...genPureDisabledButtonStyle(token)
+  }
+})
+
+// Type: Text
+const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+  ...genHoverActiveButtonStyle(
+    {
+      color: token.colorText,
+      backgroundColor: token.colorBgTextHover
+    },
+    {
+      color: token.colorText,
+      backgroundColor: token.colorBgTextActive
+    }
+  ),
+
+  ...genPureDisabledButtonStyle(token),
+
+  [`&${token.componentCls}-dangerous`]: {
+    color: token.colorError,
+
+    ...genPureDisabledButtonStyle(token),
+    ...genHoverActiveButtonStyle(
+      {
+        color: token.colorErrorHover,
+        backgroundColor: token.colorErrorBg
+      },
+      {
+        color: token.colorErrorHover,
+        backgroundColor: token.colorErrorBg
+      }
+    )
+  }
+})
+
+// Href and Disabled
+const genDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+  ...genDisabledStyle(token),
+  [`&${token.componentCls}:hover`]: {
+    ...genDisabledStyle(token)
+  }
+})
+
+const genTypeButtonStyle: GenerateStyle<ButtonToken> = token => {
+  const { componentCls } = token
+
+  return {
+    [`${componentCls}-default`]: genDefaultButtonStyle(token),
+    [`${componentCls}-primary`]: genPrimaryButtonStyle(token),
+    [`${componentCls}-dashed`]: genDashedButtonStyle(token),
+    [`${componentCls}-link`]: genLinkButtonStyle(token),
+    [`${componentCls}-text`]: genTextButtonStyle(token),
+    [`${componentCls}-disabled`]: genDisabledButtonStyle(token)
+  }
+}
+
+// =============================== Size ===============================
+const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls = ''): CSSInterpolation => {
+  const { componentCls, iconCls, controlHeight, fontSize, lineHeight, lineWidth, borderRadius, buttonPaddingHorizontal } = token
+
+  const paddingVertical = Math.max(0, (controlHeight - fontSize * lineHeight) / 2 - lineWidth)
+  const paddingHorizontal = buttonPaddingHorizontal - lineWidth
+
+  const iconOnlyCls = `${componentCls}-icon-only`
+
+  return [
+    // Size
+    {
+      [`${componentCls}${sizePrefixCls}`]: {
+        fontSize,
+        height: controlHeight,
+        padding: `${paddingVertical}px ${paddingHorizontal}px`,
+        borderRadius,
+
+        [`&${iconOnlyCls}`]: {
+          width: controlHeight,
+          paddingInlineStart: 0,
+          paddingInlineEnd: 0,
+          [`&${componentCls}-round`]: {
+            width: 'auto'
+          },
+          '> span': {
+            transform: 'scale(1.143)' // 14px -> 16px
+          }
+        },
+
+        // Loading
+        [`&${componentCls}-loading`]: {
+          opacity: token.opacityLoading,
+          cursor: 'default'
+        },
+
+        [`${componentCls}-loading-icon`]: {
+          transition: `width ${token.motionDurationSlow} ${token.motionEaseInOut}, opacity ${token.motionDurationSlow} ${token.motionEaseInOut}`
+        },
+
+        [`&:not(${iconOnlyCls}) ${componentCls}-loading-icon > ${iconCls}`]: {
+          marginInlineEnd: token.marginXS
+        }
+      }
+    },
+
+    // Shape - patch prefixCls again to override solid border radius style
+    {
+      [`${componentCls}${componentCls}-circle${sizePrefixCls}`]: genCircleButtonStyle(token)
+    },
+    {
+      [`${componentCls}${componentCls}-round${sizePrefixCls}`]: genRoundButtonStyle(token)
+    }
+  ]
+}
+
+const genSizeBaseButtonStyle: GenerateStyle<ButtonToken> = token => genSizeButtonStyle(token)
+
+const genSizeSmallButtonStyle: GenerateStyle<ButtonToken> = token => {
+  const smallToken = mergeToken<ButtonToken>(token, {
+    controlHeight: token.controlHeightSM,
+    padding: token.paddingXS,
+    buttonPaddingHorizontal: 8, // Fixed padding
+    borderRadius: token.borderRadiusSM
+  })
+
+  return genSizeButtonStyle(smallToken, `${token.componentCls}-sm`)
+}
+
+const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = token => {
+  const largeToken = mergeToken<ButtonToken>(token, {
+    controlHeight: token.controlHeightLG,
+    fontSize: token.fontSizeLG,
+    borderRadius: token.borderRadiusLG
+  })
+
+  return genSizeButtonStyle(largeToken, `${token.componentCls}-lg`)
+}
+
+const genBlockButtonStyle: GenerateStyle<ButtonToken> = token => {
+  const { componentCls } = token
+  return {
+    [componentCls]: {
+      [`&${componentCls}-block`]: {
+        width: '100%'
+      }
+    }
+  }
+}
+
+// ============================== Export ==============================
+export default genComponentStyleHook('Button', token => {
+  const { controlTmpOutline, paddingContentHorizontal } = token
+
+  const buttonToken = mergeToken<ButtonToken>(token, {
+    colorOutlineDefault: controlTmpOutline,
+    buttonPaddingHorizontal: paddingContentHorizontal
+  })
+
+  return [
+    // Shared
+    genSharedButtonStyle(buttonToken),
+
+    // Size
+    genSizeSmallButtonStyle(buttonToken),
+    genSizeBaseButtonStyle(buttonToken),
+    genSizeLargeButtonStyle(buttonToken),
+
+    // Block
+    genBlockButtonStyle(buttonToken),
+
+    // Group (type, ghost, danger, disabled, loading)
+    genTypeButtonStyle(buttonToken),
+
+    // Button Group
+    genGroupStyle(buttonToken),
+
+    // Space Compact
+    genCompactItemStyle(token, { focus: false }),
+    genCompactItemVerticalStyle(token)
+  ]
+})

components/components.ts

@@ -1 +1,2 @@
 export { default as Button } from './button'
+export { default as ConfigProvider } from './config-provider'

components/config-provider/context.ts

@@ -1,6 +1,37 @@
-import { createInjectionState } from '@vueuse/core'
+import { booleanType, createInjectionState, functionType, objectType, someType, stringType } from '@v-c/utils'
+import type { ExtractPropTypes } from 'vue'
 import { computed } from 'vue'
+import type { DerivativeFunc } from '@antd-tiny-vue/cssinjs'
+import type { AliasToken, MapToken, OverrideToken, SeedToken } from '../theme/interface'
+import type { RenderEmptyHandler } from './default-render-empty'
+import type { ConfigProviderProps } from './index'
 
+export type SizeType = 'small' | 'middle' | 'large' | undefined
+
+export interface Theme {
+  primaryColor?: string
+  infoColor?: string
+  successColor?: string
+  processingColor?: string
+  errorColor?: string
+  warningColor?: string
+}
+
+export interface CSPConfig {
+  nonce?: string
+}
+
+export type DirectionType = 'ltr' | 'rtl' | undefined
+
+export type MappingAlgorithm = DerivativeFunc<SeedToken, MapToken>
+
+export interface ThemeConfig {
+  token?: Partial<AliasToken>
+  components?: OverrideToken
+  algorithm?: MappingAlgorithm | MappingAlgorithm[]
+  hashed?: boolean
+  inherit?: boolean
+}
 export const defaultIconPrefixCls = 'anticon'
 
 const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
@@ -8,21 +39,83 @@ const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) =>
 
   return suffixCls ? `ant-${suffixCls}` : 'ant'
 }
-const [useProviderConfigProvide, useProviderConfigInject] = createInjectionState(() => {
+
-  const getPrefixCls = defaultGetPrefixCls
+export const configConsumerProps = {
-  const iconPrefixCls = computed(() => defaultIconPrefixCls)
+  getTargetContainer: functionType<() => HTMLElement>(),
+  getPopupContainer: functionType<(triggerNode?: HTMLElement) => HTMLElement>(),
+  rootPrefixCls: stringType(),
+  iconPrefixCls: stringType(defaultIconPrefixCls),
+  getPrefixCls: functionType(defaultGetPrefixCls),
+  renderEmpty: functionType<RenderEmptyHandler>(),
+  csp: objectType<CSPConfig>(),
+  autoInsertSpaceInButton: booleanType(),
+  input: objectType<{
+    autoComplete?: string
+  }>(),
+  pagination: objectType<{
+    showSizeChanger?: boolean
+  }>(),
+  locale: objectType(),
+  pageHeader: objectType<{
+    ghost: boolean
+  }>(),
+  direction: someType<DirectionType>([String]),
+  space: objectType<{
+    size?: SizeType | number
+  }>(),
+  virtual: booleanType(),
+  dropdownMatchSelectWidth: booleanType(),
+  form: objectType<{
+    // requiredMark?: RequiredMark
+    colon?: boolean
+    // scrollToFirstError?: Options | boolean
+  }>(),
+  theme: objectType<ThemeConfig>(),
+  select: objectType<{
+    showSearch?: boolean
+  }>()
+}
+
+export type ConfigConsumerProps = ExtractPropTypes<typeof configConsumerProps>
+
+const configState = (props: ConfigProviderProps) => {
+  const getPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
+    const { prefixCls, getPrefixCls } = props
+    if (customizePrefixCls) return customizePrefixCls
+    const mergedPrefixCls = prefixCls || getPrefixCls?.('') || defaultGetPrefixCls('')
+    return suffixCls ? `${mergedPrefixCls}-${suffixCls}` : mergedPrefixCls
+  }
+  const iconPrefixCls = computed(() => props?.iconPrefixCls ?? defaultIconPrefixCls)
+  const shouldWrapSSR = computed(() => iconPrefixCls.value !== defaultIconPrefixCls)
+  const csp = computed(() => props?.csp)
+  const componentSize = computed(() => props?.componentSize)
+  const componentDisabled = computed(() => props?.componentDisabled)
+  const autoInsertSpaceInButton = computed(() => props?.autoInsertSpaceInButton)
+  const direction = computed(() => props?.direction)
   return {
     getPrefixCls,
-    iconPrefixCls
+    iconPrefixCls,
+    shouldWrapSSR,
+    csp,
+    componentSize,
+    componentDisabled,
+    autoInsertSpaceInButton,
+    direction
   }
-})
+}
+const [useProviderConfigProvide, useProviderConfigInject] = createInjectionState(configState)
 
 export { useProviderConfigProvide }
-export const useProviderConfigState = () => {
+export const useProviderConfigState = (): ReturnType<typeof configState> => {
   return (
-    useProviderConfigInject() ?? {
+    useProviderConfigInject() ??
+    ({
       getPrefixCls: defaultGetPrefixCls,
-      iconPrefixCls: computed(() => defaultIconPrefixCls)
+      iconPrefixCls: computed(() => defaultIconPrefixCls),
-    }
+      componentSize: computed(() => undefined),
+      componentDisabled: computed(() => false),
+      direction: computed(() => undefined),
+      autoInsertSpaceInButton: computed(() => undefined)
+    } as any)
   )
 }

components/config-provider/css-variables.ts

@@ -0,0 +1,94 @@
+/* eslint-disable import/prefer-default-export, prefer-destructuring */
+
+import { generate } from '@ant-design/colors'
+import { TinyColor } from '@ctrl/tinycolor'
+import { canUseDom, updateCSS, warning } from '@v-c/utils'
+import type { Theme } from './context'
+
+const dynamicStyleMark = `-ant-${Date.now()}-${Math.random()}`
+
+export function getStyle(globalPrefixCls: string, theme: Theme) {
+  const variables: Record<string, string> = {}
+
+  const formatColor = (color: TinyColor, updater?: (cloneColor: TinyColor) => TinyColor) => {
+    let clone = color.clone()
+    clone = updater?.(clone) || clone
+    return clone.toRgbString()
+  }
+
+  const fillColor = (colorVal: string, type: string) => {
+    const baseColor = new TinyColor(colorVal)
+    const colorPalettes = generate(baseColor.toRgbString())
+
+    variables[`${type}-color`] = formatColor(baseColor)
+    variables[`${type}-color-disabled`] = colorPalettes[1]
+    variables[`${type}-color-hover`] = colorPalettes[4]
+    variables[`${type}-color-active`] = colorPalettes[6]
+    variables[`${type}-color-outline`] = baseColor.clone().setAlpha(0.2).toRgbString()
+    variables[`${type}-color-deprecated-bg`] = colorPalettes[0]
+    variables[`${type}-color-deprecated-border`] = colorPalettes[2]
+  }
+
+  // ================ Primary Color ================
+  if (theme.primaryColor) {
+    fillColor(theme.primaryColor, 'primary')
+
+    const primaryColor = new TinyColor(theme.primaryColor)
+    const primaryColors = generate(primaryColor.toRgbString())
+
+    // Legacy - We should use semantic naming standard
+    primaryColors.forEach((color, index) => {
+      variables[`primary-${index + 1}`] = color
+    })
+    // Deprecated
+    variables['primary-color-deprecated-l-35'] = formatColor(primaryColor, c => c.lighten(35))
+    variables['primary-color-deprecated-l-20'] = formatColor(primaryColor, c => c.lighten(20))
+    variables['primary-color-deprecated-t-20'] = formatColor(primaryColor, c => c.tint(20))
+    variables['primary-color-deprecated-t-50'] = formatColor(primaryColor, c => c.tint(50))
+    variables['primary-color-deprecated-f-12'] = formatColor(primaryColor, c => c.setAlpha(c.getAlpha() * 0.12))
+
+    const primaryActiveColor = new TinyColor(primaryColors[0])
+    variables['primary-color-active-deprecated-f-30'] = formatColor(primaryActiveColor, c => c.setAlpha(c.getAlpha() * 0.3))
+    variables['primary-color-active-deprecated-d-02'] = formatColor(primaryActiveColor, c => c.darken(2))
+  }
+
+  // ================ Success Color ================
+  if (theme.successColor) {
+    fillColor(theme.successColor, 'success')
+  }
+
+  // ================ Warning Color ================
+  if (theme.warningColor) {
+    fillColor(theme.warningColor, 'warning')
+  }
+
+  // ================= Error Color =================
+  if (theme.errorColor) {
+    fillColor(theme.errorColor, 'error')
+  }
+
+  // ================= Info Color ==================
+  if (theme.infoColor) {
+    fillColor(theme.infoColor, 'info')
+  }
+
+  // Convert to css variables
+  const cssList = Object.keys(variables).map(key => `--${globalPrefixCls}-${key}: ${variables[key]};`)
+
+  return `
+  :root {
+    ${cssList.join('\n')}
+  }
+  `.trim()
+}
+
+export function registerTheme(globalPrefixCls: string, theme: Theme) {
+  const style = getStyle(globalPrefixCls, theme)
+
+  if (canUseDom()) {
+    updateCSS(style, `${dynamicStyleMark}-dynamic-theme`)
+  } else {
+    // @ts-expect-error this is ssr
+    warning(false, 'ConfigProvider', 'SSR do not support dynamic theme with css variables.')
+  }
+}

components/config-provider/default-render-empty.tsx

@@ -0,0 +1,3 @@
+import type { VNodeChild } from 'vue'
+
+export type RenderEmptyHandler = (componentName?: string) => VNodeChild

components/config-provider/hooks/config.ts

@@ -0,0 +1,9 @@
+import { useProviderConfigState } from '../context'
+
+export const useConfig = () => {
+  const { componentDisabled, componentSize } = useProviderConfigState()
+  return {
+    componentDisabled,
+    componentSize
+  }
+}

components/config-provider/index.tsx

@@ -0,0 +1,162 @@
+import { booleanType, objectType, someType, stringType } from '@v-c/utils'
+import type { App, ExtractPropTypes } from 'vue'
+import { computed, defineComponent } from 'vue'
+import { createTheme } from '@antd-tiny-vue/cssinjs'
+import defaultSeedToken from '../theme/themes/seed'
+import type { DesignTokenConfig } from '../theme/internal'
+import { DesignTokenProviderContext } from '../theme/internal'
+import type { CSPConfig, ConfigConsumerProps, DirectionType, SizeType, Theme, ThemeConfig } from './context'
+import { configConsumerProps, defaultIconPrefixCls, useProviderConfigProvide } from './context'
+import { registerTheme } from './css-variables'
+import type { RenderEmptyHandler } from './default-render-empty'
+
+import useStyle from './style'
+import { useConfig } from './hooks/config'
+export type { RenderEmptyHandler, CSPConfig, DirectionType, ConfigConsumerProps, ThemeConfig }
+
+export { defaultIconPrefixCls }
+export const configProviderProps = {
+  ...configConsumerProps,
+  prefixCls: stringType(),
+  componentSize: someType<SizeType>([String]),
+  componentDisabled: booleanType(),
+  legacyLocale: objectType()
+}
+
+export type ConfigProviderProps = Partial<ExtractPropTypes<typeof configProviderProps>>
+
+export const defaultPrefixCls = 'ant'
+
+// These props is used by `useContext` directly in sub component
+// const PASSED_PROPS: Exclude<keyof ConfigConsumerProps, 'rootPrefixCls' | 'getPrefixCls'>[] = [
+//   'getTargetContainer',
+//   'getPopupContainer',
+//   'renderEmpty',
+//   'pageHeader',
+//   'input',
+//   'pagination',
+//   'form',
+//   'select'
+// ]
+
+let globalPrefixCls: string
+let globalIconPrefixCls: string
+
+function getGlobalPrefixCls() {
+  return globalPrefixCls || defaultPrefixCls
+}
+
+function getGlobalIconPrefixCls() {
+  return globalIconPrefixCls || defaultIconPrefixCls
+}
+
+export const setGlobalConfig = ({ prefixCls, iconPrefixCls, theme }: Pick<ConfigProviderProps, 'prefixCls' | 'iconPrefixCls'> & { theme?: Theme }) => {
+  if (prefixCls !== undefined) {
+    globalPrefixCls = prefixCls
+  }
+  if (iconPrefixCls !== undefined) {
+    globalIconPrefixCls = iconPrefixCls
+  }
+
+  if (theme) {
+    registerTheme(getGlobalPrefixCls(), theme)
+  }
+}
+
+export const globalConfig = () => ({
+  getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => {
+    if (customizePrefixCls) return customizePrefixCls
+    return suffixCls ? `${getGlobalPrefixCls()}-${suffixCls}` : getGlobalPrefixCls()
+  },
+  getIconPrefixCls: getGlobalIconPrefixCls,
+  getRootPrefixCls: () => {
+    // If Global prefixCls provided, use this
+    if (globalPrefixCls) {
+      return globalPrefixCls
+    }
+
+    // Fallback to default prefixCls
+    return getGlobalPrefixCls()
+  }
+})
+
+const ConfigProvider = defineComponent({
+  name: 'AConfigProvider',
+  props: {
+    ...configProviderProps
+  },
+  setup(props, { slots }) {
+    // 依赖注入
+    const { shouldWrapSSR, iconPrefixCls } = useProviderConfigProvide(props)
+    const wrapSSR = useStyle(iconPrefixCls)
+    const memoTheme = computed(() => {
+      const { algorithm, token, ...rest } = props.theme || {}
+      const themeObj = algorithm && (!Array.isArray(algorithm) || algorithm.length > 0) ? createTheme(algorithm) : undefined
+      return {
+        ...rest,
+        theme: themeObj,
+        token: {
+          ...defaultSeedToken,
+          ...token
+        }
+      }
+    })
+
+    return () => {
+      const { locale, theme } = props
+      const children = slots.default?.()
+      let childNode = shouldWrapSSR.value ? wrapSSR(children) : children
+
+      /**
+       * Form
+       */
+      // const validateMessages = React.useMemo(
+      //   () =>
+      //     setValues(
+      //       {},
+      //       defaultLocale.Form?.defaultValidateMessages || {},
+      //       memoedConfig.locale?.Form?.defaultValidateMessages || {},
+      //       form?.validateMessages || {},
+      //     ),
+      //   [memoedConfig, form?.validateMessages],
+      // );
+      //
+      // if (Object.keys(validateMessages).length > 0) {
+      //   childNode = <RcFormProvider validateMessages={validateMessages}>{children}</RcFormProvider>;
+      // }
+      /**
+       * 多语言实现部分
+       */
+      if (locale) {
+        //   多语言部分
+        //   childNode = <LocaleProvider locale={locale}>{childNode}</LocaleProvider>;
+      }
+
+      if (theme) {
+        childNode = (
+          <DesignTokenProviderContext
+            {...(memoTheme.value as DesignTokenConfig)}
+            token={memoTheme.value.token as any}
+          >
+            {childNode}
+          </DesignTokenProviderContext>
+        )
+      }
+
+      return childNode
+    }
+  }
+})
+
+ConfigProvider.install = (app: App) => {
+  app.component(ConfigProvider.name, ConfigProvider)
+}
+
+ConfigProvider.config = setGlobalConfig
+
+ConfigProvider.useConfig = useConfig
+export default ConfigProvider as typeof ConfigProvider & {
+  install(app: App): void
+  config: typeof setGlobalConfig
+  useConfig: typeof useConfig
+}

components/config-provider/style/index.ts

@@ -0,0 +1,23 @@
+import { useStyleRegister } from '@antd-tiny-vue/cssinjs'
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+import { resetIcon } from '../../style'
+import { useToken } from '../../theme/internal'
+
+const useStyle = (iconPrefixCls: Ref<string>) => {
+  const [theme, token] = useToken()
+  // Generate style for icons
+  const info = computed(() => ({ theme: theme.value, token: token.value, hashId: '', path: ['ant-design-icons', iconPrefixCls.value] }))
+  return useStyleRegister(info, () => [
+    {
+      [`.${iconPrefixCls.value}`]: {
+        ...resetIcon(),
+        [`.${iconPrefixCls.value} .${iconPrefixCls.value}-icon`]: {
+          display: 'block'
+        }
+      }
+    }
+  ])
+}
+
+export default useStyle

components/space/compact.ts

@@ -0,0 +1,41 @@
+import { classNames, createInjectionState } from '@v-c/utils'
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+import type { DirectionType } from '../config-provider'
+
+const spaceCompactItem = () => {
+  return {
+    compactDirection: computed(() => null),
+    isFirstItem: computed(() => null),
+    isLastItem: computed(() => null),
+    compactSize: computed(() => null)
+  }
+}
+
+export const [useSpaceCompactProvider, useSpaceCompactInject] = createInjectionState(spaceCompactItem)
+
+export const useSpaceCompactItemState = (): ReturnType<typeof spaceCompactItem> | undefined => useSpaceCompactInject()
+
+export const useCompactItemContext = (prefixCls: Ref<string>, direction: Ref<DirectionType>) => {
+  const compactItemContext = useSpaceCompactItemState()
+
+  const compactItemClassnames = computed(() => {
+    if (!compactItemContext) return ''
+
+    const { compactDirection, isFirstItem, isLastItem } = compactItemContext
+    const separator = compactDirection.value === 'vertical' ? '-vertical-' : '-'
+
+    return classNames({
+      [`${prefixCls.value}-compact${separator}item`]: true,
+      [`${prefixCls.value}-compact${separator}first-item`]: isFirstItem.value,
+      [`${prefixCls.value}-compact${separator}last-item`]: isLastItem.value,
+      [`${prefixCls.value}-compact${separator}item-rtl`]: direction.value === 'rtl'
+    })
+  })
+
+  return {
+    compactSize: compactItemContext?.compactSize,
+    compactDirection: compactItemContext?.compactDirection,
+    compactItemClassnames
+  }
+}

components/theme/interface/components.ts

@@ -2,8 +2,8 @@
 // import type { ComponentToken as AnchorComponentToken } from '../../anchor/style'
 // import type { ComponentToken as AvatarComponentToken } from '../../avatar/style'
 // import type { ComponentToken as BackTopComponentToken } from '../../back-top/style'
-// import type { ComponentToken as ButtonComponentToken } from '../../button/style'
+import type { ComponentToken as ButtonComponentToken } from '../../button/style'
-// import type { ComponentToken as FloatButtonComponentToken } from '../../float-button/style'
+// import type { ComponentToken as FloatButtonComponentToken } from '../../floats-button/style'
 // import type { ComponentToken as CalendarComponentToken } from '../../calendar/style'
 // import type { ComponentToken as CardComponentToken } from '../../card/style'
 // import type { ComponentToken as CarouselComponentToken } from '../../carousel/style'
@@ -48,7 +48,7 @@
 // import type { ComponentToken as TourComponentToken } from '../../tour/style'
 // import type { ComponentToken as QRCodeComponentToken } from '../../qrcode/style'
 // import type { ComponentToken as AppComponentToken } from '../../app/style'
-// import type { ComponentToken as WaveToken } from '../../_util/wave/style'
+import type { ComponentToken as WaveToken } from '../../_util/wave/style'
 
 export interface ComponentTokenMap {
   Affix?: {}
@@ -57,7 +57,7 @@ export interface ComponentTokenMap {
   // Avatar?: AvatarComponentToken
   // BackTop?: BackTopComponentToken
   // Badge?: {}
-  // Button?: ButtonComponentToken
+  Button?: ButtonComponentToken
   // Breadcrumb?: {}
   // Card?: CardComponentToken
   // Carousel?: CarouselComponentToken
@@ -115,5 +115,5 @@ export interface ComponentTokenMap {
   // App?: AppComponentToken
   //
   // /** @private Internal TS definition. Do not use. */
-  // Wave?: WaveToken
+  Wave?: WaveToken
 }

components/theme/internal.ts

@@ -1,8 +1,8 @@
 import type { CSSInterpolation, Theme } from '@antd-tiny-vue/cssinjs'
 import { createTheme, useCacheToken, useStyleRegister } from '@antd-tiny-vue/cssinjs'
-import { createInjectionState } from '@vueuse/core'
+import { createInjectionState, objectType, someType } from '@v-c/utils'
 import type { ComputedRef, VNodeChild } from 'vue'
-import { computed } from 'vue'
+import { computed, defineComponent } from 'vue'
 import version from '../version'
 import type { AliasToken, GlobalToken, MapToken, OverrideToken, PresetColorKey, PresetColorType, SeedToken } from './interface'
 import { PresetColors } from './interface'
@@ -54,6 +54,21 @@ const [useDesignTokenProvider, useDesignTokenInject] = createInjectionState((tok
   return token
 })
 
+export const DesignTokenProviderContext = defineComponent({
+  props: {
+    token: objectType<AliasToken>(),
+    theme: objectType<Theme<SeedToken, MapToken>>(),
+    components: objectType<OverrideToken>(),
+    hashed: someType<string | boolean>([String, Boolean])
+  },
+  setup(props, { slots }) {
+    useDesignTokenProvider(props)
+    return () => {
+      return slots.default?.()
+    }
+  }
+})
+
 export { useDesignTokenProvider }
 export const useDesignTokenState = () => useDesignTokenInject() ?? defaultConfig
 

docs/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Antd Tiny Vue</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="/src/main.ts"></script>
+</body>
+</html>

docs/src/App.vue

@@ -0,0 +1,5 @@
+<script lang="ts" setup></script>
+
+<template>
+  <router-view />
+</template>

docs/src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+const app = createApp(App)
+
+app.mount('#app')

docs/src/pages/index.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div>
+    <!--        -->
+  </div>
+</template>

docs/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import vueJsxPlugin from '@vitejs/plugin-vue-jsx'
+import vue from '@vitejs/plugin-vue'
+export default defineConfig({
+  plugins: [vue(), vueJsxPlugin()]
+})

package.json

@@ -17,26 +17,29 @@
     "@ant-design/colors": "^7.0.0",
     "@antd-tiny-vue/cssinjs": "^0.0.4",
     "@ctrl/tinycolor": "^3.6.0",
+    "@v-c/utils": "^0.0.19",
     "@vueuse/core": "^9.13.0",
-    "vue": "^3.2.0"
+    "vue": "^3.2.47"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.4.3",
+    "@commitlint/cli": "^17.5.0",
-    "@commitlint/config-conventional": "^17.4.3",
+    "@commitlint/config-conventional": "^17.4.4",
     "@mistjs/eslint-config-vue-jsx": "^0.0.3",
     "@mistjs/tsconfig": "^1.0.0",
     "@mistjs/tsconfig-vue": "^0.0.3",
-    "@types/node": "^18.13.0",
+    "@types/node": "^18.15.9",
-    "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "@vitejs/plugin-vue": "^4.1.0",
-    "eslint": "^8.34.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "eslint": "^8.36.0",
     "husky": "^8.0.3",
-    "lint-staged": "^13.1.2",
+    "lint-staged": "^13.2.0",
-    "prettier": "^2.8.4",
+    "prettier": "^2.8.7",
     "typescript": "^4.9.5",
-    "vite": "^4.1.1",
+    "vite": "^4.2.1",
-    "vite-plugin-vitepress-demo": "2.0.0-alpha.8",
+    "vite-plugin-vitepress-demo": "2.0.0-beta.26",
-    "vitepress": "1.0.0-alpha.47",
+    "vitepress": "1.0.0-alpha.63",
-    "vitest": "^0.28.5"
+    "vitest": "^0.28.5",
+    "vue-router": "^4.1.6"
   },
   "pnpm": {
     "peerDependencyRules": {

site/demos/button/basic.vue

@@ -10,8 +10,15 @@ title: 基础按钮
 <script lang="ts" setup></script>
 
 <template>
-  <div>
+  <div style="display: flex; gap: 10px; padding-bottom: 10px">
     <a-button>这是按钮</a-button>
+    <a-button type="primary">这是按钮</a-button>
+    <a-button
+      type="primary"
+      danger
+    >
+      这是按钮
+    </a-button>
   </div>
 </template>
 

site/vite.config.ts

@@ -1,12 +1,7 @@
 import { defineConfig } from 'vite'
 import vueJsxPlugin from '@vitejs/plugin-vue-jsx'
-import { VitePluginVitepressDemo } from 'vite-plugin-vitepress-demo'
+import VitePluginVitepressDemo from 'vite-plugin-vitepress-demo'
 
 export default defineConfig({
-  plugins: [
+  plugins: [vueJsxPlugin(), VitePluginVitepressDemo()]
-    vueJsxPlugin(),
-    VitePluginVitepressDemo({
-      glob: ['**/demos/**/*.vue']
-    })
-  ]
 })