From 811582d3d902567a0a9a1dee8e79fcc5e6a19154 Mon Sep 17 00:00:00 2001
From: forsigner <forsigner@gmail.com>
Date: Sun, 4 Jun 2023 17:23:24 +0800
Subject: [PATCH] feat: create fower-plugin-grid

---
 .eslintignore                               |   1 +
 README.md                                   |   2 -
 examples/example-nextjs/pages/_app.tsx      |   2 +-
 examples/example-nextjs/pages/_document.tsx |   4 +-
 examples/example-nextjs/pages/index.tsx     |   4 +-
 package.json                                |   1 +
 packages/core/src/atom.ts                   |   2 +-
 packages/fower-plugin-gap/CHANGELOG.md      | 123 +++
 packages/fower-plugin-gap/README.md         |   1 +
 packages/fower-plugin-gap/gen-types.js      |  98 +++
 packages/fower-plugin-gap/package.json      |  30 +
 packages/fower-plugin-gap/src/index.test.ts |  45 +
 packages/fower-plugin-gap/src/index.ts      |  36 +
 packages/fower-plugin-gap/tsconfig.json     |  19 +
 packages/fower-plugin-gap/types/index.d.ts  | 858 ++++++++++++++++++++
 packages/fower-plugin-grid/package.json     |   2 +-
 packages/fower-plugin-grid/src/index.ts     |   7 +-
 packages/fower-plugin-grid/types/index.d.ts |  39 -
 packages/preset-react-native/package.json   |   3 +-
 packages/preset-react-native/src/plugins.ts |   2 +
 packages/preset-remax/package.json          |   3 +-
 packages/preset-remax/types/index.d.ts      |   1 +
 packages/preset-taro/package.json           |   3 +-
 packages/preset-taro/src/plugins.ts         |   2 +
 packages/preset-taro/types/index.d.ts       |   1 +
 packages/preset-uniapp/package.json         |   3 +-
 packages/preset-uniapp/src/plugins.ts       |   2 +
 packages/preset-uniapp/types/index.d.ts     |   1 +
 packages/preset-web-rem/package.json        |   3 +-
 packages/preset-web-rem/src/plugins.ts      |   2 +
 packages/preset-web-rem/types/index.d.ts    |   1 +
 packages/preset-web/package.json            |   3 +-
 packages/preset-web/src/plugins.ts          |   2 +
 packages/preset-web/types/index.d.ts        |   1 +
 packages/react/src/index.tsx                |   1 -
 pnpm-lock.yaml                              |  58 ++
 website/package.json                        |   1 +
 website/src/pages/index.tsx                 |   3 +-
 38 files changed, 1307 insertions(+), 63 deletions(-)
 create mode 100644 .eslintignore
 create mode 100644 packages/fower-plugin-gap/CHANGELOG.md
 create mode 100644 packages/fower-plugin-gap/README.md
 create mode 100755 packages/fower-plugin-gap/gen-types.js
 create mode 100644 packages/fower-plugin-gap/package.json
 create mode 100644 packages/fower-plugin-gap/src/index.test.ts
 create mode 100644 packages/fower-plugin-gap/src/index.ts
 create mode 100644 packages/fower-plugin-gap/tsconfig.json
 create mode 100644 packages/fower-plugin-gap/types/index.d.ts

diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 000000000..cf44e148b
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1 @@
+**/*.js
\ No newline at end of file
diff --git a/README.md b/README.md
index 634302dfa..13fdb64ce 100644
--- a/README.md
+++ b/README.md
@@ -11,8 +11,6 @@ A utility-first CSS in JS library for rapid UI development.
 ## Quick Start
 
 - [Use with React](https://fower.vercel.app/docs/use-with-react)
-- [Use with Vue](https://fower.vercel.app/docs/use-with-vue)
-- [Use with Svelte](https://fower.vercel.app/docs/use-with-svelte)
 - [Use with React Native](https://fower.vercel.app/docs/use-with-rn)
 
 ## Documentation
diff --git a/examples/example-nextjs/pages/_app.tsx b/examples/example-nextjs/pages/_app.tsx
index 82512512c..8d6a346f7 100644
--- a/examples/example-nextjs/pages/_app.tsx
+++ b/examples/example-nextjs/pages/_app.tsx
@@ -3,7 +3,7 @@ import type { AppProps } from 'next/app'
 import { setConfig } from '@fower/react'
 
 setConfig({
-  prefix: 'ai-c-',
+  // prefix: 'ai-c-',
   mode: {
     autoDarkMode: {
       enabled: true,
diff --git a/examples/example-nextjs/pages/_document.tsx b/examples/example-nextjs/pages/_document.tsx
index ddd189195..4a6367e20 100644
--- a/examples/example-nextjs/pages/_document.tsx
+++ b/examples/example-nextjs/pages/_document.tsx
@@ -16,8 +16,8 @@ class MyDocument extends Document {
   }
   render() {
     return (
-      <Html className="dark">
-      {/* <Html> */}
+      // <Html className="dark">
+      <Html>
         <Head>
           <style data-fower={getAtomIds()} dangerouslySetInnerHTML={{ __html: getCssString() }} />
         </Head>
diff --git a/examples/example-nextjs/pages/index.tsx b/examples/example-nextjs/pages/index.tsx
index 0ecb19fc6..ffd1081f8 100644
--- a/examples/example-nextjs/pages/index.tsx
+++ b/examples/example-nextjs/pages/index.tsx
@@ -4,12 +4,12 @@ import { Colors } from '../components/Colors'
 
 export default function Home() {
   return (
-    <Box bgGreen200 toCenterY toBetween>
+    <Box bgGreen200 toCenterX gapX={[30, 50, 60, 100, 200]}>
       <Box gray800 red500 green600--hover>
         AA
       </Box>
       <Box gray800 red500 green600--hover>
-        AA
+        BB
       </Box>
     </Box>
   )
diff --git a/package.json b/package.json
index e90dd7fa9..857bd9b6e 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "@fower/colors": "workspace:*",
     "@fower/utils": "workspace:*",
     "@types/react": "^18.2.8",
+    "csstype": "^3.1.2",
     "@changesets/cli": "^2.25.2",
     "@commitlint/cli": "^12.1.4",
     "@commitlint/config-conventional": "^12.1.4",
diff --git a/packages/core/src/atom.ts b/packages/core/src/atom.ts
index 038984fa8..9ccfc076c 100644
--- a/packages/core/src/atom.ts
+++ b/packages/core/src/atom.ts
@@ -12,7 +12,7 @@ export { Options, Meta }
  * @example p-20,opacity-80
  */
 export const digitReg =
-  /^(m[xytrbl]?-?|p[xytrbl]?|space[xy]?|top-?|right-?|bottom-?|left-?|[wh]|square|circle|min[hw]|max[hw]|opacity|delay|duration|translate[xyz]|scale[xy]?|rotate[xy]?|skew[xy]?|text|zIndex-?|leading|stroke|fontWeight|outlineOffset|order|flex(Grow|Shrink|Basis)?|(row|column)?Gap|gridTemplateColumns|border(Top|Right|Bottom|Left)?|rounded(Top(Left|Right)?|Right|Bottom(Left|Right)?|Left)?)(-?\d+[a-z]*?|-auto)$/i
+  /^(m[xytrbl]?-?|p[xytrbl]?|gap[xy]?|space[xy]?|top-?|right-?|bottom-?|left-?|[wh]|square|circle|min[hw]|max[hw]|opacity|delay|duration|translate[xyz]|scale[xy]?|rotate[xy]?|skew[xy]?|text|zIndex-?|leading|stroke|fontWeight|outlineOffset|order|flex(Grow|Shrink|Basis)?|(row|column)?Gap|gridTemplateColumns|border(Top|Right|Bottom|Left)?|rounded(Top(Left|Right)?|Right|Bottom(Left|Right)?|Left)?)(-?\d+[a-z]*?|-auto)$/i
 
 export class Atom {
   /**
diff --git a/packages/fower-plugin-gap/CHANGELOG.md b/packages/fower-plugin-gap/CHANGELOG.md
new file mode 100644
index 000000000..1e9702113
--- /dev/null
+++ b/packages/fower-plugin-gap/CHANGELOG.md
@@ -0,0 +1,123 @@
+# fower-plugin-grid
+
+## 1.78.0
+
+### Minor Changes
+
+- use pnpm
+
+### Patch Changes
+
+- Updated dependencies
+  - @fower/atomic-props@1.78.0
+  - @fower/core@1.78.0
+  - @fower/utils@1.78.0
+
+## 1.77.0
+
+### Minor Changes
+
+- only support react-like lib
+
+### Patch Changes
+
+- Updated dependencies
+  - @fower/atomic-props@1.77.0
+  - @fower/core@1.77.0
+  - @fower/utils@1.77.0
+
+## 1.76.0
+
+### Minor Changes
+
+- improve rounded and shadow
+
+### Patch Changes
+
+- Updated dependencies
+  - @fower/atomic-props@1.76.0
+  - @fower/core@1.76.0
+  - @fower/utils@1.76.0
+
+## 1.75.7
+
+### Patch Changes
+
+- fix auto dark mode
+- Updated dependencies
+  - @fower/atomic-props@1.75.7
+  - @fower/core@1.75.7
+  - @fower/utils@1.75.7
+
+## 1.75.6
+
+### Patch Changes
+
+- improve mappings in auto dark mode
+- Updated dependencies
+  - @fower/atomic-props@1.75.6
+  - @fower/core@1.75.6
+  - @fower/utils@1.75.6
+
+## 1.75.5
+
+### Patch Changes
+
+- improve auto darkmode
+- Updated dependencies
+  - @fower/atomic-props@1.75.5
+  - @fower/core@1.75.5
+  - @fower/utils@1.75.5
+
+## 1.75.4
+
+### Patch Changes
+
+- improve for auto dark mode
+- Updated dependencies
+  - @fower/atomic-props@1.75.4
+  - @fower/core@1.75.4
+  - @fower/utils@1.75.4
+
+## 1.75.3
+
+### Patch Changes
+
+- fix auto dark mode
+- Updated dependencies
+  - @fower/atomic-props@1.75.3
+  - @fower/core@1.75.3
+  - @fower/utils@1.75.3
+
+## 1.75.2
+
+### Patch Changes
+
+- improve auto dark mode
+- Updated dependencies
+  - @fower/atomic-props@1.75.2
+  - @fower/core@1.75.2
+  - @fower/utils@1.75.2
+
+## 1.75.1
+
+### Patch Changes
+
+- fix auto dark mode
+- Updated dependencies
+  - @fower/atomic-props@1.75.1
+  - @fower/core@1.75.1
+  - @fower/utils@1.75.1
+
+## 1.75.0
+
+### Minor Changes
+
+- update colors
+
+### Patch Changes
+
+- Updated dependencies
+  - @fower/atomic-props@1.75.0
+  - @fower/core@1.75.0
+  - @fower/utils@1.75.0
diff --git a/packages/fower-plugin-gap/README.md b/packages/fower-plugin-gap/README.md
new file mode 100644
index 000000000..9f8b52bff
--- /dev/null
+++ b/packages/fower-plugin-gap/README.md
@@ -0,0 +1 @@
+# fower-plugin-gap
diff --git a/packages/fower-plugin-gap/gen-types.js b/packages/fower-plugin-gap/gen-types.js
new file mode 100755
index 000000000..4f3d8bcda
--- /dev/null
+++ b/packages/fower-plugin-gap/gen-types.js
@@ -0,0 +1,98 @@
+const { colors } = require('@fower/colors')
+const { presetWeb } = require('@fower/preset-web')
+const { kebab, upFirst } = require('@fower/utils')
+const { SemicolonPreference } = require('typescript')
+const { join } = require('path')
+const { Project } = require('ts-morph')
+
+/** init somethings */
+const project = new Project()
+const cwd = process.cwd()
+const outPath = join(cwd, 'types', 'index.d.ts')
+const sourceFile = project.createSourceFile(outPath, undefined, {
+  overwrite: true,
+})
+
+/** add something to sourceFile */
+sourceFile.addImportDeclarations([
+  {
+    namedImports: ['FowerPlugin', 'ResponsiveValue', 'ResponsiveBoolean'],
+    moduleSpecifier: '@fower/core',
+  },
+])
+sourceFile.addStatements(`import * as CSS from 'csstype'`)
+sourceFile.addStatements('declare const _default: () => FowerPlugin')
+sourceFile.addStatements('export default _default')
+
+const typingModule = sourceFile.addModule({
+  name: `'@fower/atomic-props'`,
+})
+
+const entries = Object.entries(presetWeb?.theme?.spacings || {})
+
+const atoms = [
+  { alias: 'gap', properties: [] },
+  { alias: 'gapX', properties: [] },
+  { alias: 'gapY', properties: [] },
+]
+
+const props = atoms.reduce((result, { alias, properties }) => {
+  const items = entries.reduce((r, item, index) => {
+    const [gapKey, value] = item
+    const getItem = (isBase = false) => {
+      let examples = isBase
+        ? [
+          `<Box ${alias}-8></Box>`,
+          `<Box ${alias}-1rem></Box>`,
+          `<Box ${alias}-4px></Box>`,
+          `<Box ${alias}={8}></Box>`,
+          `<Box ${alias}={a + b}></Box>`,
+        ]
+        : [`<Box ${alias + gapKey}></Box>`]
+      return {
+        name: isBase ? `${alias}?` : alias + gapKey + '?',
+        type: isBase ? 'ResponsiveValue<string|number>' : 'ResponsiveBoolean',
+        docs: [
+          {
+            description: [
+              `set the gap between child elements to ${isBase ? 'some value' : value}`,
+            ].join('\n'),
+            tags: [
+              {
+                tagName: 'example',
+                text: ['\n', '```tsx', ...examples, '```'],
+              },
+              {
+                tagName: 'see',
+                text: [`https://developer.mozilla.org/en-US/docs/Web/CSS/position`],
+              },
+            ],
+          },
+        ],
+      }
+    }
+
+    if (index === 0) r.push(getItem(true))
+
+    r.push(getItem())
+    return r
+  }, [])
+  return result.concat(items)
+}, [])
+
+typingModule.addInterface({
+  name: 'AtomicProps',
+  isExported: true,
+  properties: props,
+})
+
+/** format types code */
+sourceFile.formatText({
+  indentSize: 2,
+  semicolons: SemicolonPreference.Remove,
+})
+
+/** save to file */
+sourceFile.save().then(function () {
+  console.log('typing file created...')
+})
diff --git a/packages/fower-plugin-gap/package.json b/packages/fower-plugin-gap/package.json
new file mode 100644
index 000000000..762a8888c
--- /dev/null
+++ b/packages/fower-plugin-gap/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "fower-plugin-gap",
+  "version": "1.78.0",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "typings": "types/index.d.ts",
+  "files": [
+    "dist",
+    "types"
+  ],
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "start": "tsdx watch --verbose",
+    "build:types": "node gen-types.js",
+    "build": "tsdx build",
+    "test": "tsdx test --passWithNoTests",
+    "test:watch": "tsdx test --watch",
+    "test:cov": "tsdx test --coverage --passWithNoTests",
+    "lint": "tsdx lint"
+  },
+  "author": "forsigner",
+  "module": "dist/fower-plugin-gap.esm.js",
+  "dependencies": {
+    "@fower/atomic-props": "workspace:*",
+    "@fower/core": "workspace:*",
+    "@fower/utils": "workspace:*"
+  }
+}
\ No newline at end of file
diff --git a/packages/fower-plugin-gap/src/index.test.ts b/packages/fower-plugin-gap/src/index.test.ts
new file mode 100644
index 000000000..f8008ad5f
--- /dev/null
+++ b/packages/fower-plugin-gap/src/index.test.ts
@@ -0,0 +1,45 @@
+import { Parser, Atom } from '@fower/core'
+import plugin from '.'
+
+const { isMatch, handleAtom } = plugin()
+const parser = {} as Parser
+
+test('isMatch', () => {
+  expect(isMatch!('gap')).toEqual(true)
+  expect(isMatch!('rowGap')).toEqual(true)
+  expect(isMatch!('columnGap')).toEqual(true)
+  expect(isMatch!('gridTemplateColumns')).toEqual(true)
+})
+
+test('rowGap={8}', () => {
+  const atom = handleAtom!(
+    new Atom({
+      propKey: 'rowGap',
+      propValue: 8,
+    }),
+    parser,
+  )
+  expect(atom.style.rowGap).toEqual(8)
+})
+
+test('columnGap={8}', () => {
+  const atom = handleAtom!(
+    new Atom({
+      propKey: 'columnGap',
+      propValue: 8,
+    }),
+    parser,
+  )
+  expect(atom.style.columnGap).toEqual(8)
+})
+
+test('gridTemplateColumns={4}', () => {
+  const atom = handleAtom!(
+    new Atom({
+      propKey: 'gridTemplateColumns',
+      propValue: 4,
+    }),
+    parser,
+  )
+  expect(atom.style.gridTemplateColumns).toEqual('repeat(4, minmax(0px, 1fr))')
+})
diff --git a/packages/fower-plugin-gap/src/index.ts b/packages/fower-plugin-gap/src/index.ts
new file mode 100644
index 000000000..081f94b40
--- /dev/null
+++ b/packages/fower-plugin-gap/src/index.ts
@@ -0,0 +1,36 @@
+import { FowerPlugin } from '@fower/core'
+
+const gapMap: Record<string, string> = {
+  gap: 'gap',
+  x: 'columnGap',
+  y: 'rowGap',
+}
+
+function isMatch(key: string) {
+  return /^gap[xy]?-?$|^gridTemplateColumns$/i.test(key)
+}
+
+function toStyle(key: string, value: any): any {
+  const style: any = {}
+
+  if (key.startsWith('gridTemplateColumns')) {
+    style.gridTemplateColumns = `repeat(${value}, minmax(0px, 1fr))`
+  }
+
+  if (/^gap[xy]?-?$/i.test(key)) {
+    const position = key.replace(/^gap/i, '') || 'gap'
+    style[gapMap[position.toLocaleLowerCase()]] = value
+  }
+
+  return style
+}
+
+export default (): FowerPlugin => {
+  return {
+    isMatch,
+    handleAtom(atom) {
+      atom.style = toStyle(atom.key, atom.value)
+      return atom
+    },
+  }
+}
diff --git a/packages/fower-plugin-gap/tsconfig.json b/packages/fower-plugin-gap/tsconfig.json
new file mode 100644
index 000000000..816d09263
--- /dev/null
+++ b/packages/fower-plugin-gap/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "include": ["src", "types"],
+  "compilerOptions": {
+    "module": "esnext",
+    "lib": ["dom", "esnext"],
+    "importHelpers": true,
+    "declaration": true,
+    "sourceMap": true,
+    "rootDir": "./src",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "jsx": "react",
+    "esModuleInterop": true
+  }
+}
diff --git a/packages/fower-plugin-gap/types/index.d.ts b/packages/fower-plugin-gap/types/index.d.ts
new file mode 100644
index 000000000..cbb53f909
--- /dev/null
+++ b/packages/fower-plugin-gap/types/index.d.ts
@@ -0,0 +1,858 @@
+import { FowerPlugin, ResponsiveValue, ResponsiveBoolean } from "@fower/core"
+import * as CSS from 'csstype'
+declare const _default: () => FowerPlugin
+export default _default
+
+declare module '@fower/atomic-props' {
+  export interface AtomicProps {
+    /**
+     * set the gap between child elements to some value
+     * @example
+     * ```tsx
+     * <Box gap-8></Box>
+     * <Box gap-1rem></Box>
+     * <Box gap-4px></Box>
+     * <Box gap={8}></Box>
+     * <Box gap={a + b}></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap?: ResponsiveValue<string | number>
+    /**
+     * set the gap between child elements to 0
+     * @example
+     * ```tsx
+     * <Box gap0></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap0?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 4
+     * @example
+     * ```tsx
+     * <Box gap1></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap1?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 8
+     * @example
+     * ```tsx
+     * <Box gap2></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap2?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 12
+     * @example
+     * ```tsx
+     * <Box gap3></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap3?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 16
+     * @example
+     * ```tsx
+     * <Box gap4></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap4?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 20
+     * @example
+     * ```tsx
+     * <Box gap5></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap5?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 24
+     * @example
+     * ```tsx
+     * <Box gap6></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap6?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 28
+     * @example
+     * ```tsx
+     * <Box gap7></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap7?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 32
+     * @example
+     * ```tsx
+     * <Box gap8></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap8?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 36
+     * @example
+     * ```tsx
+     * <Box gap9></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap9?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 40
+     * @example
+     * ```tsx
+     * <Box gap10></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap10?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 44
+     * @example
+     * ```tsx
+     * <Box gap11></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap11?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 48
+     * @example
+     * ```tsx
+     * <Box gap12></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap12?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 56
+     * @example
+     * ```tsx
+     * <Box gap14></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap14?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 64
+     * @example
+     * ```tsx
+     * <Box gap16></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap16?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 80
+     * @example
+     * ```tsx
+     * <Box gap20></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap20?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 96
+     * @example
+     * ```tsx
+     * <Box gap24></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap24?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 112
+     * @example
+     * ```tsx
+     * <Box gap28></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap28?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 128
+     * @example
+     * ```tsx
+     * <Box gap32></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap32?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 144
+     * @example
+     * ```tsx
+     * <Box gap36></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap36?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 160
+     * @example
+     * ```tsx
+     * <Box gap40></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap40?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 176
+     * @example
+     * ```tsx
+     * <Box gap44></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap44?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 192
+     * @example
+     * ```tsx
+     * <Box gap48></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap48?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 208
+     * @example
+     * ```tsx
+     * <Box gap52></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap52?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 224
+     * @example
+     * ```tsx
+     * <Box gap56></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap56?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 240
+     * @example
+     * ```tsx
+     * <Box gap60></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap60?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 256
+     * @example
+     * ```tsx
+     * <Box gap64></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap64?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 288
+     * @example
+     * ```tsx
+     * <Box gap72></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap72?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 320
+     * @example
+     * ```tsx
+     * <Box gap80></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap80?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 384
+     * @example
+     * ```tsx
+     * <Box gap96></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gap96?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to some value
+     * @example
+     * ```tsx
+     * <Box gapX-8></Box>
+     * <Box gapX-1rem></Box>
+     * <Box gapX-4px></Box>
+     * <Box gapX={8}></Box>
+     * <Box gapX={a + b}></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX?: ResponsiveValue<string | number>
+    /**
+     * set the gap between child elements to 0
+     * @example
+     * ```tsx
+     * <Box gapX0></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX0?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 4
+     * @example
+     * ```tsx
+     * <Box gapX1></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX1?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 8
+     * @example
+     * ```tsx
+     * <Box gapX2></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX2?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 12
+     * @example
+     * ```tsx
+     * <Box gapX3></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX3?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 16
+     * @example
+     * ```tsx
+     * <Box gapX4></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX4?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 20
+     * @example
+     * ```tsx
+     * <Box gapX5></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX5?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 24
+     * @example
+     * ```tsx
+     * <Box gapX6></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX6?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 28
+     * @example
+     * ```tsx
+     * <Box gapX7></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX7?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 32
+     * @example
+     * ```tsx
+     * <Box gapX8></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX8?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 36
+     * @example
+     * ```tsx
+     * <Box gapX9></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX9?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 40
+     * @example
+     * ```tsx
+     * <Box gapX10></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX10?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 44
+     * @example
+     * ```tsx
+     * <Box gapX11></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX11?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 48
+     * @example
+     * ```tsx
+     * <Box gapX12></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX12?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 56
+     * @example
+     * ```tsx
+     * <Box gapX14></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX14?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 64
+     * @example
+     * ```tsx
+     * <Box gapX16></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX16?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 80
+     * @example
+     * ```tsx
+     * <Box gapX20></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX20?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 96
+     * @example
+     * ```tsx
+     * <Box gapX24></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX24?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 112
+     * @example
+     * ```tsx
+     * <Box gapX28></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX28?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 128
+     * @example
+     * ```tsx
+     * <Box gapX32></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX32?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 144
+     * @example
+     * ```tsx
+     * <Box gapX36></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX36?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 160
+     * @example
+     * ```tsx
+     * <Box gapX40></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX40?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 176
+     * @example
+     * ```tsx
+     * <Box gapX44></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX44?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 192
+     * @example
+     * ```tsx
+     * <Box gapX48></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX48?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 208
+     * @example
+     * ```tsx
+     * <Box gapX52></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX52?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 224
+     * @example
+     * ```tsx
+     * <Box gapX56></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX56?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 240
+     * @example
+     * ```tsx
+     * <Box gapX60></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX60?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 256
+     * @example
+     * ```tsx
+     * <Box gapX64></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX64?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 288
+     * @example
+     * ```tsx
+     * <Box gapX72></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX72?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 320
+     * @example
+     * ```tsx
+     * <Box gapX80></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX80?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 384
+     * @example
+     * ```tsx
+     * <Box gapX96></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapX96?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to some value
+     * @example
+     * ```tsx
+     * <Box gapY-8></Box>
+     * <Box gapY-1rem></Box>
+     * <Box gapY-4px></Box>
+     * <Box gapY={8}></Box>
+     * <Box gapY={a + b}></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY?: ResponsiveValue<string | number>
+    /**
+     * set the gap between child elements to 0
+     * @example
+     * ```tsx
+     * <Box gapY0></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY0?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 4
+     * @example
+     * ```tsx
+     * <Box gapY1></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY1?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 8
+     * @example
+     * ```tsx
+     * <Box gapY2></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY2?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 12
+     * @example
+     * ```tsx
+     * <Box gapY3></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY3?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 16
+     * @example
+     * ```tsx
+     * <Box gapY4></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY4?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 20
+     * @example
+     * ```tsx
+     * <Box gapY5></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY5?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 24
+     * @example
+     * ```tsx
+     * <Box gapY6></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY6?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 28
+     * @example
+     * ```tsx
+     * <Box gapY7></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY7?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 32
+     * @example
+     * ```tsx
+     * <Box gapY8></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY8?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 36
+     * @example
+     * ```tsx
+     * <Box gapY9></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY9?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 40
+     * @example
+     * ```tsx
+     * <Box gapY10></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY10?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 44
+     * @example
+     * ```tsx
+     * <Box gapY11></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY11?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 48
+     * @example
+     * ```tsx
+     * <Box gapY12></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY12?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 56
+     * @example
+     * ```tsx
+     * <Box gapY14></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY14?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 64
+     * @example
+     * ```tsx
+     * <Box gapY16></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY16?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 80
+     * @example
+     * ```tsx
+     * <Box gapY20></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY20?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 96
+     * @example
+     * ```tsx
+     * <Box gapY24></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY24?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 112
+     * @example
+     * ```tsx
+     * <Box gapY28></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY28?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 128
+     * @example
+     * ```tsx
+     * <Box gapY32></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY32?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 144
+     * @example
+     * ```tsx
+     * <Box gapY36></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY36?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 160
+     * @example
+     * ```tsx
+     * <Box gapY40></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY40?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 176
+     * @example
+     * ```tsx
+     * <Box gapY44></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY44?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 192
+     * @example
+     * ```tsx
+     * <Box gapY48></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY48?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 208
+     * @example
+     * ```tsx
+     * <Box gapY52></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY52?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 224
+     * @example
+     * ```tsx
+     * <Box gapY56></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY56?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 240
+     * @example
+     * ```tsx
+     * <Box gapY60></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY60?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 256
+     * @example
+     * ```tsx
+     * <Box gapY64></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY64?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 288
+     * @example
+     * ```tsx
+     * <Box gapY72></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY72?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 320
+     * @example
+     * ```tsx
+     * <Box gapY80></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY80?: ResponsiveBoolean
+    /**
+     * set the gap between child elements to 384
+     * @example
+     * ```tsx
+     * <Box gapY96></Box>
+     * ```
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    gapY96?: ResponsiveBoolean
+  }
+}
diff --git a/packages/fower-plugin-grid/package.json b/packages/fower-plugin-grid/package.json
index b4cb270a4..80c8ae53d 100644
--- a/packages/fower-plugin-grid/package.json
+++ b/packages/fower-plugin-grid/package.json
@@ -26,4 +26,4 @@
     "@fower/core": "workspace:*",
     "@fower/utils": "workspace:*"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/fower-plugin-grid/src/index.ts b/packages/fower-plugin-grid/src/index.ts
index f631d6993..ac64194f9 100644
--- a/packages/fower-plugin-grid/src/index.ts
+++ b/packages/fower-plugin-grid/src/index.ts
@@ -1,8 +1,7 @@
 import { FowerPlugin } from '@fower/core'
-import { downFirst } from '@fower/utils'
 
 function isMatch(key: string) {
-  return /^(row|column)?Gap$|^gridTemplateColumns$/i.test(key)
+  return /^gridTemplateColumns$/i.test(key)
 }
 
 function toStyle(key: string, value: any): any {
@@ -12,10 +11,6 @@ function toStyle(key: string, value: any): any {
     style.gridTemplateColumns = `repeat(${value}, minmax(0px, 1fr))`
   }
 
-  if (/^(row|column)?Gap(-.+)?$/i.test(key)) {
-    style[downFirst(key)] = value
-  }
-
   return style
 }
 
diff --git a/packages/fower-plugin-grid/types/index.d.ts b/packages/fower-plugin-grid/types/index.d.ts
index 55047105c..b410de999 100644
--- a/packages/fower-plugin-grid/types/index.d.ts
+++ b/packages/fower-plugin-grid/types/index.d.ts
@@ -5,45 +5,6 @@ export default _default
 
 declare module '@fower/atomic-props' {
   export interface AtomicProps {
-    /**
-     * Set grid gap
-     *
-     * @example
-     * ```tsx
-     * <Box gap-10></Box>
-     * <Box gap-1rem></Box>
-     * <Box gap-10p></Box>
-     * <Box gap={10}></Box>
-     * ```
-     */
-    gap?: ResponsiveValue<number>
-
-    /**
-     * Set grid column gap
-     *
-     * @example
-     * ```tsx
-     * <Box columnGap-10></Box>
-     * <Box columnGap-1rem></Box>
-     * <Box columnGap-10p></Box>
-     * <Box columnGap={10}></Box>
-     * ```
-     */
-    columnGap?: ResponsiveValue<number>
-
-    /**
-     * Set grid row gap
-     *
-     * @example
-     * ```tsx
-     * <Box rowGap-10></Box>
-     * <Box rowGap-1rem></Box>
-     * <Box rowGap-10p></Box>
-     * <Box rowGap={10}></Box>
-     * ```
-     */
-    rowGap?: ResponsiveValue<number>
-
     /**
      * Set gridTemplateColumns
      *
diff --git a/packages/preset-react-native/package.json b/packages/preset-react-native/package.json
index ff307ab61..d19b7c788 100644
--- a/packages/preset-react-native/package.json
+++ b/packages/preset-react-native/package.json
@@ -35,6 +35,7 @@
     "fower-plugin-font-family": "workspace:*",
     "fower-plugin-font-style": "workspace:*",
     "fower-plugin-font-weight": "workspace:*",
+    "fower-plugin-gap": "workspace:*",
     "fower-plugin-grid": "workspace:*",
     "fower-plugin-layout": "workspace:*",
     "fower-plugin-line-height": "workspace:*",
@@ -52,4 +53,4 @@
     "fower-plugin-text-transform": "workspace:*",
     "fower-plugin-z-index": "workspace:*"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/preset-react-native/src/plugins.ts b/packages/preset-react-native/src/plugins.ts
index ac10ae9cf..9f0952aa7 100644
--- a/packages/preset-react-native/src/plugins.ts
+++ b/packages/preset-react-native/src/plugins.ts
@@ -3,6 +3,7 @@ import border from 'fower-plugin-border'
 import flexItem from 'fower-plugin-box-alignment'
 import color from 'fower-plugin-color'
 import display from 'fower-plugin-display'
+import gap from 'fower-plugin-gap'
 import grid from 'fower-plugin-grid'
 import flexBox from 'fower-plugin-flexbox'
 import layout from 'fower-plugin-layout'
@@ -28,6 +29,7 @@ export const plugins = [
   color(),
   display(),
   flexBox(),
+  gap(),
   grid(),
   flexItem(),
   layout(),
diff --git a/packages/preset-remax/package.json b/packages/preset-remax/package.json
index 037ecd13a..976412240 100644
--- a/packages/preset-remax/package.json
+++ b/packages/preset-remax/package.json
@@ -37,6 +37,7 @@
     "fower-plugin-font-style": "workspace:*",
     "fower-plugin-font-weight": "workspace:*",
     "fower-plugin-gradient": "workspace:*",
+    "fower-plugin-gap": "workspace:*",
     "fower-plugin-grid": "workspace:*",
     "fower-plugin-layout": "workspace:*",
     "fower-plugin-line-height": "workspace:*",
@@ -56,4 +57,4 @@
     "fower-plugin-visibility": "workspace:*",
     "fower-plugin-z-index": "workspace:*"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/preset-remax/types/index.d.ts b/packages/preset-remax/types/index.d.ts
index 564e8180f..78077e55f 100644
--- a/packages/preset-remax/types/index.d.ts
+++ b/packages/preset-remax/types/index.d.ts
@@ -4,6 +4,7 @@
 /// <reference types="fower-plugin-color" />
 /// <reference types="fower-plugin-display" />
 /// <reference types="fower-plugin-flexbox" />
+/// <reference types="fower-plugin-gap" />
 /// <reference types="fower-plugin-grid" />
 /// <reference types="fower-plugin-layout" />
 /// <reference types="fower-plugin-line-height" />
diff --git a/packages/preset-taro/package.json b/packages/preset-taro/package.json
index 4c7080f36..1fc9358f7 100644
--- a/packages/preset-taro/package.json
+++ b/packages/preset-taro/package.json
@@ -37,6 +37,7 @@
     "fower-plugin-font-style": "workspace:*",
     "fower-plugin-font-weight": "workspace:*",
     "fower-plugin-gradient": "workspace:*",
+    "fower-plugin-gap": "workspace:*",
     "fower-plugin-grid": "workspace:*",
     "fower-plugin-layout": "workspace:*",
     "fower-plugin-line-height": "workspace:*",
@@ -57,4 +58,4 @@
     "fower-plugin-visibility": "workspace:*",
     "fower-plugin-z-index": "workspace:*"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/preset-taro/src/plugins.ts b/packages/preset-taro/src/plugins.ts
index aeeaecaf4..3777a9c27 100644
--- a/packages/preset-taro/src/plugins.ts
+++ b/packages/preset-taro/src/plugins.ts
@@ -5,6 +5,7 @@ import flexItem from 'fower-plugin-box-alignment'
 import color from 'fower-plugin-color'
 import display from 'fower-plugin-display'
 import flexBox from 'fower-plugin-flexbox'
+import gap from 'fower-plugin-gap'
 import grid from 'fower-plugin-grid'
 import layout from 'fower-plugin-layout'
 import lineHeight from 'fower-plugin-line-height'
@@ -36,6 +37,7 @@ export const plugins = [
   color(),
   display(),
   flexBox(),
+  gap(),
   grid(),
   flexItem(),
   layout(),
diff --git a/packages/preset-taro/types/index.d.ts b/packages/preset-taro/types/index.d.ts
index fbcbed205..3fe9c9087 100644
--- a/packages/preset-taro/types/index.d.ts
+++ b/packages/preset-taro/types/index.d.ts
@@ -4,6 +4,7 @@
 /// <reference types="fower-plugin-color" />
 /// <reference types="fower-plugin-display" />
 /// <reference types="fower-plugin-flexbox" />
+/// <reference types="fower-plugin-gap" />
 /// <reference types="fower-plugin-grid" />
 /// <reference types="fower-plugin-layout" />
 /// <reference types="fower-plugin-line-height" />
diff --git a/packages/preset-uniapp/package.json b/packages/preset-uniapp/package.json
index f59f271c9..65e8d311b 100644
--- a/packages/preset-uniapp/package.json
+++ b/packages/preset-uniapp/package.json
@@ -37,6 +37,7 @@
     "fower-plugin-font-style": "workspace:*",
     "fower-plugin-font-weight": "workspace:*",
     "fower-plugin-gradient": "workspace:*",
+    "fower-plugin-gap": "workspace:*",
     "fower-plugin-grid": "workspace:*",
     "fower-plugin-layout": "workspace:*",
     "fower-plugin-line-height": "workspace:*",
@@ -58,4 +59,4 @@
     "fower-plugin-visibility": "workspace:*",
     "fower-plugin-z-index": "workspace:*"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/preset-uniapp/src/plugins.ts b/packages/preset-uniapp/src/plugins.ts
index e7f58734a..c110f7e11 100644
--- a/packages/preset-uniapp/src/plugins.ts
+++ b/packages/preset-uniapp/src/plugins.ts
@@ -4,6 +4,7 @@ import flexItem from 'fower-plugin-box-alignment'
 import color from 'fower-plugin-color'
 import display from 'fower-plugin-display'
 import flexBox from 'fower-plugin-flexbox'
+import gap from 'fower-plugin-gap'
 import grid from 'fower-plugin-grid'
 import layout from 'fower-plugin-layout'
 import lineHeight from 'fower-plugin-line-height'
@@ -36,6 +37,7 @@ export const plugins = [
   color(),
   display(),
   flexBox(),
+  gap(),
   grid(),
   flexItem(),
   layout(),
diff --git a/packages/preset-uniapp/types/index.d.ts b/packages/preset-uniapp/types/index.d.ts
index 73fd1c039..1f3cb4daa 100644
--- a/packages/preset-uniapp/types/index.d.ts
+++ b/packages/preset-uniapp/types/index.d.ts
@@ -4,6 +4,7 @@
 /// <reference types="fower-plugin-color" />
 /// <reference types="fower-plugin-display" />
 /// <reference types="fower-plugin-flexbox" />
+/// <reference types="fower-plugin-gap" />
 /// <reference types="fower-plugin-grid" />
 /// <reference types="fower-plugin-layout" />
 /// <reference types="fower-plugin-line-height" />
diff --git a/packages/preset-web-rem/package.json b/packages/preset-web-rem/package.json
index 3d4662c7f..e100a54c9 100644
--- a/packages/preset-web-rem/package.json
+++ b/packages/preset-web-rem/package.json
@@ -40,6 +40,7 @@
     "fower-plugin-font-style": "workspace:*",
     "fower-plugin-font-weight": "workspace:*",
     "fower-plugin-gradient": "workspace:*",
+    "fower-plugin-gap": "workspace:*",
     "fower-plugin-grid": "workspace:*",
     "fower-plugin-layout": "workspace:*",
     "fower-plugin-line-height": "workspace:*",
@@ -69,4 +70,4 @@
     "fower-plugin-word-break": "workspace:*",
     "fower-plugin-z-index": "workspace:*"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/preset-web-rem/src/plugins.ts b/packages/preset-web-rem/src/plugins.ts
index 629ba61ad..ff6d75490 100644
--- a/packages/preset-web-rem/src/plugins.ts
+++ b/packages/preset-web-rem/src/plugins.ts
@@ -5,6 +5,7 @@ import flexItem from 'fower-plugin-box-alignment'
 import color from 'fower-plugin-color'
 import display from 'fower-plugin-display'
 import flexBox from 'fower-plugin-flexbox'
+import gap from 'fower-plugin-gap'
 import grid from 'fower-plugin-grid'
 import layout from 'fower-plugin-layout'
 import lineHeight from 'fower-plugin-line-height'
@@ -52,6 +53,7 @@ export const plugins = [
   color(),
   display(),
   flexBox(),
+  gap(),
   grid(),
   flexItem(),
   layout(),
diff --git a/packages/preset-web-rem/types/index.d.ts b/packages/preset-web-rem/types/index.d.ts
index 01231dbf0..58047794e 100644
--- a/packages/preset-web-rem/types/index.d.ts
+++ b/packages/preset-web-rem/types/index.d.ts
@@ -9,6 +9,7 @@
 /// <reference types="fower-plugin-container" />
 /// <reference types="fower-plugin-display" />
 /// <reference types="fower-plugin-flexbox" />
+/// <reference types="fower-plugin-gap" />
 /// <reference types="fower-plugin-grid" />
 /// <reference types="fower-plugin-gradient" />
 /// <reference types="fower-plugin-layout" />
diff --git a/packages/preset-web/package.json b/packages/preset-web/package.json
index 4c64970f6..a39691209 100644
--- a/packages/preset-web/package.json
+++ b/packages/preset-web/package.json
@@ -41,6 +41,7 @@
     "fower-plugin-font-style": "workspace:*",
     "fower-plugin-font-weight": "workspace:*",
     "fower-plugin-gradient": "workspace:*",
+    "fower-plugin-gap": "workspace:*",
     "fower-plugin-grid": "workspace:*",
     "fower-plugin-layout": "workspace:*",
     "fower-plugin-line-height": "workspace:*",
@@ -70,4 +71,4 @@
     "fower-plugin-word-break": "workspace:*",
     "fower-plugin-z-index": "workspace:*"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/preset-web/src/plugins.ts b/packages/preset-web/src/plugins.ts
index 629ba61ad..ff6d75490 100644
--- a/packages/preset-web/src/plugins.ts
+++ b/packages/preset-web/src/plugins.ts
@@ -5,6 +5,7 @@ import flexItem from 'fower-plugin-box-alignment'
 import color from 'fower-plugin-color'
 import display from 'fower-plugin-display'
 import flexBox from 'fower-plugin-flexbox'
+import gap from 'fower-plugin-gap'
 import grid from 'fower-plugin-grid'
 import layout from 'fower-plugin-layout'
 import lineHeight from 'fower-plugin-line-height'
@@ -52,6 +53,7 @@ export const plugins = [
   color(),
   display(),
   flexBox(),
+  gap(),
   grid(),
   flexItem(),
   layout(),
diff --git a/packages/preset-web/types/index.d.ts b/packages/preset-web/types/index.d.ts
index 3f89b49ff..57d0fc3b1 100644
--- a/packages/preset-web/types/index.d.ts
+++ b/packages/preset-web/types/index.d.ts
@@ -9,6 +9,7 @@
 /// <reference types="fower-plugin-display" />
 /// <reference types="fower-plugin-flexbox" />
 /// <reference types="fower-plugin-gradient" />
+/// <reference types="fower-plugin-gap" />
 /// <reference types="fower-plugin-grid" />
 /// <reference types="fower-plugin-layout" />
 /// <reference types="fower-plugin-line-height" />
diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx
index cc28e2029..ff7af1081 100644
--- a/packages/react/src/index.tsx
+++ b/packages/react/src/index.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import { setConfig, styleSheet, store } from '@fower/core'
 import presetWeb from '@fower/preset-web'
-import '@fower/atomic-props'
 
 setConfig(presetWeb)
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 44ab07463..2f33b12ef 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ importers:
       coveralls:
         specifier: ^3.1.0
         version: 3.1.0
+      csstype:
+        specifier: ^3.1.2
+        version: 3.1.2
       eslint-config-tie-app:
         specifier: 0.0.5
         version: 0.0.5(typescript@4.9.4)
@@ -637,6 +640,18 @@ importers:
         specifier: workspace:*
         version: link:../utils
 
+  packages/fower-plugin-gap:
+    dependencies:
+      '@fower/atomic-props':
+        specifier: workspace:*
+        version: link:../atomic-props
+      '@fower/core':
+        specifier: workspace:*
+        version: link:../core
+      '@fower/utils':
+        specifier: workspace:*
+        version: link:../utils
+
   packages/fower-plugin-gradient:
     dependencies:
       '@fower/atomic-props':
@@ -1050,6 +1065,9 @@ importers:
       fower-plugin-font-weight:
         specifier: workspace:*
         version: link:../fower-plugin-font-weight
+      fower-plugin-gap:
+        specifier: workspace:*
+        version: link:../fower-plugin-gap
       fower-plugin-grid:
         specifier: workspace:*
         version: link:../fower-plugin-grid
@@ -1143,6 +1161,9 @@ importers:
       fower-plugin-font-weight:
         specifier: workspace:*
         version: link:../fower-plugin-font-weight
+      fower-plugin-gap:
+        specifier: workspace:*
+        version: link:../fower-plugin-gap
       fower-plugin-gradient:
         specifier: workspace:*
         version: link:../fower-plugin-gradient
@@ -1245,6 +1266,9 @@ importers:
       fower-plugin-font-weight:
         specifier: workspace:*
         version: link:../fower-plugin-font-weight
+      fower-plugin-gap:
+        specifier: workspace:*
+        version: link:../fower-plugin-gap
       fower-plugin-gradient:
         specifier: workspace:*
         version: link:../fower-plugin-gradient
@@ -1350,6 +1374,9 @@ importers:
       fower-plugin-font-weight:
         specifier: workspace:*
         version: link:../fower-plugin-font-weight
+      fower-plugin-gap:
+        specifier: workspace:*
+        version: link:../fower-plugin-gap
       fower-plugin-gradient:
         specifier: workspace:*
         version: link:../fower-plugin-gradient
@@ -1470,6 +1497,9 @@ importers:
       fower-plugin-font-weight:
         specifier: workspace:*
         version: link:../fower-plugin-font-weight
+      fower-plugin-gap:
+        specifier: workspace:*
+        version: link:../fower-plugin-gap
       fower-plugin-gradient:
         specifier: workspace:*
         version: link:../fower-plugin-gradient
@@ -1611,6 +1641,9 @@ importers:
       fower-plugin-font-weight:
         specifier: workspace:*
         version: link:../fower-plugin-font-weight
+      fower-plugin-gap:
+        specifier: workspace:*
+        version: link:../fower-plugin-gap
       fower-plugin-gradient:
         specifier: workspace:*
         version: link:../fower-plugin-gradient
@@ -1846,6 +1879,9 @@ importers:
       react-helmet:
         specifier: ^6.1.0
         version: 6.1.0(react@16.14.0)
+      react-live:
+        specifier: ^4.1.2
+        version: 4.1.2(react-dom@16.14.0)(react@16.14.0)
       simplebar-react:
         specifier: ^2.3.4
         version: 2.3.4(react-dom@16.14.0)(react@16.14.0)
@@ -30289,6 +30325,20 @@ packages:
       unescape: 1.0.1
     dev: false
 
+  /react-live@4.1.2(react-dom@16.14.0)(react@16.14.0):
+    resolution: {integrity: sha512-YPMD7oBOgLdlkbMunObcs5orQzDXOLuCKRpiSBYkuZsoB806FF8bWzdp6CJ5pO+mnc+upxut2dQYw0vZ6wn7og==}
+    engines: {node: '>= 0.12.0', npm: '>= 2.0.0'}
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+    dependencies:
+      prism-react-renderer: 1.2.1(react@16.14.0)
+      react: 16.14.0
+      react-dom: 16.14.0(react@16.14.0)
+      sucrase: 3.32.0
+      use-editable: 2.3.3(react@16.14.0)
+    dev: false
+
   /react-loadable-ssr-addon-v5-slorber@1.0.1(react-loadable@5.5.0)(webpack@5.85.0):
     resolution: {integrity: sha512-lq3Lyw1lGku8zUEJPDxsNm1AfYHBrO9Y1+olAYwpUJ2IGFBskM0DMKok97A6LWUpHm+o7IvQBOWu9MLenp9Z+A==}
     engines: {node: '>=10.13.0'}
@@ -34928,6 +34978,14 @@ packages:
       react: 16.14.0
     dev: false
 
+  /use-editable@2.3.3(react@16.14.0):
+    resolution: {integrity: sha512-7wVD2JbfAFJ3DK0vITvXBdpd9JAz5BcKAAolsnLBuBn6UDDwBGuCIAGvR3yA2BNKm578vAMVHFCWaOcA+BhhiA==}
+    peerDependencies:
+      react: '>= 16.8.0'
+    dependencies:
+      react: 16.14.0
+    dev: false
+
   /use-isomorphic-layout-effect@1.1.2(@types/react@17.0.11)(react@16.14.0):
     resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==}
     peerDependencies:
diff --git a/website/package.json b/website/package.json
index b9971c381..dbe1179b2 100644
--- a/website/package.json
+++ b/website/package.json
@@ -31,6 +31,7 @@
     "npm-to-yarn": "^1.0.1",
     "prism-react-renderer": "^1.2.1",
     "react-helmet": "^6.1.0",
+    "react-live": "^4.1.2",
     "simplebar-react": "^2.3.4",
     "url-loader": "^4.1.1"
   },
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 00277c0bd..44a37c237 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -6,12 +6,11 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import useBaseUrl from '@docusaurus/useBaseUrl'
 import styles from './styles.module.css'
 import Translate from '@docusaurus/Translate'
-import { Box } from '@fower/react'
+import { Box, css } from '@fower/react'
 import theme from 'prism-react-renderer/themes/duotoneDark'
 
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
 import { HomeDemo } from '../components/HomeDemo'
-import { css } from '@fower/core'
 
 const features = [
   {