From a0d8e630aa821e394de1d24ae8b4a18c1aac9455 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=EC=9A=B0=EB=B3=91?= Date: Sat, 2 Dec 2023 17:16:31 +0900 Subject: [PATCH] =?UTF-8?q?release=20=EC=B5=9C=EC=8B=A0=ED=99=94=20(workfl?= =?UTF-8?q?ow=20=ED=85=8C=EC=8A=A4=ED=8A=B8)=20(#24)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * :truck: panda.config.ts 수정 및 절대경로 설정 * :truck: styled-system/ src 파일안으로 변경 및 gitignore 제거 * :truck: 기본 디렉토리 파일 생성 * chore: vscode 설정 추가 * chore: sytled-system 폴더 eslint 에서 무시 * feat: layout header view 구현 * feat: timer 페이지 step에 따른 title, desc 추가 * feat: timer view 구현 중. * :bricks: Git workflow 추가 추가했지롱 * :bug: Pr 실패 수정용 추가했지롱 * ✨그라데이션 텍스트 만들기 (타이머 안 텍스트) 애니매이션도 있음!! * :zap: Nvmrc 추가 추가했는데 * ✨step status 추가 * ♻️ timer layout 수정 * 💄 일시정지 상태이면 gray로 변경 * ✨ 타이머 추가 * 🐛 0초 까지만 카운트 * ♻️ step to timer status 네이밍 수정 * ♻️merge confilct solve * feat: maxWitdth 475px로 변경 --------- Co-authored-by: Dongmin Ahn Co-authored-by: Dongmin Ahn <68339352+wade3420@users.noreply.github.com> Co-authored-by: sumi-0011 --- .eslintrc.js | 2 +- .github/workflows/archive-stable-version.yml | 39 + .github/workflows/check-if-mergeable.yml | 47 + .gitignore | 1 - .nvmrc | 1 + .vscode/extensions.json | 7 + .vscode/settings.json | 15 + .yarn/sdks/eslint/bin/eslint.js | 20 + .yarn/sdks/eslint/lib/api.js | 20 + .yarn/sdks/eslint/lib/unsupported-api.js | 20 + .yarn/sdks/eslint/package.json | 14 + .yarn/sdks/integrations.yml | 5 + .yarn/sdks/prettier/bin/prettier.cjs | 20 + .yarn/sdks/prettier/index.cjs | 20 + .yarn/sdks/prettier/package.json | 7 + .yarn/sdks/typescript/bin/tsc | 20 + .yarn/sdks/typescript/bin/tsserver | 20 + .yarn/sdks/typescript/lib/tsc.js | 20 + .yarn/sdks/typescript/lib/tsserver.js | 252 + .yarn/sdks/typescript/lib/tsserverlibrary.js | 252 + .yarn/sdks/typescript/lib/typescript.js | 20 + .yarn/sdks/typescript/package.json | 10 + package.json | 3 +- panda.config.ts | 12 +- public/assets/icons/left-arrow-icon.svg | 5 + src/apis/index.ts | 3 + src/app/layout.tsx | 14 +- src/app/page.tsx | 2 +- src/app/timer/TimerView.tsx | 47 + src/app/timer/layout.tsx | 10 + src/app/timer/page.tsx | 100 + src/app/timer/useTimer.ts | 34 + src/app/timer/useTimerStatus.ts | 32 + src/components/Layout/Header.tsx | 44 + src/hooks/lifeCycle/index.ts | 2 + src/{ => hooks}/query/QueryProvider.tsx | 0 src/{ => hooks}/query/getQueryKey.ts | 0 src/{ => hooks}/query/index.ts | 0 src/services/index.spec.ts | 6 + src/services/index.ts | 3 + src/styled-system/css/conditions.mjs | 34 + src/styled-system/css/css.d.ts | 9 + src/styled-system/css/css.mjs | 44 + src/styled-system/css/cva.d.ts | 6 + src/styled-system/css/cva.mjs | 85 + src/styled-system/css/cx.d.ts | 5 + src/styled-system/css/cx.mjs | 15 + src/styled-system/css/index.d.ts | 5 + src/styled-system/css/index.mjs | 4 + src/styled-system/css/sva.d.ts | 4 + src/styled-system/css/sva.mjs | 35 + src/styled-system/global.css | 36 + src/styled-system/helpers.mjs | 300 + src/styled-system/jsx/aspect-ratio.d.ts | 10 + src/styled-system/jsx/aspect-ratio.mjs | 9 + src/styled-system/jsx/bleed.d.ts | 10 + src/styled-system/jsx/bleed.mjs | 9 + src/styled-system/jsx/box.d.ts | 10 + src/styled-system/jsx/box.mjs | 8 + src/styled-system/jsx/center.d.ts | 10 + src/styled-system/jsx/center.mjs | 9 + src/styled-system/jsx/circle.d.ts | 10 + src/styled-system/jsx/circle.mjs | 9 + src/styled-system/jsx/container.d.ts | 10 + src/styled-system/jsx/container.mjs | 8 + src/styled-system/jsx/divider.d.ts | 10 + src/styled-system/jsx/divider.mjs | 9 + src/styled-system/jsx/factory-helper.mjs | 22 + src/styled-system/jsx/factory.d.ts | 3 + src/styled-system/jsx/factory.mjs | 80 + src/styled-system/jsx/flex.d.ts | 10 + src/styled-system/jsx/flex.mjs | 9 + src/styled-system/jsx/float.d.ts | 10 + src/styled-system/jsx/float.mjs | 9 + src/styled-system/jsx/grid-item.d.ts | 10 + src/styled-system/jsx/grid-item.mjs | 9 + src/styled-system/jsx/grid.d.ts | 10 + src/styled-system/jsx/grid.mjs | 9 + src/styled-system/jsx/hstack.d.ts | 10 + src/styled-system/jsx/hstack.mjs | 9 + src/styled-system/jsx/index.d.ts | 27 + src/styled-system/jsx/index.mjs | 22 + src/styled-system/jsx/is-valid-prop.d.ts | 5 + src/styled-system/jsx/is-valid-prop.mjs | 17 + src/styled-system/jsx/link-box.d.ts | 10 + src/styled-system/jsx/link-box.mjs | 8 + src/styled-system/jsx/link-overlay.d.ts | 10 + src/styled-system/jsx/link-overlay.mjs | 8 + src/styled-system/jsx/spacer.d.ts | 10 + src/styled-system/jsx/spacer.mjs | 9 + src/styled-system/jsx/square.d.ts | 10 + src/styled-system/jsx/square.mjs | 9 + src/styled-system/jsx/stack.d.ts | 10 + src/styled-system/jsx/stack.mjs | 9 + src/styled-system/jsx/visually-hidden.d.ts | 10 + src/styled-system/jsx/visually-hidden.mjs | 8 + src/styled-system/jsx/vstack.d.ts | 10 + src/styled-system/jsx/vstack.mjs | 9 + src/styled-system/jsx/wrap.d.ts | 10 + src/styled-system/jsx/wrap.mjs | 9 + src/styled-system/patterns/aspect-ratio.d.ts | 21 + src/styled-system/patterns/aspect-ratio.mjs | 35 + src/styled-system/patterns/bleed.d.ts | 22 + src/styled-system/patterns/bleed.mjs | 19 + src/styled-system/patterns/box.d.ts | 21 + src/styled-system/patterns/box.mjs | 12 + src/styled-system/patterns/center.d.ts | 21 + src/styled-system/patterns/center.mjs | 18 + src/styled-system/patterns/circle.d.ts | 21 + src/styled-system/patterns/circle.mjs | 22 + src/styled-system/patterns/container.d.ts | 21 + src/styled-system/patterns/container.mjs | 18 + src/styled-system/patterns/divider.d.ts | 23 + src/styled-system/patterns/divider.mjs | 21 + src/styled-system/patterns/flex.d.ts | 27 + src/styled-system/patterns/flex.mjs | 23 + src/styled-system/patterns/float.d.ts | 24 + src/styled-system/patterns/float.mjs | 45 + src/styled-system/patterns/grid-item.d.ts | 26 + src/styled-system/patterns/grid-item.mjs | 22 + src/styled-system/patterns/grid.d.ts | 25 + src/styled-system/patterns/grid.mjs | 22 + src/styled-system/patterns/hstack.d.ts | 22 + src/styled-system/patterns/hstack.mjs | 20 + src/styled-system/patterns/index.d.ts | 21 + src/styled-system/patterns/index.mjs | 20 + src/styled-system/patterns/link-box.d.ts | 21 + src/styled-system/patterns/link-box.mjs | 19 + src/styled-system/patterns/link-overlay.d.ts | 21 + src/styled-system/patterns/link-overlay.mjs | 24 + src/styled-system/patterns/spacer.d.ts | 21 + src/styled-system/patterns/spacer.mjs | 18 + src/styled-system/patterns/square.d.ts | 21 + src/styled-system/patterns/square.mjs | 21 + src/styled-system/patterns/stack.d.ts | 24 + src/styled-system/patterns/stack.mjs | 20 + .../patterns/visually-hidden.d.ts | 21 + .../patterns/visually-hidden.mjs | 15 + src/styled-system/patterns/vstack.d.ts | 22 + src/styled-system/patterns/vstack.mjs | 20 + src/styled-system/patterns/wrap.d.ts | 25 + src/styled-system/patterns/wrap.mjs | 22 + src/styled-system/reset.css | 214 + src/styled-system/tokens/index.css | 423 + src/styled-system/tokens/index.d.ts | 9 + src/styled-system/tokens/index.mjs | 1864 ++ src/styled-system/tokens/keyframes.css | 44 + src/styled-system/tokens/tokens.d.ts | 60 + src/styled-system/types/composition.d.ts | 111 + src/styled-system/types/conditions.d.ts | 252 + src/styled-system/types/csstype.d.ts | 20749 ++++++++++++++++ src/styled-system/types/global.d.ts | 19 + src/styled-system/types/index.d.ts | 8 + src/styled-system/types/jsx.d.ts | 52 + src/styled-system/types/parts.d.ts | 8 + src/styled-system/types/pattern.d.ts | 63 + src/styled-system/types/prop-type.d.ts | 309 + src/styled-system/types/recipe.d.ts | 146 + src/styled-system/types/selectors.d.ts | 59 + src/styled-system/types/style-props.d.ts | 653 + src/styled-system/types/system-types.d.ts | 91 + src/utils/index.ts | 1 + tsconfig.json | 3 +- 163 files changed, 28338 insertions(+), 9 deletions(-) create mode 100644 .github/workflows/archive-stable-version.yml create mode 100644 .github/workflows/check-if-mergeable.yml create mode 100644 .nvmrc create mode 100644 .vscode/extensions.json create mode 100644 .vscode/settings.json create mode 100755 .yarn/sdks/eslint/bin/eslint.js create mode 100644 .yarn/sdks/eslint/lib/api.js create mode 100644 .yarn/sdks/eslint/lib/unsupported-api.js create mode 100644 .yarn/sdks/eslint/package.json create mode 100644 .yarn/sdks/integrations.yml create mode 100755 .yarn/sdks/prettier/bin/prettier.cjs create mode 100644 .yarn/sdks/prettier/index.cjs create mode 100644 .yarn/sdks/prettier/package.json create mode 100755 .yarn/sdks/typescript/bin/tsc create mode 100755 .yarn/sdks/typescript/bin/tsserver create mode 100644 .yarn/sdks/typescript/lib/tsc.js create mode 100644 .yarn/sdks/typescript/lib/tsserver.js create mode 100644 .yarn/sdks/typescript/lib/tsserverlibrary.js create mode 100644 .yarn/sdks/typescript/lib/typescript.js create mode 100644 .yarn/sdks/typescript/package.json create mode 100644 public/assets/icons/left-arrow-icon.svg create mode 100644 src/apis/index.ts create mode 100644 src/app/timer/TimerView.tsx create mode 100644 src/app/timer/layout.tsx create mode 100644 src/app/timer/page.tsx create mode 100644 src/app/timer/useTimer.ts create mode 100644 src/app/timer/useTimerStatus.ts create mode 100644 src/components/Layout/Header.tsx create mode 100644 src/hooks/lifeCycle/index.ts rename src/{ => hooks}/query/QueryProvider.tsx (100%) rename src/{ => hooks}/query/getQueryKey.ts (100%) rename src/{ => hooks}/query/index.ts (100%) create mode 100644 src/services/index.spec.ts create mode 100644 src/services/index.ts create mode 100644 src/styled-system/css/conditions.mjs create mode 100644 src/styled-system/css/css.d.ts create mode 100644 src/styled-system/css/css.mjs create mode 100644 src/styled-system/css/cva.d.ts create mode 100644 src/styled-system/css/cva.mjs create mode 100644 src/styled-system/css/cx.d.ts create mode 100644 src/styled-system/css/cx.mjs create mode 100644 src/styled-system/css/index.d.ts create mode 100644 src/styled-system/css/index.mjs create mode 100644 src/styled-system/css/sva.d.ts create mode 100644 src/styled-system/css/sva.mjs create mode 100644 src/styled-system/global.css create mode 100644 src/styled-system/helpers.mjs create mode 100644 src/styled-system/jsx/aspect-ratio.d.ts create mode 100644 src/styled-system/jsx/aspect-ratio.mjs create mode 100644 src/styled-system/jsx/bleed.d.ts create mode 100644 src/styled-system/jsx/bleed.mjs create mode 100644 src/styled-system/jsx/box.d.ts create mode 100644 src/styled-system/jsx/box.mjs create mode 100644 src/styled-system/jsx/center.d.ts create mode 100644 src/styled-system/jsx/center.mjs create mode 100644 src/styled-system/jsx/circle.d.ts create mode 100644 src/styled-system/jsx/circle.mjs create mode 100644 src/styled-system/jsx/container.d.ts create mode 100644 src/styled-system/jsx/container.mjs create mode 100644 src/styled-system/jsx/divider.d.ts create mode 100644 src/styled-system/jsx/divider.mjs create mode 100644 src/styled-system/jsx/factory-helper.mjs create mode 100644 src/styled-system/jsx/factory.d.ts create mode 100644 src/styled-system/jsx/factory.mjs create mode 100644 src/styled-system/jsx/flex.d.ts create mode 100644 src/styled-system/jsx/flex.mjs create mode 100644 src/styled-system/jsx/float.d.ts create mode 100644 src/styled-system/jsx/float.mjs create mode 100644 src/styled-system/jsx/grid-item.d.ts create mode 100644 src/styled-system/jsx/grid-item.mjs create mode 100644 src/styled-system/jsx/grid.d.ts create mode 100644 src/styled-system/jsx/grid.mjs create mode 100644 src/styled-system/jsx/hstack.d.ts create mode 100644 src/styled-system/jsx/hstack.mjs create mode 100644 src/styled-system/jsx/index.d.ts create mode 100644 src/styled-system/jsx/index.mjs create mode 100644 src/styled-system/jsx/is-valid-prop.d.ts create mode 100644 src/styled-system/jsx/is-valid-prop.mjs create mode 100644 src/styled-system/jsx/link-box.d.ts create mode 100644 src/styled-system/jsx/link-box.mjs create mode 100644 src/styled-system/jsx/link-overlay.d.ts create mode 100644 src/styled-system/jsx/link-overlay.mjs create mode 100644 src/styled-system/jsx/spacer.d.ts create mode 100644 src/styled-system/jsx/spacer.mjs create mode 100644 src/styled-system/jsx/square.d.ts create mode 100644 src/styled-system/jsx/square.mjs create mode 100644 src/styled-system/jsx/stack.d.ts create mode 100644 src/styled-system/jsx/stack.mjs create mode 100644 src/styled-system/jsx/visually-hidden.d.ts create mode 100644 src/styled-system/jsx/visually-hidden.mjs create mode 100644 src/styled-system/jsx/vstack.d.ts create mode 100644 src/styled-system/jsx/vstack.mjs create mode 100644 src/styled-system/jsx/wrap.d.ts create mode 100644 src/styled-system/jsx/wrap.mjs create mode 100644 src/styled-system/patterns/aspect-ratio.d.ts create mode 100644 src/styled-system/patterns/aspect-ratio.mjs create mode 100644 src/styled-system/patterns/bleed.d.ts create mode 100644 src/styled-system/patterns/bleed.mjs create mode 100644 src/styled-system/patterns/box.d.ts create mode 100644 src/styled-system/patterns/box.mjs create mode 100644 src/styled-system/patterns/center.d.ts create mode 100644 src/styled-system/patterns/center.mjs create mode 100644 src/styled-system/patterns/circle.d.ts create mode 100644 src/styled-system/patterns/circle.mjs create mode 100644 src/styled-system/patterns/container.d.ts create mode 100644 src/styled-system/patterns/container.mjs create mode 100644 src/styled-system/patterns/divider.d.ts create mode 100644 src/styled-system/patterns/divider.mjs create mode 100644 src/styled-system/patterns/flex.d.ts create mode 100644 src/styled-system/patterns/flex.mjs create mode 100644 src/styled-system/patterns/float.d.ts create mode 100644 src/styled-system/patterns/float.mjs create mode 100644 src/styled-system/patterns/grid-item.d.ts create mode 100644 src/styled-system/patterns/grid-item.mjs create mode 100644 src/styled-system/patterns/grid.d.ts create mode 100644 src/styled-system/patterns/grid.mjs create mode 100644 src/styled-system/patterns/hstack.d.ts create mode 100644 src/styled-system/patterns/hstack.mjs create mode 100644 src/styled-system/patterns/index.d.ts create mode 100644 src/styled-system/patterns/index.mjs create mode 100644 src/styled-system/patterns/link-box.d.ts create mode 100644 src/styled-system/patterns/link-box.mjs create mode 100644 src/styled-system/patterns/link-overlay.d.ts create mode 100644 src/styled-system/patterns/link-overlay.mjs create mode 100644 src/styled-system/patterns/spacer.d.ts create mode 100644 src/styled-system/patterns/spacer.mjs create mode 100644 src/styled-system/patterns/square.d.ts create mode 100644 src/styled-system/patterns/square.mjs create mode 100644 src/styled-system/patterns/stack.d.ts create mode 100644 src/styled-system/patterns/stack.mjs create mode 100644 src/styled-system/patterns/visually-hidden.d.ts create mode 100644 src/styled-system/patterns/visually-hidden.mjs create mode 100644 src/styled-system/patterns/vstack.d.ts create mode 100644 src/styled-system/patterns/vstack.mjs create mode 100644 src/styled-system/patterns/wrap.d.ts create mode 100644 src/styled-system/patterns/wrap.mjs create mode 100644 src/styled-system/reset.css create mode 100644 src/styled-system/tokens/index.css create mode 100644 src/styled-system/tokens/index.d.ts create mode 100644 src/styled-system/tokens/index.mjs create mode 100644 src/styled-system/tokens/keyframes.css create mode 100644 src/styled-system/tokens/tokens.d.ts create mode 100644 src/styled-system/types/composition.d.ts create mode 100644 src/styled-system/types/conditions.d.ts create mode 100644 src/styled-system/types/csstype.d.ts create mode 100644 src/styled-system/types/global.d.ts create mode 100644 src/styled-system/types/index.d.ts create mode 100644 src/styled-system/types/jsx.d.ts create mode 100644 src/styled-system/types/parts.d.ts create mode 100644 src/styled-system/types/pattern.d.ts create mode 100644 src/styled-system/types/prop-type.d.ts create mode 100644 src/styled-system/types/recipe.d.ts create mode 100644 src/styled-system/types/selectors.d.ts create mode 100644 src/styled-system/types/style-props.d.ts create mode 100644 src/styled-system/types/system-types.d.ts create mode 100644 src/utils/index.ts diff --git a/.eslintrc.js b/.eslintrc.js index c66b885a..801a552a 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,5 +1,5 @@ module.exports = { - ignorePatterns: ['.next/', 'node_modules/', 'public', '@types'], + ignorePatterns: ['.next/', 'node_modules/', 'public', '@types', 'src/styled-system/'], plugins: ['simple-import-sort', 'testing-library'], extends: [ 'next/core-web-vitals', diff --git a/.github/workflows/archive-stable-version.yml b/.github/workflows/archive-stable-version.yml new file mode 100644 index 00000000..6e6acd11 --- /dev/null +++ b/.github/workflows/archive-stable-version.yml @@ -0,0 +1,39 @@ +name: Archive Stable Version + +on: + workflow_dispatch: + schedule: + - cron: 0 19 * * * + +jobs: + archiveStableVersion: + runs-on: ubuntu-latest + steps: + - name: Create Pull Request + id: cpr + uses: actions/github-script@v6 + with: + github-token: ${{ secrets.GITHUB_TOKEN }} + result-encoding: string + script: | + try { + const result = await github.rest.pulls.create({ + owner: context.repo.owner, + repo: context.repo.repo, + labels: 'automerge', + title: '[auto-created] Daily up-to-date main branch', + head: 'release', + base: 'main', + }); + const mergeResult = await github.rest.pulls.merge({ + owner: context.repo.owner, + repo: context.repo.repo, + pull_number: result.data.number, + merge_method: 'merge', + }) + } catch (error) { + core.setFailed('Action failed') + if (error?.message != 'No commits between master and release') { + return 'hasError' + } + } diff --git a/.github/workflows/check-if-mergeable.yml b/.github/workflows/check-if-mergeable.yml new file mode 100644 index 00000000..f5051ed9 --- /dev/null +++ b/.github/workflows/check-if-mergeable.yml @@ -0,0 +1,47 @@ +name: check-if-mergeable + +on: + pull_request: + types: + - opened + - synchronize + branches: + - 'develop' + +jobs: + build: + name: check-if-mergeable + runs-on: ubuntu-latest + + steps: + - name: Checkout code + uses: actions/checkout@v2.3.4 + + # node 세팅 + - name: Init node + uses: actions/setup-node@v2.4.1 + with: + node-version: '18.17.1' + cache: 'yarn' + + - name: Set Yarn Version + id: set-version + run: | + yarn set version 4.0.2 + echo "YARN_VERSION=$(yarn -v)" >> $GITHUB_OUTPUT + + - name: Yarn Cache - PnP + uses: actions/cache@v2 + with: + path: | + .yarn/cache + .pnp.* + key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}-${{ steps.set-version.outputs.YARN_VERSION }} + restore-keys: | + ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}- + + - name: Install dependencies + run: yarn install + + - name: check-unit-test + run: yarn test ./src diff --git a/.gitignore b/.gitignore index 38e92f80..516fcd43 100644 --- a/.gitignore +++ b/.gitignore @@ -8,7 +8,6 @@ !.yarn/sdks !.yarn/versions -styled-system storybook-static # dependencies /node_modules diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 00000000..b6fb44b8 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +v18.17.1 \ No newline at end of file diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 00000000..daaa5ee2 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,7 @@ +{ + "recommendations": [ + "arcanis.vscode-zipfs", + "dbaeumer.vscode-eslint", + "esbenp.prettier-vscode" + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..c7715488 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,15 @@ +{ + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true, + "source.fixAll.stylelint": true + }, + "editor.formatOnSave": true, + "search.exclude": { + "**/.yarn": true, + "**/.pnp.*": true + }, + "eslint.nodePath": ".yarn/sdks", + "prettier.prettierPath": ".yarn/sdks/prettier/index.cjs", + "typescript.tsdk": ".yarn/sdks/typescript/lib", + "typescript.enablePromptUseWorkspaceTsdk": true +} diff --git a/.yarn/sdks/eslint/bin/eslint.js b/.yarn/sdks/eslint/bin/eslint.js new file mode 100755 index 00000000..f0557a07 --- /dev/null +++ b/.yarn/sdks/eslint/bin/eslint.js @@ -0,0 +1,20 @@ +#!/usr/bin/env node + +const { existsSync } = require(`fs`); +const { createRequire } = require(`module`); +const { resolve } = require(`path`); + +const relPnpApiPath = '../../../../.pnp.cjs'; + +const absPnpApiPath = resolve(__dirname, relPnpApiPath); +const absRequire = createRequire(absPnpApiPath); + +if (existsSync(absPnpApiPath)) { + if (!process.versions.pnp) { + // Setup the environment to be able to require eslint/bin/eslint.js + require(absPnpApiPath).setup(); + } +} + +// Defer to the real eslint/bin/eslint.js your application uses +module.exports = absRequire(`eslint/bin/eslint.js`); diff --git a/.yarn/sdks/eslint/lib/api.js b/.yarn/sdks/eslint/lib/api.js new file mode 100644 index 00000000..93f1f0c2 --- /dev/null +++ b/.yarn/sdks/eslint/lib/api.js @@ -0,0 +1,20 @@ +#!/usr/bin/env node + +const { existsSync } = require(`fs`); +const { createRequire } = require(`module`); +const { resolve } = require(`path`); + +const relPnpApiPath = '../../../../.pnp.cjs'; + +const absPnpApiPath = resolve(__dirname, relPnpApiPath); +const absRequire = createRequire(absPnpApiPath); + +if (existsSync(absPnpApiPath)) { + if (!process.versions.pnp) { + // Setup the environment to be able to require eslint + require(absPnpApiPath).setup(); + } +} + +// Defer to the real eslint your application uses +module.exports = absRequire(`eslint`); diff --git a/.yarn/sdks/eslint/lib/unsupported-api.js b/.yarn/sdks/eslint/lib/unsupported-api.js new file mode 100644 index 00000000..01e7653d --- /dev/null +++ b/.yarn/sdks/eslint/lib/unsupported-api.js @@ -0,0 +1,20 @@ +#!/usr/bin/env node + +const { existsSync } = require(`fs`); +const { createRequire } = require(`module`); +const { resolve } = require(`path`); + +const relPnpApiPath = '../../../../.pnp.cjs'; + +const absPnpApiPath = resolve(__dirname, relPnpApiPath); +const absRequire = createRequire(absPnpApiPath); + +if (existsSync(absPnpApiPath)) { + if (!process.versions.pnp) { + // Setup the environment to be able to require eslint/use-at-your-own-risk + require(absPnpApiPath).setup(); + } +} + +// Defer to the real eslint/use-at-your-own-risk your application uses +module.exports = absRequire(`eslint/use-at-your-own-risk`); diff --git a/.yarn/sdks/eslint/package.json b/.yarn/sdks/eslint/package.json new file mode 100644 index 00000000..9c57132c --- /dev/null +++ b/.yarn/sdks/eslint/package.json @@ -0,0 +1,14 @@ +{ + "name": "eslint", + "version": "8.54.0-sdk", + "main": "./lib/api.js", + "type": "commonjs", + "bin": { + "eslint": "./bin/eslint.js" + }, + "exports": { + "./package.json": "./package.json", + ".": "./lib/api.js", + "./use-at-your-own-risk": "./lib/unsupported-api.js" + } +} diff --git a/.yarn/sdks/integrations.yml b/.yarn/sdks/integrations.yml new file mode 100644 index 00000000..aa9d0d0a --- /dev/null +++ b/.yarn/sdks/integrations.yml @@ -0,0 +1,5 @@ +# This file is automatically generated by @yarnpkg/sdks. +# Manual changes might be lost! + +integrations: + - vscode diff --git a/.yarn/sdks/prettier/bin/prettier.cjs b/.yarn/sdks/prettier/bin/prettier.cjs new file mode 100755 index 00000000..5efad688 --- /dev/null +++ b/.yarn/sdks/prettier/bin/prettier.cjs @@ -0,0 +1,20 @@ +#!/usr/bin/env node + +const {existsSync} = require(`fs`); +const {createRequire} = require(`module`); +const {resolve} = require(`path`); + +const relPnpApiPath = "../../../../.pnp.cjs"; + +const absPnpApiPath = resolve(__dirname, relPnpApiPath); +const absRequire = createRequire(absPnpApiPath); + +if (existsSync(absPnpApiPath)) { + if (!process.versions.pnp) { + // Setup the environment to be able to require prettier/bin/prettier.cjs + require(absPnpApiPath).setup(); + } +} + +// Defer to the real prettier/bin/prettier.cjs your application uses +module.exports = absRequire(`prettier/bin/prettier.cjs`); diff --git a/.yarn/sdks/prettier/index.cjs b/.yarn/sdks/prettier/index.cjs new file mode 100644 index 00000000..8758e367 --- /dev/null +++ b/.yarn/sdks/prettier/index.cjs @@ -0,0 +1,20 @@ +#!/usr/bin/env node + +const {existsSync} = require(`fs`); +const {createRequire} = require(`module`); +const {resolve} = require(`path`); + +const relPnpApiPath = "../../../.pnp.cjs"; + +const absPnpApiPath = resolve(__dirname, relPnpApiPath); +const absRequire = createRequire(absPnpApiPath); + +if (existsSync(absPnpApiPath)) { + if (!process.versions.pnp) { + // Setup the environment to be able to require prettier + require(absPnpApiPath).setup(); + } +} + +// Defer to the real prettier your application uses +module.exports = absRequire(`prettier`); diff --git a/.yarn/sdks/prettier/package.json b/.yarn/sdks/prettier/package.json new file mode 100644 index 00000000..c61f5117 --- /dev/null +++ b/.yarn/sdks/prettier/package.json @@ -0,0 +1,7 @@ +{ + "name": "prettier", + "version": "3.1.0-sdk", + "main": "./index.cjs", + "type": "commonjs", + "bin": "./bin/prettier.cjs" +} diff --git a/.yarn/sdks/typescript/bin/tsc b/.yarn/sdks/typescript/bin/tsc new file mode 100755 index 00000000..454b950b --- /dev/null +++ b/.yarn/sdks/typescript/bin/tsc @@ -0,0 +1,20 @@ +#!/usr/bin/env node + +const {existsSync} = require(`fs`); +const {createRequire} = require(`module`); +const {resolve} = require(`path`); + +const relPnpApiPath = "../../../../.pnp.cjs"; + +const absPnpApiPath = resolve(__dirname, relPnpApiPath); +const absRequire = createRequire(absPnpApiPath); + +if (existsSync(absPnpApiPath)) { + if (!process.versions.pnp) { + // Setup the environment to be able to require typescript/bin/tsc + require(absPnpApiPath).setup(); + } +} + +// Defer to the real typescript/bin/tsc your application uses +module.exports = absRequire(`typescript/bin/tsc`); diff --git a/.yarn/sdks/typescript/bin/tsserver b/.yarn/sdks/typescript/bin/tsserver new file mode 100755 index 00000000..d7a60568 --- /dev/null +++ b/.yarn/sdks/typescript/bin/tsserver @@ -0,0 +1,20 @@ +#!/usr/bin/env node + +const {existsSync} = require(`fs`); +const {createRequire} = require(`module`); +const {resolve} = require(`path`); + +const relPnpApiPath = "../../../../.pnp.cjs"; + +const absPnpApiPath = resolve(__dirname, relPnpApiPath); +const absRequire = createRequire(absPnpApiPath); + +if (existsSync(absPnpApiPath)) { + if (!process.versions.pnp) { + // Setup the environment to be able to require typescript/bin/tsserver + require(absPnpApiPath).setup(); + } +} + +// Defer to the real typescript/bin/tsserver your application uses +module.exports = absRequire(`typescript/bin/tsserver`); diff --git a/.yarn/sdks/typescript/lib/tsc.js b/.yarn/sdks/typescript/lib/tsc.js new file mode 100644 index 00000000..1d3e2a83 --- /dev/null +++ b/.yarn/sdks/typescript/lib/tsc.js @@ -0,0 +1,20 @@ +#!/usr/bin/env node + +const { existsSync } = require(`fs`); +const { createRequire } = require(`module`); +const { resolve } = require(`path`); + +const relPnpApiPath = '../../../../.pnp.cjs'; + +const absPnpApiPath = resolve(__dirname, relPnpApiPath); +const absRequire = createRequire(absPnpApiPath); + +if (existsSync(absPnpApiPath)) { + if (!process.versions.pnp) { + // Setup the environment to be able to require typescript/lib/tsc.js + require(absPnpApiPath).setup(); + } +} + +// Defer to the real typescript/lib/tsc.js your application uses +module.exports = absRequire(`typescript/lib/tsc.js`); diff --git a/.yarn/sdks/typescript/lib/tsserver.js b/.yarn/sdks/typescript/lib/tsserver.js new file mode 100644 index 00000000..4cb9dabc --- /dev/null +++ b/.yarn/sdks/typescript/lib/tsserver.js @@ -0,0 +1,252 @@ +#!/usr/bin/env node + +const { existsSync } = require(`fs`); +const { createRequire } = require(`module`); +const { resolve } = require(`path`); + +const relPnpApiPath = '../../../../.pnp.cjs'; + +const absPnpApiPath = resolve(__dirname, relPnpApiPath); +const absRequire = createRequire(absPnpApiPath); + +const moduleWrapper = (tsserver) => { + if (!process.versions.pnp) { + return tsserver; + } + + const { isAbsolute } = require(`path`); + const pnpApi = require(`pnpapi`); + + const isVirtual = (str) => str.match(/\/(\$\$virtual|__virtual__)\//); + const isPortal = (str) => str.startsWith('portal:/'); + const normalize = (str) => str.replace(/\\/g, `/`).replace(/^\/?/, `/`); + + const dependencyTreeRoots = new Set( + pnpApi.getDependencyTreeRoots().map((locator) => { + return `${locator.name}@${locator.reference}`; + }), + ); + + // VSCode sends the zip paths to TS using the "zip://" prefix, that TS + // doesn't understand. This layer makes sure to remove the protocol + // before forwarding it to TS, and to add it back on all returned paths. + + function toEditorPath(str) { + // We add the `zip:` prefix to both `.zip/` paths and virtual paths + if (isAbsolute(str) && !str.match(/^\^?(zip:|\/zip\/)/) && (str.match(/\.zip\//) || isVirtual(str))) { + // We also take the opportunity to turn virtual paths into physical ones; + // this makes it much easier to work with workspaces that list peer + // dependencies, since otherwise Ctrl+Click would bring us to the virtual + // file instances instead of the real ones. + // + // We only do this to modules owned by the the dependency tree roots. + // This avoids breaking the resolution when jumping inside a vendor + // with peer dep (otherwise jumping into react-dom would show resolution + // errors on react). + // + const resolved = isVirtual(str) ? pnpApi.resolveVirtual(str) : str; + if (resolved) { + const locator = pnpApi.findPackageLocator(resolved); + if ( + locator && + (dependencyTreeRoots.has(`${locator.name}@${locator.reference}`) || isPortal(locator.reference)) + ) { + str = resolved; + } + } + + str = normalize(str); + + if (str.match(/\.zip\//)) { + switch (hostInfo) { + // Absolute VSCode `Uri.fsPath`s need to start with a slash. + // VSCode only adds it automatically for supported schemes, + // so we have to do it manually for the `zip` scheme. + // The path needs to start with a caret otherwise VSCode doesn't handle the protocol + // + // Ref: https://github.com/microsoft/vscode/issues/105014#issuecomment-686760910 + // + // 2021-10-08: VSCode changed the format in 1.61. + // Before | ^zip:/c:/foo/bar.zip/package.json + // After | ^/zip//c:/foo/bar.zip/package.json + // + // 2022-04-06: VSCode changed the format in 1.66. + // Before | ^/zip//c:/foo/bar.zip/package.json + // After | ^/zip/c:/foo/bar.zip/package.json + // + // 2022-05-06: VSCode changed the format in 1.68 + // Before | ^/zip/c:/foo/bar.zip/package.json + // After | ^/zip//c:/foo/bar.zip/package.json + // + case `vscode <1.61`: + { + str = `^zip:${str}`; + } + break; + + case `vscode <1.66`: + { + str = `^/zip/${str}`; + } + break; + + case `vscode <1.68`: + { + str = `^/zip${str}`; + } + break; + + case `vscode`: + { + str = `^/zip/${str}`; + } + break; + + // To make "go to definition" work, + // We have to resolve the actual file system path from virtual path + // and convert scheme to supported by [vim-rzip](https://github.com/lbrayner/vim-rzip) + case `coc-nvim`: + { + str = normalize(resolved).replace(/\.zip\//, `.zip::`); + str = resolve(`zipfile:${str}`); + } + break; + + // Support neovim native LSP and [typescript-language-server](https://github.com/theia-ide/typescript-language-server) + // We have to resolve the actual file system path from virtual path, + // everything else is up to neovim + case `neovim`: + { + str = normalize(resolved).replace(/\.zip\//, `.zip::`); + str = `zipfile://${str}`; + } + break; + + default: + { + str = `zip:${str}`; + } + break; + } + } else { + str = str.replace(/^\/?/, process.platform === `win32` ? `` : `/`); + } + } + + return str; + } + + function fromEditorPath(str) { + switch (hostInfo) { + case `coc-nvim`: + { + str = str.replace(/\.zip::/, `.zip/`); + // The path for coc-nvim is in format of //zipfile://.yarn/... + // So in order to convert it back, we use .* to match all the thing + // before `zipfile:` + return process.platform === `win32` ? str.replace(/^.*zipfile:\//, ``) : str.replace(/^.*zipfile:/, ``); + } + break; + + case `neovim`: + { + str = str.replace(/\.zip::/, `.zip/`); + // The path for neovim is in format of zipfile:////.yarn/... + return str.replace(/^zipfile:\/\//, ``); + } + break; + + case `vscode`: + default: + { + return str.replace(/^\^?(zip:|\/zip(\/ts-nul-authority)?)\/+/, process.platform === `win32` ? `` : `/`); + } + break; + } + } + + // Force enable 'allowLocalPluginLoads' + // TypeScript tries to resolve plugins using a path relative to itself + // which doesn't work when using the global cache + // https://github.com/microsoft/TypeScript/blob/1b57a0395e0bff191581c9606aab92832001de62/src/server/project.ts#L2238 + // VSCode doesn't want to enable 'allowLocalPluginLoads' due to security concerns but + // TypeScript already does local loads and if this code is running the user trusts the workspace + // https://github.com/microsoft/vscode/issues/45856 + const ConfiguredProject = tsserver.server.ConfiguredProject; + const { enablePluginsWithOptions: originalEnablePluginsWithOptions } = ConfiguredProject.prototype; + ConfiguredProject.prototype.enablePluginsWithOptions = function () { + this.projectService.allowLocalPluginLoads = true; + return originalEnablePluginsWithOptions.apply(this, arguments); + }; + + // And here is the point where we hijack the VSCode <-> TS communications + // by adding ourselves in the middle. We locate everything that looks + // like an absolute path of ours and normalize it. + + const Session = tsserver.server.Session; + const { onMessage: originalOnMessage, send: originalSend } = Session.prototype; + let hostInfo = `unknown`; + + Object.assign(Session.prototype, { + onMessage(/** @type {string | object} */ message) { + const isStringMessage = typeof message === 'string'; + const parsedMessage = isStringMessage ? JSON.parse(message) : message; + + if ( + parsedMessage != null && + typeof parsedMessage === `object` && + parsedMessage.arguments && + typeof parsedMessage.arguments.hostInfo === `string` + ) { + hostInfo = parsedMessage.arguments.hostInfo; + if (hostInfo === `vscode` && process.env.VSCODE_IPC_HOOK) { + const [, major, minor] = ( + process.env.VSCODE_IPC_HOOK.match( + // The RegExp from https://semver.org/ but without the caret at the start + /(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/, + ) ?? [] + ).map(Number); + + if (major === 1) { + if (minor < 61) { + hostInfo += ` <1.61`; + } else if (minor < 66) { + hostInfo += ` <1.66`; + } else if (minor < 68) { + hostInfo += ` <1.68`; + } + } + } + } + + const processedMessageJSON = JSON.stringify(parsedMessage, (key, value) => { + return typeof value === 'string' ? fromEditorPath(value) : value; + }); + + return originalOnMessage.call(this, isStringMessage ? processedMessageJSON : JSON.parse(processedMessageJSON)); + }, + + send(/** @type {any} */ msg) { + return originalSend.call( + this, + JSON.parse( + JSON.stringify(msg, (key, value) => { + return typeof value === `string` ? toEditorPath(value) : value; + }), + ), + ); + }, + }); + + return tsserver; +}; + +if (existsSync(absPnpApiPath)) { + if (!process.versions.pnp) { + // Setup the environment to be able to require typescript/lib/tsserver.js + require(absPnpApiPath).setup(); + } +} + +// Defer to the real typescript/lib/tsserver.js your application uses +module.exports = moduleWrapper(absRequire(`typescript/lib/tsserver.js`)); diff --git a/.yarn/sdks/typescript/lib/tsserverlibrary.js b/.yarn/sdks/typescript/lib/tsserverlibrary.js new file mode 100644 index 00000000..dc77697e --- /dev/null +++ b/.yarn/sdks/typescript/lib/tsserverlibrary.js @@ -0,0 +1,252 @@ +#!/usr/bin/env node + +const { existsSync } = require(`fs`); +const { createRequire } = require(`module`); +const { resolve } = require(`path`); + +const relPnpApiPath = '../../../../.pnp.cjs'; + +const absPnpApiPath = resolve(__dirname, relPnpApiPath); +const absRequire = createRequire(absPnpApiPath); + +const moduleWrapper = (tsserver) => { + if (!process.versions.pnp) { + return tsserver; + } + + const { isAbsolute } = require(`path`); + const pnpApi = require(`pnpapi`); + + const isVirtual = (str) => str.match(/\/(\$\$virtual|__virtual__)\//); + const isPortal = (str) => str.startsWith('portal:/'); + const normalize = (str) => str.replace(/\\/g, `/`).replace(/^\/?/, `/`); + + const dependencyTreeRoots = new Set( + pnpApi.getDependencyTreeRoots().map((locator) => { + return `${locator.name}@${locator.reference}`; + }), + ); + + // VSCode sends the zip paths to TS using the "zip://" prefix, that TS + // doesn't understand. This layer makes sure to remove the protocol + // before forwarding it to TS, and to add it back on all returned paths. + + function toEditorPath(str) { + // We add the `zip:` prefix to both `.zip/` paths and virtual paths + if (isAbsolute(str) && !str.match(/^\^?(zip:|\/zip\/)/) && (str.match(/\.zip\//) || isVirtual(str))) { + // We also take the opportunity to turn virtual paths into physical ones; + // this makes it much easier to work with workspaces that list peer + // dependencies, since otherwise Ctrl+Click would bring us to the virtual + // file instances instead of the real ones. + // + // We only do this to modules owned by the the dependency tree roots. + // This avoids breaking the resolution when jumping inside a vendor + // with peer dep (otherwise jumping into react-dom would show resolution + // errors on react). + // + const resolved = isVirtual(str) ? pnpApi.resolveVirtual(str) : str; + if (resolved) { + const locator = pnpApi.findPackageLocator(resolved); + if ( + locator && + (dependencyTreeRoots.has(`${locator.name}@${locator.reference}`) || isPortal(locator.reference)) + ) { + str = resolved; + } + } + + str = normalize(str); + + if (str.match(/\.zip\//)) { + switch (hostInfo) { + // Absolute VSCode `Uri.fsPath`s need to start with a slash. + // VSCode only adds it automatically for supported schemes, + // so we have to do it manually for the `zip` scheme. + // The path needs to start with a caret otherwise VSCode doesn't handle the protocol + // + // Ref: https://github.com/microsoft/vscode/issues/105014#issuecomment-686760910 + // + // 2021-10-08: VSCode changed the format in 1.61. + // Before | ^zip:/c:/foo/bar.zip/package.json + // After | ^/zip//c:/foo/bar.zip/package.json + // + // 2022-04-06: VSCode changed the format in 1.66. + // Before | ^/zip//c:/foo/bar.zip/package.json + // After | ^/zip/c:/foo/bar.zip/package.json + // + // 2022-05-06: VSCode changed the format in 1.68 + // Before | ^/zip/c:/foo/bar.zip/package.json + // After | ^/zip//c:/foo/bar.zip/package.json + // + case `vscode <1.61`: + { + str = `^zip:${str}`; + } + break; + + case `vscode <1.66`: + { + str = `^/zip/${str}`; + } + break; + + case `vscode <1.68`: + { + str = `^/zip${str}`; + } + break; + + case `vscode`: + { + str = `^/zip/${str}`; + } + break; + + // To make "go to definition" work, + // We have to resolve the actual file system path from virtual path + // and convert scheme to supported by [vim-rzip](https://github.com/lbrayner/vim-rzip) + case `coc-nvim`: + { + str = normalize(resolved).replace(/\.zip\//, `.zip::`); + str = resolve(`zipfile:${str}`); + } + break; + + // Support neovim native LSP and [typescript-language-server](https://github.com/theia-ide/typescript-language-server) + // We have to resolve the actual file system path from virtual path, + // everything else is up to neovim + case `neovim`: + { + str = normalize(resolved).replace(/\.zip\//, `.zip::`); + str = `zipfile://${str}`; + } + break; + + default: + { + str = `zip:${str}`; + } + break; + } + } else { + str = str.replace(/^\/?/, process.platform === `win32` ? `` : `/`); + } + } + + return str; + } + + function fromEditorPath(str) { + switch (hostInfo) { + case `coc-nvim`: + { + str = str.replace(/\.zip::/, `.zip/`); + // The path for coc-nvim is in format of //zipfile://.yarn/... + // So in order to convert it back, we use .* to match all the thing + // before `zipfile:` + return process.platform === `win32` ? str.replace(/^.*zipfile:\//, ``) : str.replace(/^.*zipfile:/, ``); + } + break; + + case `neovim`: + { + str = str.replace(/\.zip::/, `.zip/`); + // The path for neovim is in format of zipfile:////.yarn/... + return str.replace(/^zipfile:\/\//, ``); + } + break; + + case `vscode`: + default: + { + return str.replace(/^\^?(zip:|\/zip(\/ts-nul-authority)?)\/+/, process.platform === `win32` ? `` : `/`); + } + break; + } + } + + // Force enable 'allowLocalPluginLoads' + // TypeScript tries to resolve plugins using a path relative to itself + // which doesn't work when using the global cache + // https://github.com/microsoft/TypeScript/blob/1b57a0395e0bff191581c9606aab92832001de62/src/server/project.ts#L2238 + // VSCode doesn't want to enable 'allowLocalPluginLoads' due to security concerns but + // TypeScript already does local loads and if this code is running the user trusts the workspace + // https://github.com/microsoft/vscode/issues/45856 + const ConfiguredProject = tsserver.server.ConfiguredProject; + const { enablePluginsWithOptions: originalEnablePluginsWithOptions } = ConfiguredProject.prototype; + ConfiguredProject.prototype.enablePluginsWithOptions = function () { + this.projectService.allowLocalPluginLoads = true; + return originalEnablePluginsWithOptions.apply(this, arguments); + }; + + // And here is the point where we hijack the VSCode <-> TS communications + // by adding ourselves in the middle. We locate everything that looks + // like an absolute path of ours and normalize it. + + const Session = tsserver.server.Session; + const { onMessage: originalOnMessage, send: originalSend } = Session.prototype; + let hostInfo = `unknown`; + + Object.assign(Session.prototype, { + onMessage(/** @type {string | object} */ message) { + const isStringMessage = typeof message === 'string'; + const parsedMessage = isStringMessage ? JSON.parse(message) : message; + + if ( + parsedMessage != null && + typeof parsedMessage === `object` && + parsedMessage.arguments && + typeof parsedMessage.arguments.hostInfo === `string` + ) { + hostInfo = parsedMessage.arguments.hostInfo; + if (hostInfo === `vscode` && process.env.VSCODE_IPC_HOOK) { + const [, major, minor] = ( + process.env.VSCODE_IPC_HOOK.match( + // The RegExp from https://semver.org/ but without the caret at the start + /(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/, + ) ?? [] + ).map(Number); + + if (major === 1) { + if (minor < 61) { + hostInfo += ` <1.61`; + } else if (minor < 66) { + hostInfo += ` <1.66`; + } else if (minor < 68) { + hostInfo += ` <1.68`; + } + } + } + } + + const processedMessageJSON = JSON.stringify(parsedMessage, (key, value) => { + return typeof value === 'string' ? fromEditorPath(value) : value; + }); + + return originalOnMessage.call(this, isStringMessage ? processedMessageJSON : JSON.parse(processedMessageJSON)); + }, + + send(/** @type {any} */ msg) { + return originalSend.call( + this, + JSON.parse( + JSON.stringify(msg, (key, value) => { + return typeof value === `string` ? toEditorPath(value) : value; + }), + ), + ); + }, + }); + + return tsserver; +}; + +if (existsSync(absPnpApiPath)) { + if (!process.versions.pnp) { + // Setup the environment to be able to require typescript/lib/tsserverlibrary.js + require(absPnpApiPath).setup(); + } +} + +// Defer to the real typescript/lib/tsserverlibrary.js your application uses +module.exports = moduleWrapper(absRequire(`typescript/lib/tsserverlibrary.js`)); diff --git a/.yarn/sdks/typescript/lib/typescript.js b/.yarn/sdks/typescript/lib/typescript.js new file mode 100644 index 00000000..3ebd073e --- /dev/null +++ b/.yarn/sdks/typescript/lib/typescript.js @@ -0,0 +1,20 @@ +#!/usr/bin/env node + +const { existsSync } = require(`fs`); +const { createRequire } = require(`module`); +const { resolve } = require(`path`); + +const relPnpApiPath = '../../../../.pnp.cjs'; + +const absPnpApiPath = resolve(__dirname, relPnpApiPath); +const absRequire = createRequire(absPnpApiPath); + +if (existsSync(absPnpApiPath)) { + if (!process.versions.pnp) { + // Setup the environment to be able to require typescript + require(absPnpApiPath).setup(); + } +} + +// Defer to the real typescript your application uses +module.exports = absRequire(`typescript`); diff --git a/.yarn/sdks/typescript/package.json b/.yarn/sdks/typescript/package.json new file mode 100644 index 00000000..bc10fac9 --- /dev/null +++ b/.yarn/sdks/typescript/package.json @@ -0,0 +1,10 @@ +{ + "name": "typescript", + "version": "5.3.2-sdk", + "main": "./lib/typescript.js", + "type": "commonjs", + "bin": { + "tsc": "./bin/tsc", + "tsserver": "./bin/tsserver" + } +} diff --git a/package.json b/package.json index df9fd913..798e9ab6 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,8 @@ "lint:fix": "next lint --fix", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", - "test": "jest --watch", + "test": "jest", + "test:watch": "jest --watch", "test:ci": "jest --ci", "test:coverage": "jest --coverage" }, diff --git a/panda.config.ts b/panda.config.ts index e091d1e7..056b10d5 100644 --- a/panda.config.ts +++ b/panda.config.ts @@ -12,9 +12,17 @@ export default defineConfig({ // Useful for theme customization theme: { - extend: {}, + extend: { + keyframes: { + gradient: { + '0%': { transform: 'rotate(0deg)', backgroundPositionX: '0%', backgroundPositionY: '0%' }, + '50%': { backgroundPositionX: '50%', backgroundPositionY: '100%' }, + '100%': { transform: 'rotate(0deg)', backgroundPositionX: '0%', backgroundPositionY: '0%' }, + }, + }, + }, }, // The output directory for your css system - outdir: 'styled-system', + outdir: './src/styled-system', }); diff --git a/public/assets/icons/left-arrow-icon.svg b/public/assets/icons/left-arrow-icon.svg new file mode 100644 index 00000000..2905bda0 --- /dev/null +++ b/public/assets/icons/left-arrow-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/apis/index.ts b/src/apis/index.ts new file mode 100644 index 00000000..00f25e9f --- /dev/null +++ b/src/apis/index.ts @@ -0,0 +1,3 @@ +// axios의 인스턴스 구현체가 있고 전반적으로 instance를 이용해서 api 콜하는 함수들 + +export {}; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 345a344a..bf8fa2c4 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,5 +1,7 @@ import type { Metadata } from 'next'; -import { QueryProvider } from '@/query'; +import { css } from '@/styled-system/css'; + +import { QueryProvider } from '../hooks/query'; import './globals.css'; @@ -12,8 +14,16 @@ export default function RootLayout({ children }: { children: React.ReactNode }) return ( - {children} + +
{children}
+ ); } + +const containerCss = { + maxWidth: '475px', + margin: '0 auto', + minHeight: '100vh', +}; diff --git a/src/app/page.tsx b/src/app/page.tsx index f5e14340..a9fa23f8 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,4 +1,4 @@ -import { css } from '../../styled-system/css'; +import { css } from '@styled-system/css'; export default function Home() { return
Hello 🐼!
; diff --git a/src/app/timer/TimerView.tsx b/src/app/timer/TimerView.tsx new file mode 100644 index 00000000..e7ce822d --- /dev/null +++ b/src/app/timer/TimerView.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import { css } from '@/styled-system/css'; +import { center } from '@/styled-system/patterns'; + +interface Props { + isActive: boolean; + time: [string, string]; + category: string; +} +export default function TimerView({ category, time, isActive }: Props) { + return ( +
+
+
{category}
+
+ {time[0]} + : + {time[1]} +
+
+
+ ); +} + +const innerCss = { + width: '312px', + height: '312px', + background: 'white', + boxShadow: '0px 10px 30px 5px rgba(18.51, 14.90, 195.38, 0.07)', + borderRadius: 9999, + flexDirection: 'column', +}; + +const categoryCss = { color: '#4E5968', fontSize: '18px', fontWeight: '600', lineHeight: '150%' }; + +const timerTextCss = { + fontSize: '70px', + fontWeight: '700', + animation: 'gradient 3s ease-in-out infinite', + backgroundSize: '150% 200%!', + '-webkit-background-clip': 'text!', + background: 'linear-gradient(108deg, #FF8C8C -1.04%, #5D8AFF 101.48%)', +}; diff --git a/src/app/timer/layout.tsx b/src/app/timer/layout.tsx new file mode 100644 index 00000000..3aadb9f1 --- /dev/null +++ b/src/app/timer/layout.tsx @@ -0,0 +1,10 @@ +import { type PropsWithChildren } from 'react'; +import { css } from '@/styled-system/css'; + +export default function Layout({ children }: PropsWithChildren) { + return
{children}
; +} + +const containerCss = css({ + minHeight: '100vh', +}); diff --git a/src/app/timer/page.tsx b/src/app/timer/page.tsx new file mode 100644 index 00000000..cd14a574 --- /dev/null +++ b/src/app/timer/page.tsx @@ -0,0 +1,100 @@ +'use client'; +import TimerView from '@/app/timer/TimerView'; +import useTimer from '@/app/timer/useTimer'; +import useTimerStatus from '@/app/timer/useTimerStatus'; +import Header from '@/components/Layout/Header'; +import { css } from '@styled-system/css'; + +export default function TimerPage() { + const { step, stepLabel, onNextStep } = useTimerStatus(); + const { formattedTime } = useTimer(step); + + const onFinish = () => { + onNextStep('stop'); + alert('정말 끝내시겠습니까?'); + }; + + return ( +
+
+
+

{stepLabel.title}

+

{stepLabel.desc}

+ + +
+ {step === 'ready' && ( + + )} + {step === 'progress' && ( + <> + + + + )} + {step === 'stop' && ( + <> + + + + )} +
+
+
+ ); +} + +const bgCss = { + minHeight: '100vh', + transition: '1s ease', +}; + +const containerCss = { + padding: '24px 16px', +}; + +const font24Css = { + fontSize: '24px', + fontFamily: 'Pretendard', + fontWeight: '700', + lineHeight: '150%', + wordWrap: 'break-word', +}; + +const font14Css = { + fontSize: '14px', + fontFamily: 'Pretendard', + fontWeight: '400', + lineHeight: '150%', +}; + +const titleCss = css(font24Css, { color: '#333D4B' }); +const descCss = css(font14Css, { color: '#6B7684', marginBottom: '84px' }); + +const buttonContainerCss = { + margin: '28px auto', + display: 'flex', + justifyContent: 'center', + gap: '12px', + + '& button': { + backgroundColor: 'white', + borderRadius: '30px', + padding: '16px 24px', + boxSizing: '0px 4px 20px 0px rgba(18, 23, 41, 0.10)', + }, +}; diff --git a/src/app/timer/useTimer.ts b/src/app/timer/useTimer.ts new file mode 100644 index 00000000..31018aa2 --- /dev/null +++ b/src/app/timer/useTimer.ts @@ -0,0 +1,34 @@ +import { useEffect, useState } from 'react'; +import { type StepType } from '@/app/timer/useTimerStatus'; + +export default function useTimer(status: StepType, initSeconds = 600) { + const [second, setSecond] = useState(initSeconds); // 남은 시간 (단위: 초) + + const formattedTime = formatMMSS(second); + + useEffect(() => { + let timer: NodeJS.Timeout; + + if (second <= 0) { + return; + } + + if (status === 'progress') { + timer = setInterval(() => { + setSecond((prev) => prev - 1); + }, 1000); + } + return () => clearInterval(timer); + }, [second, status]); + + return { formattedTime }; +} + +const formatMMSS = (second: number): [string, string] => { + const minutes = Math.floor(second / 60); // 분 계산 + const seconds = second % 60; // 초 계산 + const formattedMinutes = String(minutes).padStart(2, '0'); // 두 자리로 변환 + const formattedSeconds = String(seconds).padStart(2, '0'); // 두 자리로 변환 + + return [formattedMinutes, formattedSeconds]; +}; diff --git a/src/app/timer/useTimerStatus.ts b/src/app/timer/useTimerStatus.ts new file mode 100644 index 00000000..73dc7964 --- /dev/null +++ b/src/app/timer/useTimerStatus.ts @@ -0,0 +1,32 @@ +import { useState } from 'react'; + +export type StepType = 'ready' | 'progress' | 'stop'; + +const TIMER_STATUS = { + ready: { + title: '준비 되셨나요?', + desc: '타이머를 눌러서 10분의 미션을 완성해 주세요!', + }, + progress: { + title: '시작!', + desc: '10분 동안 최선을 다해주세요!', + }, + stop: { + title: '잠시 멈췄어요', + desc: '준비가 되면 타이머를 다시 시작해주세요!', + }, +} as const; + +function useTimerStatus() { + const [step, setStep] = useState('ready'); + + const stepLabel = TIMER_STATUS[step]; + + const onNextStep = (nextStep: StepType) => { + setStep(nextStep); + }; + + return { step, onNextStep, stepLabel }; +} + +export default useTimerStatus; diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx new file mode 100644 index 00000000..2afc2c6c --- /dev/null +++ b/src/components/Layout/Header.tsx @@ -0,0 +1,44 @@ +import Image from 'next/image'; +import { flex } from '@/styled-system/patterns'; +import { css } from '@styled-system/css'; + +interface Props { + title?: string; +} + +function Header({ title }: Props) { + return ( + <> +
+ +

{title}

+
+
+ + ); +} + +const headerBlankCss = { + height: '42px;', + width: '100%', +}; + +const wrapperCss = flex({ + padding: '10px 16px', + gap: '6px', + background: 'transparent', + position: 'fixed', + margin: '0 auto', + zIndex: 100, +}); + +const headingCss = css({ + color: '#6B7684', + fontSize: '16px', + fontFamily: 'Pretendard', + fontWeight: '600', +}); + +export default Header; diff --git a/src/hooks/lifeCycle/index.ts b/src/hooks/lifeCycle/index.ts new file mode 100644 index 00000000..c610f0e4 --- /dev/null +++ b/src/hooks/lifeCycle/index.ts @@ -0,0 +1,2 @@ +// react life cycle hooks example useMount +export {}; diff --git a/src/query/QueryProvider.tsx b/src/hooks/query/QueryProvider.tsx similarity index 100% rename from src/query/QueryProvider.tsx rename to src/hooks/query/QueryProvider.tsx diff --git a/src/query/getQueryKey.ts b/src/hooks/query/getQueryKey.ts similarity index 100% rename from src/query/getQueryKey.ts rename to src/hooks/query/getQueryKey.ts diff --git a/src/query/index.ts b/src/hooks/query/index.ts similarity index 100% rename from src/query/index.ts rename to src/hooks/query/index.ts diff --git a/src/services/index.spec.ts b/src/services/index.spec.ts new file mode 100644 index 00000000..8876c276 --- /dev/null +++ b/src/services/index.spec.ts @@ -0,0 +1,6 @@ +// pr 머지용 임시 테스트 코드 +describe('test', () => { + test('test', () => { + expect(1).toBe(1); + }); +}); diff --git a/src/services/index.ts b/src/services/index.ts new file mode 100644 index 00000000..498631ae --- /dev/null +++ b/src/services/index.ts @@ -0,0 +1,3 @@ +// 비지니스 로직 , 테스트 코드 작성 + +export {}; diff --git a/src/styled-system/css/conditions.mjs b/src/styled-system/css/conditions.mjs new file mode 100644 index 00000000..362a06f0 --- /dev/null +++ b/src/styled-system/css/conditions.mjs @@ -0,0 +1,34 @@ +import { withoutSpace } from '../helpers.mjs'; + +const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,base" +const conditions = new Set(conditionsStr.split(',')) + +export function isCondition(value){ + return conditions.has(value) || /^@|&|&$/.test(value) +} + +const underscoreRegex = /^_/ +const conditionsSelectorRegex = /&|@/ + +export function finalizeConditions(paths){ + return paths.map((path) => { + if (conditions.has(path)){ + return path.replace(underscoreRegex, '') + } + + if (conditionsSelectorRegex.test(path)){ + return `[${withoutSpace(path.trim())}]` + } + + return path + })} + + export function sortConditions(paths){ + return paths.sort((a, b) => { + const aa = isCondition(a) + const bb = isCondition(b) + if (aa && !bb) return 1 + if (!aa && bb) return -1 + return 0 + }) + } \ No newline at end of file diff --git a/src/styled-system/css/css.d.ts b/src/styled-system/css/css.d.ts new file mode 100644 index 00000000..63723823 --- /dev/null +++ b/src/styled-system/css/css.d.ts @@ -0,0 +1,9 @@ +/* eslint-disable */ +import type { SystemStyleObject } from '../types/index'; + +interface CssFunction { + (...styles: Array): string + raw: (...styles: Array) => SystemStyleObject +} + +export declare const css: CssFunction; \ No newline at end of file diff --git a/src/styled-system/css/css.mjs b/src/styled-system/css/css.mjs new file mode 100644 index 00000000..53b24686 --- /dev/null +++ b/src/styled-system/css/css.mjs @@ -0,0 +1,44 @@ +import { createCss, createMergeCss, hypenateProperty, withoutSpace } from '../helpers.mjs'; +import { sortConditions, finalizeConditions } from './conditions.mjs'; + +const utilities = "aspectRatio:aspect,boxDecorationBreak:decoration,zIndex:z,boxSizing:box,objectPosition:object,objectFit:object,overscrollBehavior:overscroll,overscrollBehaviorX:overscroll-x,overscrollBehaviorY:overscroll-y,position:pos/1,top:top,left:left,insetInline:inset-x,insetBlock:inset-y,inset:inset,insetBlockEnd:inset-b,insetBlockStart:inset-t,insetInlineEnd:end/insetEnd/1,insetInlineStart:start/insetStart/1,right:right,bottom:bottom,insetX:inset-x,insetY:inset-y,float:float,visibility:vis,display:d,hideFrom:hide,hideBelow:show,flexBasis:basis,flex:flex,flexDirection:flex/flexDir,flexGrow:grow,flexShrink:shrink,gridTemplateColumns:grid-cols,gridTemplateRows:grid-rows,gridColumn:col-span,gridRow:row-span,gridColumnStart:col-start,gridColumnEnd:col-end,gridAutoFlow:grid-flow,gridAutoColumns:auto-cols,gridAutoRows:auto-rows,gap:gap,gridGap:gap,gridRowGap:gap-x,gridColumnGap:gap-y,rowGap:gap-x,columnGap:gap-y,justifyContent:justify,alignContent:content,alignItems:items,alignSelf:self,padding:p/1,paddingLeft:pl/1,paddingRight:pr/1,paddingTop:pt/1,paddingBottom:pb/1,paddingBlock:py/1/paddingY,paddingBlockEnd:pb,paddingBlockStart:pt,paddingInline:px/paddingX/1,paddingInlineEnd:pe/1/paddingEnd,paddingInlineStart:ps/1/paddingStart,marginLeft:ml/1,marginRight:mr/1,marginTop:mt/1,marginBottom:mb/1,margin:m/1,marginBlock:my/1/marginY,marginBlockEnd:mb,marginBlockStart:mt,marginInline:mx/1/marginX,marginInlineEnd:me/1/marginEnd,marginInlineStart:ms/1/marginStart,outlineWidth:ring/ringWidth,outlineColor:ring/ringColor,outline:ring/1,outlineOffset:ring/ringOffset,divideX:divide-x,divideY:divide-y,divideColor:divide,divideStyle:divide,width:w/1,inlineSize:w,minWidth:min-w/minW,minInlineSize:min-w,maxWidth:max-w/maxW,maxInlineSize:max-w,height:h/1,blockSize:h,minHeight:min-h/minH,minBlockSize:min-h,maxHeight:max-h/maxH,maxBlockSize:max-b,color:text,fontFamily:font,fontSize:fs,fontWeight:font,fontSmoothing:smoothing,fontVariantNumeric:numeric,letterSpacing:tracking,lineHeight:leading,textAlign:text,textDecoration:text-decor,textDecorationColor:text-decor,textEmphasisColor:text-emphasis,textDecorationStyle:decoration,textDecorationThickness:decoration,textUnderlineOffset:underline-offset,textTransform:text,textIndent:indent,textShadow:text-shadow,textOverflow:text,verticalAlign:align,wordBreak:break,textWrap:text,truncate:truncate,lineClamp:clamp,listStyleType:list,listStylePosition:list,listStyleImage:list-img,backgroundPosition:bg/bgPosition,backgroundPositionX:bg-x/bgPositionX,backgroundPositionY:bg-y/bgPositionY,backgroundAttachment:bg/bgAttachment,backgroundClip:bg-clip/bgClip,background:bg/1,backgroundColor:bg/bgColor,backgroundOrigin:bg-origin/bgOrigin,backgroundImage:bg-img/bgImage,backgroundRepeat:bg-repeat/bgRepeat,backgroundBlendMode:bg-blend/bgBlendMode,backgroundSize:bg/bgSize,backgroundGradient:bg-gradient/bgGradient,textGradient:text-gradient,gradientFrom:from,gradientTo:to,gradientVia:via,borderRadius:rounded/1,borderTopLeftRadius:rounded-tl/roundedTopLeft,borderTopRightRadius:rounded-tr/roundedTopRight,borderBottomRightRadius:rounded-br/roundedBottomRight,borderBottomLeftRadius:rounded-bl/roundedBottomLeft,borderTopRadius:rounded-t/roundedTop,borderRightRadius:rounded-r/roundedRight,borderBottomRadius:rounded-b/roundedBottom,borderLeftRadius:rounded-l/roundedLeft,borderStartStartRadius:rounded-ss/roundedStartStart,borderStartEndRadius:rounded-se/roundedStartEnd,borderStartRadius:rounded-s/roundedStart,borderEndStartRadius:rounded-es/roundedEndStart,borderEndEndRadius:rounded-ee/roundedEndEnd,borderEndRadius:rounded-e/roundedEnd,border:border,borderColor:border,borderInline:border-x/borderX,borderInlineWidth:border-x/borderXWidth,borderInlineColor:border-x/borderXColor,borderBlock:border-y/borderY,borderBlockWidth:border-y/borderYWidth,borderBlockColor:border-y/borderYColor,borderLeft:border-l,borderLeftColor:border-l,borderInlineStart:border-s/borderStart,borderInlineStartWidth:border-s/borderStartWidth,borderInlineStartColor:border-s/borderStartColor,borderRight:border-r,borderRightColor:border-r,borderInlineEnd:border-e/borderEnd,borderInlineEndWidth:border-e/borderEndWidth,borderInlineEndColor:border-e/borderEndColor,borderTop:border-t,borderTopColor:border-t,borderBottom:border-b,borderBottomColor:border-b,borderBlockEnd:border-be,borderBlockEndColor:border-be,borderBlockStart:border-bs,borderBlockStartColor:border-bs,boxShadow:shadow/1,boxShadowColor:shadow/shadowColor,mixBlendMode:mix-blend,filter:filter,brightness:brightness,contrast:contrast,grayscale:grayscale,hueRotate:hue-rotate,invert:invert,saturate:saturate,sepia:sepia,dropShadow:drop-shadow,blur:blur,backdropFilter:backdrop,backdropBlur:backdrop-blur,backdropBrightness:backdrop-brightness,backdropContrast:backdrop-contrast,backdropGrayscale:backdrop-grayscale,backdropHueRotate:backdrop-hue-rotate,backdropInvert:backdrop-invert,backdropOpacity:backdrop-opacity,backdropSaturate:backdrop-saturate,backdropSepia:backdrop-sepia,borderCollapse:border,borderSpacing:border-spacing,borderSpacingX:border-spacing-x,borderSpacingY:border-spacing-y,tableLayout:table,transitionTimingFunction:ease,transitionDelay:delay,transitionDuration:duration,transitionProperty:transition-prop,transition:transition,animation:animation,animationName:animation-name,animationDelay:animation-delay,transformOrigin:origin,scale:scale,scaleX:scale-x,scaleY:scale-y,translate:translate,translateX:translate-x/x,translateY:translate-y/y,accentColor:accent,caretColor:caret,scrollBehavior:scroll,scrollbar:scrollbar,scrollMargin:scroll-m,scrollMarginX:scroll-mx,scrollMarginY:scroll-my,scrollMarginLeft:scroll-ml,scrollMarginRight:scroll-mr,scrollMarginTop:scroll-mt,scrollMarginBottom:scroll-mb,scrollMarginBlock:scroll-my,scrollMarginBlockEnd:scroll-mb,scrollMarginBlockStart:scroll-mt,scrollMarginInline:scroll-mx,scrollMarginInlineEnd:scroll-me,scrollMarginInlineStart:scroll-ms,scrollPadding:scroll-p,scrollPaddingBlock:scroll-pb,scrollPaddingBlockStart:scroll-pt,scrollPaddingBlockEnd:scroll-pb,scrollPaddingInline:scroll-px,scrollPaddingInlineEnd:scroll-pe,scrollPaddingInlineStart:scroll-ps,scrollPaddingX:scroll-px,scrollPaddingY:scroll-py,scrollPaddingLeft:scroll-pl,scrollPaddingRight:scroll-pr,scrollPaddingTop:scroll-pt,scrollPaddingBottom:scroll-pb,scrollSnapAlign:snap,scrollSnapStop:snap,scrollSnapType:snap,scrollSnapStrictness:strictness,scrollSnapMargin:snap-m,scrollSnapMarginTop:snap-mt,scrollSnapMarginBottom:snap-mb,scrollSnapMarginLeft:snap-ml,scrollSnapMarginRight:snap-mr,touchAction:touch,userSelect:select,fill:fill,stroke:stroke,srOnly:sr,debug:debug,appearance:appearance,backfaceVisibility:backface,clipPath:clip-path,hyphens:hyphens,mask:mask,maskImage:mask-image,maskSize:mask-size,textSizeAdjust:text-size-adjust,textStyle:textStyle" + +const classNameByProp = new Map() +const shorthands = new Map() +utilities.split(',').forEach((utility) => { + const [prop, meta] = utility.split(':') + const [className, ...shorthandList] = meta.split('/') + classNameByProp.set(prop, className) + if (shorthandList.length) { + shorthandList.forEach((shorthand) => { + shorthands.set(shorthand === '1' ? className : shorthand, prop) + }) + } +}) + +const resolveShorthand = (prop) => shorthands.get(prop) || prop + +const context = { + + conditions: { + shift: sortConditions, + finalize: finalizeConditions, + breakpoints: { keys: ["base","sm","md","lg","xl","2xl"] } + }, + utility: { + + transform: (prop, value) => { + const key = resolveShorthand(prop) + const propKey = classNameByProp.get(key) || hypenateProperty(key) + return { className: `${propKey}_${withoutSpace(value)}` } + }, + hasShorthand: true, + resolveShorthand: resolveShorthand, + } +} + +const cssFn = createCss(context) +export const css = (...styles) => cssFn(mergeCss(...styles)) +css.raw = (...styles) => mergeCss(...styles) + +export const { mergeCss, assignCss } = createMergeCss(context) \ No newline at end of file diff --git a/src/styled-system/css/cva.d.ts b/src/styled-system/css/cva.d.ts new file mode 100644 index 00000000..11900bfb --- /dev/null +++ b/src/styled-system/css/cva.d.ts @@ -0,0 +1,6 @@ +/* eslint-disable */ +import type { RecipeCreatorFn } from '../types/recipe'; + +export declare const cva: RecipeCreatorFn + +export type { RecipeVariantProps } from '../types/recipe'; \ No newline at end of file diff --git a/src/styled-system/css/cva.mjs b/src/styled-system/css/cva.mjs new file mode 100644 index 00000000..d47b3d30 --- /dev/null +++ b/src/styled-system/css/cva.mjs @@ -0,0 +1,85 @@ +import { compact, mergeProps, splitProps, uniq } from '../helpers.mjs'; +import { css, mergeCss } from './css.mjs'; + +const defaults = (conf) => ({ + base: {}, + variants: {}, + defaultVariants: {}, + compoundVariants: [], + ...conf, +}) + +export function cva(config) { + const { base, variants, defaultVariants, compoundVariants } = defaults(config) + + function resolve(props = {}) { + const computedVariants = { ...defaultVariants, ...compact(props) } + let variantCss = { ...base } + for (const [key, value] of Object.entries(computedVariants)) { + if (variants[key]?.[value]) { + variantCss = mergeCss(variantCss, variants[key][value]) + } + } + const compoundVariantCss = getCompoundVariantCss(compoundVariants, computedVariants) + return mergeCss(variantCss, compoundVariantCss) + } + + function merge(__cva) { + const override = defaults(__cva.config) + const variantKeys = uniq(__cva.variantKeys, Object.keys(variants)) + return cva({ + base: mergeCss(base, override.base), + variants: Object.fromEntries( + variantKeys.map((key) => [key, mergeCss(variants[key], override.variants[key])]), + ), + defaultVariants: mergeProps(defaultVariants, override.defaultVariants), + compoundVariants: [...compoundVariants, ...override.compoundVariants], + }) + } + + function cvaFn(props) { + return css(resolve(props)) + } + + const variantKeys = Object.keys(variants) + + function splitVariantProps(props) { + return splitProps(props, variantKeys) + } + + const variantMap = Object.fromEntries(Object.entries(variants).map(([key, value]) => [key, Object.keys(value)])) + + return Object.assign(cvaFn, { + __cva__: true, + variantMap, + variantKeys, + raw: resolve, + config, + merge, + splitVariantProps, + }) +} + +export function getCompoundVariantCss(compoundVariants, variantMap) { + let result = {} + compoundVariants.forEach((compoundVariant) => { + const isMatching = Object.entries(compoundVariant).every(([key, value]) => { + if (key === 'css') return true + + const values = Array.isArray(value) ? value : [value] + return values.some((value) => variantMap[key] === value) + }) + + if (isMatching) { + result = mergeCss(result, compoundVariant.css) + } + }) + + return result +} + +export function assertCompoundVariant(name, compoundVariants, variants, prop) { + if (compoundVariants.length > 0 && typeof variants?.[prop] === 'object') { + throw new Error(`[recipe:${name}:${prop}] Conditions are not supported when using compound variants.`) + } +} diff --git a/src/styled-system/css/cx.d.ts b/src/styled-system/css/cx.d.ts new file mode 100644 index 00000000..892c90ca --- /dev/null +++ b/src/styled-system/css/cx.d.ts @@ -0,0 +1,5 @@ +/* eslint-disable */ +type Argument = string | boolean | null | undefined + +/** Conditionally join classNames into a single string */ +export declare function cx(...args: Argument[]): string \ No newline at end of file diff --git a/src/styled-system/css/cx.mjs b/src/styled-system/css/cx.mjs new file mode 100644 index 00000000..81bbdae3 --- /dev/null +++ b/src/styled-system/css/cx.mjs @@ -0,0 +1,15 @@ +function cx() { + let str = '', + i = 0, + arg + + for (; i < arguments.length; ) { + if ((arg = arguments[i++]) && typeof arg === 'string') { + str && (str += ' ') + str += arg + } + } + return str +} + +export { cx } \ No newline at end of file diff --git a/src/styled-system/css/index.d.ts b/src/styled-system/css/index.d.ts new file mode 100644 index 00000000..50a581d8 --- /dev/null +++ b/src/styled-system/css/index.d.ts @@ -0,0 +1,5 @@ +/* eslint-disable */ +export * from './css'; +export * from './cx'; +export * from './cva'; +export * from './sva'; \ No newline at end of file diff --git a/src/styled-system/css/index.mjs b/src/styled-system/css/index.mjs new file mode 100644 index 00000000..f2392bd6 --- /dev/null +++ b/src/styled-system/css/index.mjs @@ -0,0 +1,4 @@ +export * from './css.mjs'; +export * from './cx.mjs'; +export * from './cva.mjs'; +export * from './sva.mjs'; \ No newline at end of file diff --git a/src/styled-system/css/sva.d.ts b/src/styled-system/css/sva.d.ts new file mode 100644 index 00000000..f97c42a3 --- /dev/null +++ b/src/styled-system/css/sva.d.ts @@ -0,0 +1,4 @@ +/* eslint-disable */ +import type { SlotRecipeCreatorFn } from '../types/recipe'; + +export declare const sva: SlotRecipeCreatorFn \ No newline at end of file diff --git a/src/styled-system/css/sva.mjs b/src/styled-system/css/sva.mjs new file mode 100644 index 00000000..de73cac8 --- /dev/null +++ b/src/styled-system/css/sva.mjs @@ -0,0 +1,35 @@ +import { getSlotRecipes, splitProps } from '../helpers.mjs'; +import { cva } from './cva.mjs'; + +export function sva(config) { + const slots = Object.entries(getSlotRecipes(config)).map(([slot, slotCva]) => [slot, cva(slotCva)]) + + function svaFn(props) { + const result = slots.map(([slot, cvaFn]) => [slot, cvaFn(props)]) + return Object.fromEntries(result) + } + + function raw(props) { + const result = slots.map(([slot, cvaFn]) => [slot, cvaFn.raw(props)]) + return Object.fromEntries(result) + } + + const variants = config.variants ?? {}; + const variantKeys = Object.keys(variants); + + function splitVariantProps(props) { + return splitProps(props, variantKeys); + } + + const variantMap = Object.fromEntries( + Object.entries(variants).map(([key, value]) => [key, Object.keys(value)]) + ); + + return Object.assign(svaFn, { + __cva__: false, + raw, + variantMap, + variantKeys, + splitVariantProps, + }) +} \ No newline at end of file diff --git a/src/styled-system/global.css b/src/styled-system/global.css new file mode 100644 index 00000000..0fab647e --- /dev/null +++ b/src/styled-system/global.css @@ -0,0 +1,36 @@ +@layer base { + :root { + --made-with-panda: '🐼' + } + + *, *::before, *::after, ::backdrop { + --blur: ; + --brightness: ; + --contrast: ; + --grayscale: ; + --hue-rotate: ; + --invert: ; + --saturate: ; + --sepia: ; + --drop-shadow: ; + --backdrop-blur: ; + --backdrop-brightness: ; + --backdrop-contrast: ; + --backdrop-grayscale: ; + --backdrop-hue-rotate: ; + --backdrop-invert: ; + --backdrop-opacity: ; + --backdrop-saturate: ; + --backdrop-sepia: ; + --scroll-snap-strictness: proximity; + --border-spacing-x: 0; + --border-spacing-y: 0; + --translate-x: 0; + --translate-y: 0; + --rotate: 0; + --skew-x: 0; + --skew-y: 0; + --scale-x: 1; + --scale-y: 1 + } +} \ No newline at end of file diff --git a/src/styled-system/helpers.mjs b/src/styled-system/helpers.mjs new file mode 100644 index 00000000..6d182647 --- /dev/null +++ b/src/styled-system/helpers.mjs @@ -0,0 +1,300 @@ +// src/assert.ts +function isObject(value) { + return typeof value === "object" && value != null && !Array.isArray(value); +} + +// src/compact.ts +function compact(value) { + return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0)); +} + +// src/condition.ts +var isBaseCondition = (v) => v === "base"; +function filterBaseConditions(c) { + return c.slice().filter((v) => !isBaseCondition(v)); +} + +// src/css-important.ts +var importantRegex = /!(important)?$/; +function isImportant(value) { + return typeof value === "string" ? importantRegex.test(value) : false; +} +function withoutImportant(value) { + return typeof value === "string" ? value.replace(importantRegex, "").trim() : value; +} +function withoutSpace(str) { + return typeof str === "string" ? str.replaceAll(" ", "_") : str; +} + +// src/hash.ts +function toChar(code) { + return String.fromCharCode(code + (code > 25 ? 39 : 97)); +} +function toName(code) { + let name = ""; + let x; + for (x = Math.abs(code); x > 52; x = x / 52 | 0) + name = toChar(x % 52) + name; + return toChar(x % 52) + name; +} +function toPhash(h, x) { + let i = x.length; + while (i) + h = h * 33 ^ x.charCodeAt(--i); + return h; +} +function toHash(value) { + return toName(toPhash(5381, value) >>> 0); +} + +// src/merge-props.ts +function mergeProps(...sources) { + const objects = sources.filter(Boolean); + return objects.reduce((prev, obj) => { + Object.keys(obj).forEach((key) => { + const prevValue = prev[key]; + const value = obj[key]; + if (isObject(prevValue) && isObject(value)) { + prev[key] = mergeProps(prevValue, value); + } else { + prev[key] = value; + } + }); + return prev; + }, {}); +} + +// src/walk-object.ts +var isNotNullish = (element) => element != null; +function walkObject(target, predicate, options = {}) { + const { stop, getKey } = options; + function inner(value, path = []) { + if (isObject(value) || Array.isArray(value)) { + const result = {}; + for (const [prop, child] of Object.entries(value)) { + const key = getKey?.(prop) ?? prop; + const childPath = [...path, key]; + if (stop?.(value, childPath)) { + return predicate(value, path); + } + const next = inner(child, childPath); + if (isNotNullish(next)) { + result[key] = next; + } + } + return result; + } + return predicate(value, path); + } + return inner(target); +} +function mapObject(obj, fn) { + if (!isObject(obj)) + return fn(obj); + return walkObject(obj, (value) => fn(value)); +} + +// src/normalize-style-object.ts +function toResponsiveObject(values, breakpoints) { + return values.reduce((acc, current, index) => { + const key = breakpoints[index]; + if (current != null) { + acc[key] = current; + } + return acc; + }, {}); +} +function normalizeShorthand(styles, context) { + const { hasShorthand, resolveShorthand } = context.utility; + return walkObject(styles, (v) => v, { + getKey: (prop) => { + return hasShorthand ? resolveShorthand(prop) : prop; + } + }); +} +function normalizeStyleObject(styles, context) { + const { utility, conditions } = context; + const { hasShorthand, resolveShorthand } = utility; + return walkObject( + styles, + (value) => { + return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value; + }, + { + stop: (value) => Array.isArray(value), + getKey: (prop) => { + return hasShorthand ? resolveShorthand(prop) : prop; + } + } + ); +} + +// src/classname.ts +var fallbackCondition = { + shift: (v) => v, + finalize: (v) => v, + breakpoints: { keys: [] } +}; +var sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\n\s]+/g, " ") : value; +function createCss(context) { + const { utility, hash, conditions: conds = fallbackCondition } = context; + const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-"); + const hashFn = (conditions, className) => { + let result; + if (hash) { + const baseArray = [...conds.finalize(conditions), className]; + result = formatClassName(toHash(baseArray.join(":"))); + } else { + const baseArray = [...conds.finalize(conditions), formatClassName(className)]; + result = baseArray.join(":"); + } + return result; + }; + return (styleObject = {}) => { + const normalizedObject = normalizeStyleObject(styleObject, context); + const classNames = /* @__PURE__ */ new Set(); + walkObject(normalizedObject, (value, paths) => { + const important = isImportant(value); + if (value == null) + return; + const [prop, ...allConditions] = conds.shift(paths); + const conditions = filterBaseConditions(allConditions); + const transformed = utility.transform(prop, withoutImportant(sanitize(value))); + let className = hashFn(conditions, transformed.className); + if (important) + className = `${className}!`; + classNames.add(className); + }); + return Array.from(classNames).join(" "); + }; +} +function compactStyles(...styles) { + return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0); +} +function createMergeCss(context) { + function resolve(styles) { + const allStyles = compactStyles(...styles); + if (allStyles.length === 1) + return allStyles; + return allStyles.map((style) => normalizeShorthand(style, context)); + } + function mergeCss(...styles) { + return mergeProps(...resolve(styles)); + } + function assignCss(...styles) { + return Object.assign({}, ...resolve(styles)); + } + return { mergeCss, assignCss }; +} + +// src/memo.ts +var memo = (fn) => { + const cache = /* @__PURE__ */ new Map(); + const get = (...args) => { + const key = JSON.stringify(args); + if (cache.has(key)) { + return cache.get(key); + } + const result = fn(...args); + cache.set(key, result); + return result; + }; + return get; +}; + +// src/hypenate-property.ts +var wordRegex = /([A-Z])/g; +var msRegex = /^ms-/; +var hypenateProperty = memo((property) => { + if (property.startsWith("--")) + return property; + return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase(); +}); + +// src/slot.ts +var getSlotRecipes = (recipe = {}) => { + const init = (slot) => ({ + className: [recipe.className, slot].filter(Boolean).join("__"), + base: recipe.base?.[slot] ?? {}, + variants: {}, + defaultVariants: recipe.defaultVariants ?? {}, + compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : [] + }); + const slots = recipe.slots ?? []; + const recipeParts = slots.map((slot) => [slot, init(slot)]); + for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) { + for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) { + recipeParts.forEach(([slot, slotRecipe]) => { + slotRecipe.variants[variantsKey] ??= {}; + slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {}; + }); + } + } + return Object.fromEntries(recipeParts); +}; +var getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] })); + +// src/split-props.ts +function splitProps(props, ...keys) { + const descriptors = Object.getOwnPropertyDescriptors(props); + const dKeys = Object.keys(descriptors); + const split = (k) => { + const clone = {}; + for (let i = 0; i < k.length; i++) { + const key = k[i]; + if (descriptors[key]) { + Object.defineProperty(clone, key, descriptors[key]); + delete descriptors[key]; + } + } + return clone; + }; + const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key)); + return keys.map(fn).concat(split(dKeys)); +} + +// src/uniq.ts +var uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), []); +export { + compact, + createCss, + createMergeCss, + filterBaseConditions, + getSlotCompoundVariant, + getSlotRecipes, + hypenateProperty, + isBaseCondition, + isObject, + mapObject, + memo, + mergeProps, + splitProps, + toHash, + uniq, + walkObject, + withoutSpace +}; + + + +// src/normalize-html.ts +var htmlProps = ["htmlSize", "htmlTranslate", "htmlWidth", "htmlHeight"]; +function convert(key) { + return htmlProps.includes(key) ? key.replace("html", "").toLowerCase() : key; +} +function normalizeHTMLProps(props) { + return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value])); +} +normalizeHTMLProps.keys = htmlProps; +export { + normalizeHTMLProps +}; + + +export function __spreadValues(a, b) { + return { ...a, ...b } +} + +export function __objRest(source, exclude) { + return Object.fromEntries(Object.entries(source).filter(([key]) => !exclude.includes(key))) +} \ No newline at end of file diff --git a/src/styled-system/jsx/aspect-ratio.d.ts b/src/styled-system/jsx/aspect-ratio.d.ts new file mode 100644 index 00000000..c057d1a5 --- /dev/null +++ b/src/styled-system/jsx/aspect-ratio.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { AspectRatioProperties } from '../patterns/aspect-ratio'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface AspectRatioProps extends AspectRatioProperties, DistributiveOmit, keyof AspectRatioProperties | 'aspectRatio'> {} + + +export declare const AspectRatio: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/aspect-ratio.mjs b/src/styled-system/jsx/aspect-ratio.mjs new file mode 100644 index 00000000..37136302 --- /dev/null +++ b/src/styled-system/jsx/aspect-ratio.mjs @@ -0,0 +1,9 @@ +import { createElement, forwardRef } from 'react' +import { styled } from './factory.mjs'; +import { getAspectRatioStyle } from '../patterns/aspect-ratio.mjs'; + +export const AspectRatio = /* @__PURE__ */ forwardRef(function AspectRatio(props, ref) { + const { ratio, ...restProps } = props +const styleProps = getAspectRatioStyle({ratio}) +return createElement(styled.div, { ref, ...styleProps, ...restProps }) +}) \ No newline at end of file diff --git a/src/styled-system/jsx/bleed.d.ts b/src/styled-system/jsx/bleed.d.ts new file mode 100644 index 00000000..9eca5993 --- /dev/null +++ b/src/styled-system/jsx/bleed.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { BleedProperties } from '../patterns/bleed'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface BleedProps extends BleedProperties, DistributiveOmit, keyof BleedProperties > {} + + +export declare const Bleed: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/bleed.mjs b/src/styled-system/jsx/bleed.mjs new file mode 100644 index 00000000..fa6db884 --- /dev/null +++ b/src/styled-system/jsx/bleed.mjs @@ -0,0 +1,9 @@ +import { createElement, forwardRef } from 'react' +import { styled } from './factory.mjs'; +import { getBleedStyle } from '../patterns/bleed.mjs'; + +export const Bleed = /* @__PURE__ */ forwardRef(function Bleed(props, ref) { + const { inline, block, ...restProps } = props +const styleProps = getBleedStyle({inline, block}) +return createElement(styled.div, { ref, ...styleProps, ...restProps }) +}) \ No newline at end of file diff --git a/src/styled-system/jsx/box.d.ts b/src/styled-system/jsx/box.d.ts new file mode 100644 index 00000000..958962df --- /dev/null +++ b/src/styled-system/jsx/box.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { BoxProperties } from '../patterns/box'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface BoxProps extends BoxProperties, DistributiveOmit, keyof BoxProperties > {} + + +export declare const Box: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/box.mjs b/src/styled-system/jsx/box.mjs new file mode 100644 index 00000000..0fd37a11 --- /dev/null +++ b/src/styled-system/jsx/box.mjs @@ -0,0 +1,8 @@ +import { createElement, forwardRef } from 'react' +import { styled } from './factory.mjs'; +import { getBoxStyle } from '../patterns/box.mjs'; + +export const Box = /* @__PURE__ */ forwardRef(function Box(props, ref) { + const styleProps = getBoxStyle() +return createElement(styled.div, { ref, ...styleProps, ...props }) +}) \ No newline at end of file diff --git a/src/styled-system/jsx/center.d.ts b/src/styled-system/jsx/center.d.ts new file mode 100644 index 00000000..fd6d6152 --- /dev/null +++ b/src/styled-system/jsx/center.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { CenterProperties } from '../patterns/center'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface CenterProps extends CenterProperties, DistributiveOmit, keyof CenterProperties > {} + + +export declare const Center: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/center.mjs b/src/styled-system/jsx/center.mjs new file mode 100644 index 00000000..23b035d4 --- /dev/null +++ b/src/styled-system/jsx/center.mjs @@ -0,0 +1,9 @@ +import { createElement, forwardRef } from 'react' +import { styled } from './factory.mjs'; +import { getCenterStyle } from '../patterns/center.mjs'; + +export const Center = /* @__PURE__ */ forwardRef(function Center(props, ref) { + const { inline, ...restProps } = props +const styleProps = getCenterStyle({inline}) +return createElement(styled.div, { ref, ...styleProps, ...restProps }) +}) \ No newline at end of file diff --git a/src/styled-system/jsx/circle.d.ts b/src/styled-system/jsx/circle.d.ts new file mode 100644 index 00000000..3afa95f6 --- /dev/null +++ b/src/styled-system/jsx/circle.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { CircleProperties } from '../patterns/circle'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface CircleProps extends CircleProperties, DistributiveOmit, keyof CircleProperties > {} + + +export declare const Circle: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/circle.mjs b/src/styled-system/jsx/circle.mjs new file mode 100644 index 00000000..67e4baa8 --- /dev/null +++ b/src/styled-system/jsx/circle.mjs @@ -0,0 +1,9 @@ +import { createElement, forwardRef } from 'react' +import { styled } from './factory.mjs'; +import { getCircleStyle } from '../patterns/circle.mjs'; + +export const Circle = /* @__PURE__ */ forwardRef(function Circle(props, ref) { + const { size, ...restProps } = props +const styleProps = getCircleStyle({size}) +return createElement(styled.div, { ref, ...styleProps, ...restProps }) +}) \ No newline at end of file diff --git a/src/styled-system/jsx/container.d.ts b/src/styled-system/jsx/container.d.ts new file mode 100644 index 00000000..10b9df22 --- /dev/null +++ b/src/styled-system/jsx/container.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { ContainerProperties } from '../patterns/container'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface ContainerProps extends ContainerProperties, DistributiveOmit, keyof ContainerProperties > {} + + +export declare const Container: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/container.mjs b/src/styled-system/jsx/container.mjs new file mode 100644 index 00000000..58cc1d64 --- /dev/null +++ b/src/styled-system/jsx/container.mjs @@ -0,0 +1,8 @@ +import { createElement, forwardRef } from 'react' +import { styled } from './factory.mjs'; +import { getContainerStyle } from '../patterns/container.mjs'; + +export const Container = /* @__PURE__ */ forwardRef(function Container(props, ref) { + const styleProps = getContainerStyle() +return createElement(styled.div, { ref, ...styleProps, ...props }) +}) \ No newline at end of file diff --git a/src/styled-system/jsx/divider.d.ts b/src/styled-system/jsx/divider.d.ts new file mode 100644 index 00000000..110d8c01 --- /dev/null +++ b/src/styled-system/jsx/divider.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { DividerProperties } from '../patterns/divider'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface DividerProps extends DividerProperties, DistributiveOmit, keyof DividerProperties > {} + + +export declare const Divider: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/divider.mjs b/src/styled-system/jsx/divider.mjs new file mode 100644 index 00000000..5804ed26 --- /dev/null +++ b/src/styled-system/jsx/divider.mjs @@ -0,0 +1,9 @@ +import { createElement, forwardRef } from 'react' +import { styled } from './factory.mjs'; +import { getDividerStyle } from '../patterns/divider.mjs'; + +export const Divider = /* @__PURE__ */ forwardRef(function Divider(props, ref) { + const { orientation, thickness, color, ...restProps } = props +const styleProps = getDividerStyle({orientation, thickness, color}) +return createElement(styled.div, { ref, ...styleProps, ...restProps }) +}) \ No newline at end of file diff --git a/src/styled-system/jsx/factory-helper.mjs b/src/styled-system/jsx/factory-helper.mjs new file mode 100644 index 00000000..52605e98 --- /dev/null +++ b/src/styled-system/jsx/factory-helper.mjs @@ -0,0 +1,22 @@ +import { isCssProperty } from './is-valid-prop.mjs'; + +export const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop) + +export const composeShouldForwardProps = (tag, shouldForwardProp) => + tag.__shouldForwardProps__ && shouldForwardProp + ? (propName) => tag.__shouldForwardProps__(propName) && shouldForwardProp(propName) + : shouldForwardProp + +export const composeCvaFn = (cvaA, cvaB) => { + if (cvaA && !cvaB) return cvaA + if (!cvaA && cvaB) return cvaB + if ((cvaA.__cva__ && cvaB.__cva__) || (cvaA.__recipe__ && cvaB.__recipe__)) return cvaA.merge(cvaB) + const error = new TypeError('Cannot merge cva with recipe. Please use either cva or recipe.') + TypeError.captureStackTrace?.(error) + throw error +} + +export const getDisplayName = (Component) => { + if (typeof Component === 'string') return Component + return Component?.displayName || Component?.name || 'Component' +} \ No newline at end of file diff --git a/src/styled-system/jsx/factory.d.ts b/src/styled-system/jsx/factory.d.ts new file mode 100644 index 00000000..875a0fba --- /dev/null +++ b/src/styled-system/jsx/factory.d.ts @@ -0,0 +1,3 @@ +/* eslint-disable */ +import type { Styled } from '../types/jsx'; +export declare const styled: Styled \ No newline at end of file diff --git a/src/styled-system/jsx/factory.mjs b/src/styled-system/jsx/factory.mjs new file mode 100644 index 00000000..acf073cb --- /dev/null +++ b/src/styled-system/jsx/factory.mjs @@ -0,0 +1,80 @@ +import { createElement, forwardRef, useMemo } from 'react' +import { css, cx, cva } from '../css/index.mjs'; +import { defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName } from './factory-helper.mjs'; +import { splitProps, normalizeHTMLProps } from '../helpers.mjs'; +import { isCssProperty } from './is-valid-prop.mjs'; + +function styledFn(Dynamic, configOrCva = {}, options = {}) { + const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva) + + const forwardFn = options.shouldForwardProp || defaultShouldForwardProp + const shouldForwardProp = (prop) => forwardFn(prop, cvaFn.variantKeys) + + const defaultProps = Object.assign( + options.dataAttr && configOrCva.__name__ ? { 'data-recipe': configOrCva.__name__ } : {}, + options.defaultProps, + ) + + const StyledComponent = /* @__PURE__ */ forwardRef(function StyledComponent(props, ref) { + const { as: Element = Dynamic.__base__ || Dynamic, children, ...restProps } = props + + const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn) + const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp) + + const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps]) + + const [htmlProps, forwardedProps, variantProps, styleProps, elementProps] = useMemo(() => { + return splitProps(combinedProps, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty) + }, [combinedProps]) + + function recipeClass() { + const { css: cssStyles, ...propStyles } = styleProps + const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps) + return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.className) + } + + function cvaClass() { + const { css: cssStyles, ...propStyles } = styleProps + const cvaStyles = __cvaFn__.raw(variantProps) + return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.className) + } + + const classes = configOrCva.__recipe__ ? recipeClass : cvaClass + + return createElement(Element, { + ref, + ...forwardedProps, + ...elementProps, + ...normalizeHTMLProps(htmlProps), + children, + className: classes(), + }) + }) + + const name = getDisplayName(Dynamic) + + StyledComponent.displayName = `styled.${name}` + StyledComponent.__cva__ = cvaFn + StyledComponent.__base__ = Dynamic + StyledComponent.__shouldForwardProps__ = shouldForwardProp + + return StyledComponent +} + +function createJsxFactory() { + const cache = new Map() + + return new Proxy(styledFn, { + apply(_, __, args) { + return styledFn(...args) + }, + get(_, el) { + if (!cache.has(el)) { + cache.set(el, styledFn(el)) + } + return cache.get(el) + }, + }) +} + +export const styled = /* @__PURE__ */ createJsxFactory() diff --git a/src/styled-system/jsx/flex.d.ts b/src/styled-system/jsx/flex.d.ts new file mode 100644 index 00000000..8165d5a7 --- /dev/null +++ b/src/styled-system/jsx/flex.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { FlexProperties } from '../patterns/flex'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface FlexProps extends FlexProperties, DistributiveOmit, keyof FlexProperties > {} + + +export declare const Flex: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/flex.mjs b/src/styled-system/jsx/flex.mjs new file mode 100644 index 00000000..56acad14 --- /dev/null +++ b/src/styled-system/jsx/flex.mjs @@ -0,0 +1,9 @@ +import { createElement, forwardRef } from 'react' +import { styled } from './factory.mjs'; +import { getFlexStyle } from '../patterns/flex.mjs'; + +export const Flex = /* @__PURE__ */ forwardRef(function Flex(props, ref) { + const { align, justify, direction, wrap, basis, grow, shrink, ...restProps } = props +const styleProps = getFlexStyle({align, justify, direction, wrap, basis, grow, shrink}) +return createElement(styled.div, { ref, ...styleProps, ...restProps }) +}) \ No newline at end of file diff --git a/src/styled-system/jsx/float.d.ts b/src/styled-system/jsx/float.d.ts new file mode 100644 index 00000000..217a44cd --- /dev/null +++ b/src/styled-system/jsx/float.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { FloatProperties } from '../patterns/float'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface FloatProps extends FloatProperties, DistributiveOmit, keyof FloatProperties > {} + + +export declare const Float: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/float.mjs b/src/styled-system/jsx/float.mjs new file mode 100644 index 00000000..e4c8f99f --- /dev/null +++ b/src/styled-system/jsx/float.mjs @@ -0,0 +1,9 @@ +import { createElement, forwardRef } from 'react' +import { styled } from './factory.mjs'; +import { getFloatStyle } from '../patterns/float.mjs'; + +export const Float = /* @__PURE__ */ forwardRef(function Float(props, ref) { + const { offsetX, offsetY, offset, placement, ...restProps } = props +const styleProps = getFloatStyle({offsetX, offsetY, offset, placement}) +return createElement(styled.div, { ref, ...styleProps, ...restProps }) +}) \ No newline at end of file diff --git a/src/styled-system/jsx/grid-item.d.ts b/src/styled-system/jsx/grid-item.d.ts new file mode 100644 index 00000000..37130511 --- /dev/null +++ b/src/styled-system/jsx/grid-item.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { GridItemProperties } from '../patterns/grid-item'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface GridItemProps extends GridItemProperties, DistributiveOmit, keyof GridItemProperties > {} + + +export declare const GridItem: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/grid-item.mjs b/src/styled-system/jsx/grid-item.mjs new file mode 100644 index 00000000..c6ac69cb --- /dev/null +++ b/src/styled-system/jsx/grid-item.mjs @@ -0,0 +1,9 @@ +import { createElement, forwardRef } from 'react' +import { styled } from './factory.mjs'; +import { getGridItemStyle } from '../patterns/grid-item.mjs'; + +export const GridItem = /* @__PURE__ */ forwardRef(function GridItem(props, ref) { + const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...restProps } = props +const styleProps = getGridItemStyle({colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd}) +return createElement(styled.div, { ref, ...styleProps, ...restProps }) +}) \ No newline at end of file diff --git a/src/styled-system/jsx/grid.d.ts b/src/styled-system/jsx/grid.d.ts new file mode 100644 index 00000000..760569c4 --- /dev/null +++ b/src/styled-system/jsx/grid.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { GridProperties } from '../patterns/grid'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface GridProps extends GridProperties, DistributiveOmit, keyof GridProperties > {} + + +export declare const Grid: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/grid.mjs b/src/styled-system/jsx/grid.mjs new file mode 100644 index 00000000..35095c08 --- /dev/null +++ b/src/styled-system/jsx/grid.mjs @@ -0,0 +1,9 @@ +import { createElement, forwardRef } from 'react' +import { styled } from './factory.mjs'; +import { getGridStyle } from '../patterns/grid.mjs'; + +export const Grid = /* @__PURE__ */ forwardRef(function Grid(props, ref) { + const { gap, columnGap, rowGap, columns, minChildWidth, ...restProps } = props +const styleProps = getGridStyle({gap, columnGap, rowGap, columns, minChildWidth}) +return createElement(styled.div, { ref, ...styleProps, ...restProps }) +}) \ No newline at end of file diff --git a/src/styled-system/jsx/hstack.d.ts b/src/styled-system/jsx/hstack.d.ts new file mode 100644 index 00000000..9cd06b0e --- /dev/null +++ b/src/styled-system/jsx/hstack.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { HstackProperties } from '../patterns/hstack'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface HstackProps extends HstackProperties, DistributiveOmit, keyof HstackProperties > {} + + +export declare const HStack: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/hstack.mjs b/src/styled-system/jsx/hstack.mjs new file mode 100644 index 00000000..30732f07 --- /dev/null +++ b/src/styled-system/jsx/hstack.mjs @@ -0,0 +1,9 @@ +import { createElement, forwardRef } from 'react' +import { styled } from './factory.mjs'; +import { getHstackStyle } from '../patterns/hstack.mjs'; + +export const HStack = /* @__PURE__ */ forwardRef(function HStack(props, ref) { + const { justify, gap, ...restProps } = props +const styleProps = getHstackStyle({justify, gap}) +return createElement(styled.div, { ref, ...styleProps, ...restProps }) +}) \ No newline at end of file diff --git a/src/styled-system/jsx/index.d.ts b/src/styled-system/jsx/index.d.ts new file mode 100644 index 00000000..83ef6690 --- /dev/null +++ b/src/styled-system/jsx/index.d.ts @@ -0,0 +1,27 @@ +/* eslint-disable */ +export * from './factory'; + +export * from './is-valid-prop'; + +export * from './box'; +export * from './flex'; +export * from './stack'; +export * from './vstack'; +export * from './hstack'; +export * from './spacer'; +export * from './square'; +export * from './circle'; +export * from './center'; +export * from './link-box'; +export * from './link-overlay'; +export * from './aspect-ratio'; +export * from './grid'; +export * from './grid-item'; +export * from './wrap'; +export * from './container'; +export * from './divider'; +export * from './float'; +export * from './bleed'; +export * from './visually-hidden'; + +export type { HTMLStyledProps, StyledComponent } from '../types/jsx'; \ No newline at end of file diff --git a/src/styled-system/jsx/index.mjs b/src/styled-system/jsx/index.mjs new file mode 100644 index 00000000..a0839613 --- /dev/null +++ b/src/styled-system/jsx/index.mjs @@ -0,0 +1,22 @@ +export * from './factory.mjs'; +export * from './is-valid-prop.mjs'; +export * from './box.mjs'; +export * from './flex.mjs'; +export * from './stack.mjs'; +export * from './vstack.mjs'; +export * from './hstack.mjs'; +export * from './spacer.mjs'; +export * from './square.mjs'; +export * from './circle.mjs'; +export * from './center.mjs'; +export * from './link-box.mjs'; +export * from './link-overlay.mjs'; +export * from './aspect-ratio.mjs'; +export * from './grid.mjs'; +export * from './grid-item.mjs'; +export * from './wrap.mjs'; +export * from './container.mjs'; +export * from './divider.mjs'; +export * from './float.mjs'; +export * from './bleed.mjs'; +export * from './visually-hidden.mjs'; \ No newline at end of file diff --git a/src/styled-system/jsx/is-valid-prop.d.ts b/src/styled-system/jsx/is-valid-prop.d.ts new file mode 100644 index 00000000..0cb85293 --- /dev/null +++ b/src/styled-system/jsx/is-valid-prop.d.ts @@ -0,0 +1,5 @@ +/* eslint-disable */ +declare const isCssProperty: (value: string) => boolean; +declare const splitCssProps: >(props: TProps) => [Pick, Omit] + +export { isCssProperty, splitCssProps }; \ No newline at end of file diff --git a/src/styled-system/jsx/is-valid-prop.mjs b/src/styled-system/jsx/is-valid-prop.mjs new file mode 100644 index 00000000..ed5afb20 --- /dev/null +++ b/src/styled-system/jsx/is-valid-prop.mjs @@ -0,0 +1,17 @@ +import { splitProps } from '../helpers.mjs'; +import { memo } from '../helpers.mjs'; +// src/index.ts +var userGeneratedStr = "css,pos,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,insetInline,insetBlock,inset,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,insetX,insetY,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,outlineWidth,outlineColor,outline,outlineOffset,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,color,fontFamily,fontSize,fontWeight,fontSmoothing,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,textGradient,gradientFrom,gradientTo,gradientVia,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationDelay,transformOrigin,scale,scaleX,scaleY,translate,translateX,translateY,accentColor,caretColor,scrollBehavior,scrollbar,scrollMargin,scrollMarginX,scrollMarginY,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingX,scrollPaddingY,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,touchAction,userSelect,fill,stroke,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,colorPalette,textStyle,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl" +var userGenerated = userGeneratedStr.split(","); +var cssPropertiesStr = "WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationTimingFunction,animationTimeline,appearance,aspectRatio,azimuth,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockOverflow,blockSize,border,borderBlock,borderBlockColor,borderBlockStyle,borderBlockWidth,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineEnd,borderInlineColor,borderInlineStyle,borderInlineWidth,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,color,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicSize,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,counterIncrement,counterReset,counterSet,cursor,direction,display,emptyCells,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontVariationSettings,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inputSecurity,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,printColorAdjust,quotes,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,scale,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockStart,scrollMarginBlockEnd,scrollMarginBottom,scrollMarginInline,scrollMarginInlineStart,scrollMarginInlineEnd,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineStart,scrollPaddingInlineEnd,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,shapeImageThreshold,shapeMargin,shapeOutside,tabSize,tableLayout,textAlign,textAlignLast,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textTransform,textUnderlineOffset,textUnderlinePosition,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,verticalAlign,viewTransitionName,visibility,whiteSpace,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,zIndex,zoom,alignmentBaseline,baselineShift,clipRule,colorInterpolation,colorRendering,dominantBaseline,fill,fillOpacity,fillRule,floodColor,floodOpacity,glyphOrientationVertical,lightingColor,marker,markerEnd,markerMid,markerStart,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,textAnchor,vectorEffect"; +var allCssProperties = cssPropertiesStr.split(",").concat(userGenerated); +var properties = new Map(allCssProperties.map((prop) => [prop, true])); +var cssPropertySelectorRegex = /&|@/; +var isCssProperty = /* @__PURE__ */ memo((prop) => { + return properties.has(prop) || prop.startsWith("--") || cssPropertySelectorRegex.test(prop); +}); +export { + allCssProperties, + isCssProperty +}; +export const splitCssProps = /* @__PURE__ */ (props) => splitProps(props, isCssProperty) \ No newline at end of file diff --git a/src/styled-system/jsx/link-box.d.ts b/src/styled-system/jsx/link-box.d.ts new file mode 100644 index 00000000..6f65d991 --- /dev/null +++ b/src/styled-system/jsx/link-box.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { LinkBoxProperties } from '../patterns/link-box'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface LinkBoxProps extends LinkBoxProperties, DistributiveOmit, keyof LinkBoxProperties > {} + + +export declare const LinkBox: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/link-box.mjs b/src/styled-system/jsx/link-box.mjs new file mode 100644 index 00000000..cc3cf9cf --- /dev/null +++ b/src/styled-system/jsx/link-box.mjs @@ -0,0 +1,8 @@ +import { createElement, forwardRef } from 'react' +import { styled } from './factory.mjs'; +import { getLinkBoxStyle } from '../patterns/link-box.mjs'; + +export const LinkBox = /* @__PURE__ */ forwardRef(function LinkBox(props, ref) { + const styleProps = getLinkBoxStyle() +return createElement(styled.div, { ref, ...styleProps, ...props }) +}) \ No newline at end of file diff --git a/src/styled-system/jsx/link-overlay.d.ts b/src/styled-system/jsx/link-overlay.d.ts new file mode 100644 index 00000000..26a28303 --- /dev/null +++ b/src/styled-system/jsx/link-overlay.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { LinkOverlayProperties } from '../patterns/link-overlay'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface LinkOverlayProps extends LinkOverlayProperties, DistributiveOmit, keyof LinkOverlayProperties > {} + + +export declare const LinkOverlay: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/link-overlay.mjs b/src/styled-system/jsx/link-overlay.mjs new file mode 100644 index 00000000..683c35a8 --- /dev/null +++ b/src/styled-system/jsx/link-overlay.mjs @@ -0,0 +1,8 @@ +import { createElement, forwardRef } from 'react' +import { styled } from './factory.mjs'; +import { getLinkOverlayStyle } from '../patterns/link-overlay.mjs'; + +export const LinkOverlay = /* @__PURE__ */ forwardRef(function LinkOverlay(props, ref) { + const styleProps = getLinkOverlayStyle() +return createElement(styled.a, { ref, ...styleProps, ...props }) +}) \ No newline at end of file diff --git a/src/styled-system/jsx/spacer.d.ts b/src/styled-system/jsx/spacer.d.ts new file mode 100644 index 00000000..03fcbcec --- /dev/null +++ b/src/styled-system/jsx/spacer.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { SpacerProperties } from '../patterns/spacer'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface SpacerProps extends SpacerProperties, DistributiveOmit, keyof SpacerProperties > {} + + +export declare const Spacer: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/spacer.mjs b/src/styled-system/jsx/spacer.mjs new file mode 100644 index 00000000..67fc7af4 --- /dev/null +++ b/src/styled-system/jsx/spacer.mjs @@ -0,0 +1,9 @@ +import { createElement, forwardRef } from 'react' +import { styled } from './factory.mjs'; +import { getSpacerStyle } from '../patterns/spacer.mjs'; + +export const Spacer = /* @__PURE__ */ forwardRef(function Spacer(props, ref) { + const { size, ...restProps } = props +const styleProps = getSpacerStyle({size}) +return createElement(styled.div, { ref, ...styleProps, ...restProps }) +}) \ No newline at end of file diff --git a/src/styled-system/jsx/square.d.ts b/src/styled-system/jsx/square.d.ts new file mode 100644 index 00000000..ef3e1ce2 --- /dev/null +++ b/src/styled-system/jsx/square.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { SquareProperties } from '../patterns/square'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface SquareProps extends SquareProperties, DistributiveOmit, keyof SquareProperties > {} + + +export declare const Square: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/square.mjs b/src/styled-system/jsx/square.mjs new file mode 100644 index 00000000..1cb45986 --- /dev/null +++ b/src/styled-system/jsx/square.mjs @@ -0,0 +1,9 @@ +import { createElement, forwardRef } from 'react' +import { styled } from './factory.mjs'; +import { getSquareStyle } from '../patterns/square.mjs'; + +export const Square = /* @__PURE__ */ forwardRef(function Square(props, ref) { + const { size, ...restProps } = props +const styleProps = getSquareStyle({size}) +return createElement(styled.div, { ref, ...styleProps, ...restProps }) +}) \ No newline at end of file diff --git a/src/styled-system/jsx/stack.d.ts b/src/styled-system/jsx/stack.d.ts new file mode 100644 index 00000000..13ff1c2f --- /dev/null +++ b/src/styled-system/jsx/stack.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { StackProperties } from '../patterns/stack'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface StackProps extends StackProperties, DistributiveOmit, keyof StackProperties > {} + + +export declare const Stack: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/stack.mjs b/src/styled-system/jsx/stack.mjs new file mode 100644 index 00000000..f0048a9f --- /dev/null +++ b/src/styled-system/jsx/stack.mjs @@ -0,0 +1,9 @@ +import { createElement, forwardRef } from 'react' +import { styled } from './factory.mjs'; +import { getStackStyle } from '../patterns/stack.mjs'; + +export const Stack = /* @__PURE__ */ forwardRef(function Stack(props, ref) { + const { align, justify, direction, gap, ...restProps } = props +const styleProps = getStackStyle({align, justify, direction, gap}) +return createElement(styled.div, { ref, ...styleProps, ...restProps }) +}) \ No newline at end of file diff --git a/src/styled-system/jsx/visually-hidden.d.ts b/src/styled-system/jsx/visually-hidden.d.ts new file mode 100644 index 00000000..896eb1fd --- /dev/null +++ b/src/styled-system/jsx/visually-hidden.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { VisuallyHiddenProperties } from '../patterns/visually-hidden'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface VisuallyHiddenProps extends VisuallyHiddenProperties, DistributiveOmit, keyof VisuallyHiddenProperties > {} + + +export declare const VisuallyHidden: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/visually-hidden.mjs b/src/styled-system/jsx/visually-hidden.mjs new file mode 100644 index 00000000..dbb4df27 --- /dev/null +++ b/src/styled-system/jsx/visually-hidden.mjs @@ -0,0 +1,8 @@ +import { createElement, forwardRef } from 'react' +import { styled } from './factory.mjs'; +import { getVisuallyHiddenStyle } from '../patterns/visually-hidden.mjs'; + +export const VisuallyHidden = /* @__PURE__ */ forwardRef(function VisuallyHidden(props, ref) { + const styleProps = getVisuallyHiddenStyle() +return createElement(styled.div, { ref, ...styleProps, ...props }) +}) \ No newline at end of file diff --git a/src/styled-system/jsx/vstack.d.ts b/src/styled-system/jsx/vstack.d.ts new file mode 100644 index 00000000..2e43bfc4 --- /dev/null +++ b/src/styled-system/jsx/vstack.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { VstackProperties } from '../patterns/vstack'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface VstackProps extends VstackProperties, DistributiveOmit, keyof VstackProperties > {} + + +export declare const VStack: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/vstack.mjs b/src/styled-system/jsx/vstack.mjs new file mode 100644 index 00000000..4af30a06 --- /dev/null +++ b/src/styled-system/jsx/vstack.mjs @@ -0,0 +1,9 @@ +import { createElement, forwardRef } from 'react' +import { styled } from './factory.mjs'; +import { getVstackStyle } from '../patterns/vstack.mjs'; + +export const VStack = /* @__PURE__ */ forwardRef(function VStack(props, ref) { + const { justify, gap, ...restProps } = props +const styleProps = getVstackStyle({justify, gap}) +return createElement(styled.div, { ref, ...styleProps, ...restProps }) +}) \ No newline at end of file diff --git a/src/styled-system/jsx/wrap.d.ts b/src/styled-system/jsx/wrap.d.ts new file mode 100644 index 00000000..8aa64316 --- /dev/null +++ b/src/styled-system/jsx/wrap.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { WrapProperties } from '../patterns/wrap'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface WrapProps extends WrapProperties, DistributiveOmit, keyof WrapProperties > {} + + +export declare const Wrap: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/wrap.mjs b/src/styled-system/jsx/wrap.mjs new file mode 100644 index 00000000..02f78c87 --- /dev/null +++ b/src/styled-system/jsx/wrap.mjs @@ -0,0 +1,9 @@ +import { createElement, forwardRef } from 'react' +import { styled } from './factory.mjs'; +import { getWrapStyle } from '../patterns/wrap.mjs'; + +export const Wrap = /* @__PURE__ */ forwardRef(function Wrap(props, ref) { + const { gap, rowGap, columnGap, align, justify, ...restProps } = props +const styleProps = getWrapStyle({gap, rowGap, columnGap, align, justify}) +return createElement(styled.div, { ref, ...styleProps, ...restProps }) +}) \ No newline at end of file diff --git a/src/styled-system/patterns/aspect-ratio.d.ts b/src/styled-system/patterns/aspect-ratio.d.ts new file mode 100644 index 00000000..cdb4d7a4 --- /dev/null +++ b/src/styled-system/patterns/aspect-ratio.d.ts @@ -0,0 +1,21 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { PropertyValue } from '../types/prop-type'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface AspectRatioProperties { + ratio?: ConditionalValue +} + + +interface AspectRatioStyles extends AspectRatioProperties, DistributiveOmit {} + +interface AspectRatioPatternFn { + (styles?: AspectRatioStyles): string + raw: (styles?: AspectRatioStyles) => SystemStyleObject +} + + +export declare const aspectRatio: AspectRatioPatternFn; diff --git a/src/styled-system/patterns/aspect-ratio.mjs b/src/styled-system/patterns/aspect-ratio.mjs new file mode 100644 index 00000000..aca0774f --- /dev/null +++ b/src/styled-system/patterns/aspect-ratio.mjs @@ -0,0 +1,35 @@ +import { mapObject } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const aspectRatioConfig = { +transform(props, { map }) { + const { ratio = 4 / 3, ...rest } = props; + return { + position: "relative", + _before: { + content: `""`, + display: "block", + height: "0", + paddingBottom: map(ratio, (r) => `${1 / r * 100}%`) + }, + "&>*": { + display: "flex", + justifyContent: "center", + alignItems: "center", + overflow: "hidden", + position: "absolute", + inset: "0", + width: "100%", + height: "100%" + }, + "&>img, &>video": { + objectFit: "cover" + }, + ...rest + }; +}} + +export const getAspectRatioStyle = (styles = {}) => aspectRatioConfig.transform(styles, { map: mapObject }) + +export const aspectRatio = (styles) => css(getAspectRatioStyle(styles)) +aspectRatio.raw = getAspectRatioStyle \ No newline at end of file diff --git a/src/styled-system/patterns/bleed.d.ts b/src/styled-system/patterns/bleed.d.ts new file mode 100644 index 00000000..01b4fa54 --- /dev/null +++ b/src/styled-system/patterns/bleed.d.ts @@ -0,0 +1,22 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { PropertyValue } from '../types/prop-type'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface BleedProperties { + inline?: PropertyValue<'marginInline'> + block?: PropertyValue<'marginBlock'> +} + + +interface BleedStyles extends BleedProperties, DistributiveOmit {} + +interface BleedPatternFn { + (styles?: BleedStyles): string + raw: (styles?: BleedStyles) => SystemStyleObject +} + + +export declare const bleed: BleedPatternFn; diff --git a/src/styled-system/patterns/bleed.mjs b/src/styled-system/patterns/bleed.mjs new file mode 100644 index 00000000..cb90a945 --- /dev/null +++ b/src/styled-system/patterns/bleed.mjs @@ -0,0 +1,19 @@ +import { mapObject } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const bleedConfig = { +transform(props) { + const { inline = "0", block = "0", ...rest } = props; + return { + "--bleed-x": `spacing.${inline}`, + "--bleed-y": `spacing.${block}`, + marginInline: "calc(var(--bleed-x, 0) * -1)", + marginBlock: "calc(var(--bleed-y, 0) * -1)", + ...rest + }; +}} + +export const getBleedStyle = (styles = {}) => bleedConfig.transform(styles, { map: mapObject }) + +export const bleed = (styles) => css(getBleedStyle(styles)) +bleed.raw = getBleedStyle \ No newline at end of file diff --git a/src/styled-system/patterns/box.d.ts b/src/styled-system/patterns/box.d.ts new file mode 100644 index 00000000..69a67a75 --- /dev/null +++ b/src/styled-system/patterns/box.d.ts @@ -0,0 +1,21 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { PropertyValue } from '../types/prop-type'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface BoxProperties { + +} + + +interface BoxStyles extends BoxProperties, DistributiveOmit {} + +interface BoxPatternFn { + (styles?: BoxStyles): string + raw: (styles?: BoxStyles) => SystemStyleObject +} + + +export declare const box: BoxPatternFn; diff --git a/src/styled-system/patterns/box.mjs b/src/styled-system/patterns/box.mjs new file mode 100644 index 00000000..66732698 --- /dev/null +++ b/src/styled-system/patterns/box.mjs @@ -0,0 +1,12 @@ +import { mapObject } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const boxConfig = { +transform(props) { + return props; +}} + +export const getBoxStyle = (styles = {}) => boxConfig.transform(styles, { map: mapObject }) + +export const box = (styles) => css(getBoxStyle(styles)) +box.raw = getBoxStyle \ No newline at end of file diff --git a/src/styled-system/patterns/center.d.ts b/src/styled-system/patterns/center.d.ts new file mode 100644 index 00000000..d314248e --- /dev/null +++ b/src/styled-system/patterns/center.d.ts @@ -0,0 +1,21 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { PropertyValue } from '../types/prop-type'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface CenterProperties { + inline?: ConditionalValue +} + + +interface CenterStyles extends CenterProperties, DistributiveOmit {} + +interface CenterPatternFn { + (styles?: CenterStyles): string + raw: (styles?: CenterStyles) => SystemStyleObject +} + + +export declare const center: CenterPatternFn; diff --git a/src/styled-system/patterns/center.mjs b/src/styled-system/patterns/center.mjs new file mode 100644 index 00000000..0884c602 --- /dev/null +++ b/src/styled-system/patterns/center.mjs @@ -0,0 +1,18 @@ +import { mapObject } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const centerConfig = { +transform(props) { + const { inline, ...rest } = props; + return { + display: inline ? "inline-flex" : "flex", + alignItems: "center", + justifyContent: "center", + ...rest + }; +}} + +export const getCenterStyle = (styles = {}) => centerConfig.transform(styles, { map: mapObject }) + +export const center = (styles) => css(getCenterStyle(styles)) +center.raw = getCenterStyle \ No newline at end of file diff --git a/src/styled-system/patterns/circle.d.ts b/src/styled-system/patterns/circle.d.ts new file mode 100644 index 00000000..45f47952 --- /dev/null +++ b/src/styled-system/patterns/circle.d.ts @@ -0,0 +1,21 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { PropertyValue } from '../types/prop-type'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface CircleProperties { + size?: PropertyValue<'width'> +} + + +interface CircleStyles extends CircleProperties, DistributiveOmit {} + +interface CirclePatternFn { + (styles?: CircleStyles): string + raw: (styles?: CircleStyles) => SystemStyleObject +} + + +export declare const circle: CirclePatternFn; diff --git a/src/styled-system/patterns/circle.mjs b/src/styled-system/patterns/circle.mjs new file mode 100644 index 00000000..e113cc3e --- /dev/null +++ b/src/styled-system/patterns/circle.mjs @@ -0,0 +1,22 @@ +import { mapObject } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const circleConfig = { +transform(props) { + const { size, ...rest } = props; + return { + display: "flex", + alignItems: "center", + justifyContent: "center", + flex: "0 0 auto", + width: size, + height: size, + borderRadius: "9999px", + ...rest + }; +}} + +export const getCircleStyle = (styles = {}) => circleConfig.transform(styles, { map: mapObject }) + +export const circle = (styles) => css(getCircleStyle(styles)) +circle.raw = getCircleStyle \ No newline at end of file diff --git a/src/styled-system/patterns/container.d.ts b/src/styled-system/patterns/container.d.ts new file mode 100644 index 00000000..fb71efcc --- /dev/null +++ b/src/styled-system/patterns/container.d.ts @@ -0,0 +1,21 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { PropertyValue } from '../types/prop-type'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface ContainerProperties { + +} + + +interface ContainerStyles extends ContainerProperties, DistributiveOmit {} + +interface ContainerPatternFn { + (styles?: ContainerStyles): string + raw: (styles?: ContainerStyles) => SystemStyleObject +} + + +export declare const container: ContainerPatternFn; diff --git a/src/styled-system/patterns/container.mjs b/src/styled-system/patterns/container.mjs new file mode 100644 index 00000000..b723b4b6 --- /dev/null +++ b/src/styled-system/patterns/container.mjs @@ -0,0 +1,18 @@ +import { mapObject } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const containerConfig = { +transform(props) { + return { + position: "relative", + maxWidth: "8xl", + mx: "auto", + px: { base: "4", md: "6", lg: "8" }, + ...props + }; +}} + +export const getContainerStyle = (styles = {}) => containerConfig.transform(styles, { map: mapObject }) + +export const container = (styles) => css(getContainerStyle(styles)) +container.raw = getContainerStyle \ No newline at end of file diff --git a/src/styled-system/patterns/divider.d.ts b/src/styled-system/patterns/divider.d.ts new file mode 100644 index 00000000..17e45ec2 --- /dev/null +++ b/src/styled-system/patterns/divider.d.ts @@ -0,0 +1,23 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { PropertyValue } from '../types/prop-type'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface DividerProperties { + orientation?: ConditionalValue<"horizontal" | "vertical"> + thickness?: ConditionalValue + color?: ConditionalValue +} + + +interface DividerStyles extends DividerProperties, DistributiveOmit {} + +interface DividerPatternFn { + (styles?: DividerStyles): string + raw: (styles?: DividerStyles) => SystemStyleObject +} + + +export declare const divider: DividerPatternFn; diff --git a/src/styled-system/patterns/divider.mjs b/src/styled-system/patterns/divider.mjs new file mode 100644 index 00000000..657659f9 --- /dev/null +++ b/src/styled-system/patterns/divider.mjs @@ -0,0 +1,21 @@ +import { mapObject } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const dividerConfig = { +transform(props, { map }) { + const { orientation = "horizontal", thickness = "1px", color, ...rest } = props; + return { + "--thickness": thickness, + width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"), + height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"), + borderBlockEndWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0), + borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0), + borderColor: color, + ...rest + }; +}} + +export const getDividerStyle = (styles = {}) => dividerConfig.transform(styles, { map: mapObject }) + +export const divider = (styles) => css(getDividerStyle(styles)) +divider.raw = getDividerStyle \ No newline at end of file diff --git a/src/styled-system/patterns/flex.d.ts b/src/styled-system/patterns/flex.d.ts new file mode 100644 index 00000000..026edc7b --- /dev/null +++ b/src/styled-system/patterns/flex.d.ts @@ -0,0 +1,27 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { PropertyValue } from '../types/prop-type'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface FlexProperties { + align?: PropertyValue<'alignItems'> + justify?: PropertyValue<'justifyContent'> + direction?: PropertyValue<'flexDirection'> + wrap?: PropertyValue<'flexWrap'> + basis?: PropertyValue<'flexBasis'> + grow?: PropertyValue<'flexGrow'> + shrink?: PropertyValue<'flexShrink'> +} + + +interface FlexStyles extends FlexProperties, DistributiveOmit {} + +interface FlexPatternFn { + (styles?: FlexStyles): string + raw: (styles?: FlexStyles) => SystemStyleObject +} + + +export declare const flex: FlexPatternFn; diff --git a/src/styled-system/patterns/flex.mjs b/src/styled-system/patterns/flex.mjs new file mode 100644 index 00000000..5969b16f --- /dev/null +++ b/src/styled-system/patterns/flex.mjs @@ -0,0 +1,23 @@ +import { mapObject } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const flexConfig = { +transform(props) { + const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props; + return { + display: "flex", + flexDirection: direction, + alignItems: align, + justifyContent: justify, + flexWrap: wrap2, + flexBasis: basis, + flexGrow: grow, + flexShrink: shrink, + ...rest + }; +}} + +export const getFlexStyle = (styles = {}) => flexConfig.transform(styles, { map: mapObject }) + +export const flex = (styles) => css(getFlexStyle(styles)) +flex.raw = getFlexStyle \ No newline at end of file diff --git a/src/styled-system/patterns/float.d.ts b/src/styled-system/patterns/float.d.ts new file mode 100644 index 00000000..8b905e4f --- /dev/null +++ b/src/styled-system/patterns/float.d.ts @@ -0,0 +1,24 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { PropertyValue } from '../types/prop-type'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface FloatProperties { + offsetX?: ConditionalValue + offsetY?: ConditionalValue + offset?: ConditionalValue + placement?: ConditionalValue<"bottom-end" | "bottom-start" | "top-end" | "top-start" | "bottom-center" | "top-center" | "middle-center" | "middle-end" | "middle-start"> +} + + +interface FloatStyles extends FloatProperties, DistributiveOmit {} + +interface FloatPatternFn { + (styles?: FloatStyles): string + raw: (styles?: FloatStyles) => SystemStyleObject +} + + +export declare const float: FloatPatternFn; diff --git a/src/styled-system/patterns/float.mjs b/src/styled-system/patterns/float.mjs new file mode 100644 index 00000000..da63b43a --- /dev/null +++ b/src/styled-system/patterns/float.mjs @@ -0,0 +1,45 @@ +import { mapObject } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const floatConfig = { +transform(props, { map }) { + const { offset = "0", offsetX = offset, offsetY = offset, placement = "top-end", ...rest } = props; + return { + display: "inline-flex", + justifyContent: "center", + alignItems: "center", + position: "absolute", + insetBlockStart: map(placement, (v) => { + const [side] = v.split("-"); + const map2 = { top: offsetY, middle: "50%", bottom: "auto" }; + return map2[side]; + }), + insetBlockEnd: map(placement, (v) => { + const [side] = v.split("-"); + const map2 = { top: "auto", middle: "50%", bottom: offsetY }; + return map2[side]; + }), + insetInlineStart: map(placement, (v) => { + const [, align] = v.split("-"); + const map2 = { start: offsetX, center: "50%", end: "auto" }; + return map2[align]; + }), + insetInlineEnd: map(placement, (v) => { + const [, align] = v.split("-"); + const map2 = { start: "auto", center: "50%", end: offsetX }; + return map2[align]; + }), + translate: map(placement, (v) => { + const [side, align] = v.split("-"); + const mapX = { start: "-50%", center: "-50%", end: "50%" }; + const mapY = { top: "-50%", middle: "-50%", bottom: "50%" }; + return `${mapX[align]} ${mapY[side]}`; + }), + ...rest + }; +}} + +export const getFloatStyle = (styles = {}) => floatConfig.transform(styles, { map: mapObject }) + +export const float = (styles) => css(getFloatStyle(styles)) +float.raw = getFloatStyle \ No newline at end of file diff --git a/src/styled-system/patterns/grid-item.d.ts b/src/styled-system/patterns/grid-item.d.ts new file mode 100644 index 00000000..b9f1c7cb --- /dev/null +++ b/src/styled-system/patterns/grid-item.d.ts @@ -0,0 +1,26 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { PropertyValue } from '../types/prop-type'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface GridItemProperties { + colSpan?: ConditionalValue + rowSpan?: ConditionalValue + colStart?: ConditionalValue + rowStart?: ConditionalValue + colEnd?: ConditionalValue + rowEnd?: ConditionalValue +} + + +interface GridItemStyles extends GridItemProperties, DistributiveOmit {} + +interface GridItemPatternFn { + (styles?: GridItemStyles): string + raw: (styles?: GridItemStyles) => SystemStyleObject +} + + +export declare const gridItem: GridItemPatternFn; diff --git a/src/styled-system/patterns/grid-item.mjs b/src/styled-system/patterns/grid-item.mjs new file mode 100644 index 00000000..537c939a --- /dev/null +++ b/src/styled-system/patterns/grid-item.mjs @@ -0,0 +1,22 @@ +import { mapObject } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const gridItemConfig = { +transform(props, { map }) { + const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props; + const spanFn = (v) => v === "auto" ? v : `span ${v}`; + return { + gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0, + gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0, + gridColumnStart: colStart, + gridColumnEnd: colEnd, + gridRowStart: rowStart, + gridRowEnd: rowEnd, + ...rest + }; +}} + +export const getGridItemStyle = (styles = {}) => gridItemConfig.transform(styles, { map: mapObject }) + +export const gridItem = (styles) => css(getGridItemStyle(styles)) +gridItem.raw = getGridItemStyle \ No newline at end of file diff --git a/src/styled-system/patterns/grid.d.ts b/src/styled-system/patterns/grid.d.ts new file mode 100644 index 00000000..4d8bdeda --- /dev/null +++ b/src/styled-system/patterns/grid.d.ts @@ -0,0 +1,25 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { PropertyValue } from '../types/prop-type'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface GridProperties { + gap?: PropertyValue<'gap'> + columnGap?: PropertyValue<'gap'> + rowGap?: PropertyValue<'gap'> + columns?: ConditionalValue + minChildWidth?: ConditionalValue +} + + +interface GridStyles extends GridProperties, DistributiveOmit {} + +interface GridPatternFn { + (styles?: GridStyles): string + raw: (styles?: GridStyles) => SystemStyleObject +} + + +export declare const grid: GridPatternFn; diff --git a/src/styled-system/patterns/grid.mjs b/src/styled-system/patterns/grid.mjs new file mode 100644 index 00000000..7ed807a8 --- /dev/null +++ b/src/styled-system/patterns/grid.mjs @@ -0,0 +1,22 @@ +import { mapObject } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const gridConfig = { +transform(props, { map }) { + const regex = /\d+(cm|in|pt|em|px|rem|vh|vmax|vmin|vw|ch|lh|%)$/; + const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", columns, minChildWidth, ...rest } = props; + const getValue = (v) => regex.test(v) ? v : `token(sizes.${v}, ${v})`; + return { + display: "grid", + gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))`) : void 0, + gap, + columnGap, + rowGap, + ...rest + }; +}} + +export const getGridStyle = (styles = {}) => gridConfig.transform(styles, { map: mapObject }) + +export const grid = (styles) => css(getGridStyle(styles)) +grid.raw = getGridStyle \ No newline at end of file diff --git a/src/styled-system/patterns/hstack.d.ts b/src/styled-system/patterns/hstack.d.ts new file mode 100644 index 00000000..e70d844e --- /dev/null +++ b/src/styled-system/patterns/hstack.d.ts @@ -0,0 +1,22 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { PropertyValue } from '../types/prop-type'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface HstackProperties { + justify?: PropertyValue<'justifyContent'> + gap?: PropertyValue<'gap'> +} + + +interface HstackStyles extends HstackProperties, DistributiveOmit {} + +interface HstackPatternFn { + (styles?: HstackStyles): string + raw: (styles?: HstackStyles) => SystemStyleObject +} + + +export declare const hstack: HstackPatternFn; diff --git a/src/styled-system/patterns/hstack.mjs b/src/styled-system/patterns/hstack.mjs new file mode 100644 index 00000000..6b521b9f --- /dev/null +++ b/src/styled-system/patterns/hstack.mjs @@ -0,0 +1,20 @@ +import { mapObject } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const hstackConfig = { +transform(props) { + const { justify, gap = "10px", ...rest } = props; + return { + display: "flex", + alignItems: "center", + justifyContent: justify, + gap, + flexDirection: "row", + ...rest + }; +}} + +export const getHstackStyle = (styles = {}) => hstackConfig.transform(styles, { map: mapObject }) + +export const hstack = (styles) => css(getHstackStyle(styles)) +hstack.raw = getHstackStyle \ No newline at end of file diff --git a/src/styled-system/patterns/index.d.ts b/src/styled-system/patterns/index.d.ts new file mode 100644 index 00000000..23a7ab02 --- /dev/null +++ b/src/styled-system/patterns/index.d.ts @@ -0,0 +1,21 @@ +/* eslint-disable */ +export * from './box'; +export * from './flex'; +export * from './stack'; +export * from './vstack'; +export * from './hstack'; +export * from './spacer'; +export * from './square'; +export * from './circle'; +export * from './center'; +export * from './link-box'; +export * from './link-overlay'; +export * from './aspect-ratio'; +export * from './grid'; +export * from './grid-item'; +export * from './wrap'; +export * from './container'; +export * from './divider'; +export * from './float'; +export * from './bleed'; +export * from './visually-hidden'; \ No newline at end of file diff --git a/src/styled-system/patterns/index.mjs b/src/styled-system/patterns/index.mjs new file mode 100644 index 00000000..f20811e6 --- /dev/null +++ b/src/styled-system/patterns/index.mjs @@ -0,0 +1,20 @@ +export * from './box.mjs'; +export * from './flex.mjs'; +export * from './stack.mjs'; +export * from './vstack.mjs'; +export * from './hstack.mjs'; +export * from './spacer.mjs'; +export * from './square.mjs'; +export * from './circle.mjs'; +export * from './center.mjs'; +export * from './link-box.mjs'; +export * from './link-overlay.mjs'; +export * from './aspect-ratio.mjs'; +export * from './grid.mjs'; +export * from './grid-item.mjs'; +export * from './wrap.mjs'; +export * from './container.mjs'; +export * from './divider.mjs'; +export * from './float.mjs'; +export * from './bleed.mjs'; +export * from './visually-hidden.mjs'; \ No newline at end of file diff --git a/src/styled-system/patterns/link-box.d.ts b/src/styled-system/patterns/link-box.d.ts new file mode 100644 index 00000000..443b70ab --- /dev/null +++ b/src/styled-system/patterns/link-box.d.ts @@ -0,0 +1,21 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { PropertyValue } from '../types/prop-type'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface LinkBoxProperties { + +} + + +interface LinkBoxStyles extends LinkBoxProperties, DistributiveOmit {} + +interface LinkBoxPatternFn { + (styles?: LinkBoxStyles): string + raw: (styles?: LinkBoxStyles) => SystemStyleObject +} + + +export declare const linkBox: LinkBoxPatternFn; diff --git a/src/styled-system/patterns/link-box.mjs b/src/styled-system/patterns/link-box.mjs new file mode 100644 index 00000000..0ab54a23 --- /dev/null +++ b/src/styled-system/patterns/link-box.mjs @@ -0,0 +1,19 @@ +import { mapObject } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const linkBoxConfig = { +transform(props) { + return { + position: "relative", + "& :where(a, abbr)": { + position: "relative", + zIndex: "1" + }, + ...props + }; +}} + +export const getLinkBoxStyle = (styles = {}) => linkBoxConfig.transform(styles, { map: mapObject }) + +export const linkBox = (styles) => css(getLinkBoxStyle(styles)) +linkBox.raw = getLinkBoxStyle \ No newline at end of file diff --git a/src/styled-system/patterns/link-overlay.d.ts b/src/styled-system/patterns/link-overlay.d.ts new file mode 100644 index 00000000..6696fa24 --- /dev/null +++ b/src/styled-system/patterns/link-overlay.d.ts @@ -0,0 +1,21 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { PropertyValue } from '../types/prop-type'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface LinkOverlayProperties { + +} + + +interface LinkOverlayStyles extends LinkOverlayProperties, DistributiveOmit {} + +interface LinkOverlayPatternFn { + (styles?: LinkOverlayStyles): string + raw: (styles?: LinkOverlayStyles) => SystemStyleObject +} + + +export declare const linkOverlay: LinkOverlayPatternFn; diff --git a/src/styled-system/patterns/link-overlay.mjs b/src/styled-system/patterns/link-overlay.mjs new file mode 100644 index 00000000..3b96a629 --- /dev/null +++ b/src/styled-system/patterns/link-overlay.mjs @@ -0,0 +1,24 @@ +import { mapObject } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const linkOverlayConfig = { +transform(props) { + return { + position: "static", + _before: { + content: '""', + display: "block", + position: "absolute", + cursor: "inherit", + inset: "0", + zIndex: "0", + ...props["_before"] + }, + ...props + }; +}} + +export const getLinkOverlayStyle = (styles = {}) => linkOverlayConfig.transform(styles, { map: mapObject }) + +export const linkOverlay = (styles) => css(getLinkOverlayStyle(styles)) +linkOverlay.raw = getLinkOverlayStyle \ No newline at end of file diff --git a/src/styled-system/patterns/spacer.d.ts b/src/styled-system/patterns/spacer.d.ts new file mode 100644 index 00000000..a5668da5 --- /dev/null +++ b/src/styled-system/patterns/spacer.d.ts @@ -0,0 +1,21 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { PropertyValue } from '../types/prop-type'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface SpacerProperties { + size?: ConditionalValue +} + + +interface SpacerStyles extends SpacerProperties, DistributiveOmit {} + +interface SpacerPatternFn { + (styles?: SpacerStyles): string + raw: (styles?: SpacerStyles) => SystemStyleObject +} + + +export declare const spacer: SpacerPatternFn; diff --git a/src/styled-system/patterns/spacer.mjs b/src/styled-system/patterns/spacer.mjs new file mode 100644 index 00000000..446f7c56 --- /dev/null +++ b/src/styled-system/patterns/spacer.mjs @@ -0,0 +1,18 @@ +import { mapObject } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const spacerConfig = { +transform(props, { map }) { + const { size, ...rest } = props; + return { + alignSelf: "stretch", + justifySelf: "stretch", + flex: map(size, (v) => v == null ? "1" : `0 0 ${v}`), + ...rest + }; +}} + +export const getSpacerStyle = (styles = {}) => spacerConfig.transform(styles, { map: mapObject }) + +export const spacer = (styles) => css(getSpacerStyle(styles)) +spacer.raw = getSpacerStyle \ No newline at end of file diff --git a/src/styled-system/patterns/square.d.ts b/src/styled-system/patterns/square.d.ts new file mode 100644 index 00000000..497db1f9 --- /dev/null +++ b/src/styled-system/patterns/square.d.ts @@ -0,0 +1,21 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { PropertyValue } from '../types/prop-type'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface SquareProperties { + size?: PropertyValue<'width'> +} + + +interface SquareStyles extends SquareProperties, DistributiveOmit {} + +interface SquarePatternFn { + (styles?: SquareStyles): string + raw: (styles?: SquareStyles) => SystemStyleObject +} + + +export declare const square: SquarePatternFn; diff --git a/src/styled-system/patterns/square.mjs b/src/styled-system/patterns/square.mjs new file mode 100644 index 00000000..9aab5219 --- /dev/null +++ b/src/styled-system/patterns/square.mjs @@ -0,0 +1,21 @@ +import { mapObject } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const squareConfig = { +transform(props) { + const { size, ...rest } = props; + return { + display: "flex", + alignItems: "center", + justifyContent: "center", + flex: "0 0 auto", + width: size, + height: size, + ...rest + }; +}} + +export const getSquareStyle = (styles = {}) => squareConfig.transform(styles, { map: mapObject }) + +export const square = (styles) => css(getSquareStyle(styles)) +square.raw = getSquareStyle \ No newline at end of file diff --git a/src/styled-system/patterns/stack.d.ts b/src/styled-system/patterns/stack.d.ts new file mode 100644 index 00000000..4771724f --- /dev/null +++ b/src/styled-system/patterns/stack.d.ts @@ -0,0 +1,24 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { PropertyValue } from '../types/prop-type'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface StackProperties { + align?: PropertyValue<'alignItems'> + justify?: PropertyValue<'justifyContent'> + direction?: PropertyValue<'flexDirection'> + gap?: PropertyValue<'gap'> +} + + +interface StackStyles extends StackProperties, DistributiveOmit {} + +interface StackPatternFn { + (styles?: StackStyles): string + raw: (styles?: StackStyles) => SystemStyleObject +} + + +export declare const stack: StackPatternFn; diff --git a/src/styled-system/patterns/stack.mjs b/src/styled-system/patterns/stack.mjs new file mode 100644 index 00000000..d2c70265 --- /dev/null +++ b/src/styled-system/patterns/stack.mjs @@ -0,0 +1,20 @@ +import { mapObject } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const stackConfig = { +transform(props) { + const { align, justify, direction = "column", gap = "10px", ...rest } = props; + return { + display: "flex", + flexDirection: direction, + alignItems: align, + justifyContent: justify, + gap, + ...rest + }; +}} + +export const getStackStyle = (styles = {}) => stackConfig.transform(styles, { map: mapObject }) + +export const stack = (styles) => css(getStackStyle(styles)) +stack.raw = getStackStyle \ No newline at end of file diff --git a/src/styled-system/patterns/visually-hidden.d.ts b/src/styled-system/patterns/visually-hidden.d.ts new file mode 100644 index 00000000..337bc31f --- /dev/null +++ b/src/styled-system/patterns/visually-hidden.d.ts @@ -0,0 +1,21 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { PropertyValue } from '../types/prop-type'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface VisuallyHiddenProperties { + +} + + +interface VisuallyHiddenStyles extends VisuallyHiddenProperties, DistributiveOmit {} + +interface VisuallyHiddenPatternFn { + (styles?: VisuallyHiddenStyles): string + raw: (styles?: VisuallyHiddenStyles) => SystemStyleObject +} + + +export declare const visuallyHidden: VisuallyHiddenPatternFn; diff --git a/src/styled-system/patterns/visually-hidden.mjs b/src/styled-system/patterns/visually-hidden.mjs new file mode 100644 index 00000000..a3fb34b4 --- /dev/null +++ b/src/styled-system/patterns/visually-hidden.mjs @@ -0,0 +1,15 @@ +import { mapObject } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const visuallyHiddenConfig = { +transform(props) { + return { + srOnly: true, + ...props + }; +}} + +export const getVisuallyHiddenStyle = (styles = {}) => visuallyHiddenConfig.transform(styles, { map: mapObject }) + +export const visuallyHidden = (styles) => css(getVisuallyHiddenStyle(styles)) +visuallyHidden.raw = getVisuallyHiddenStyle \ No newline at end of file diff --git a/src/styled-system/patterns/vstack.d.ts b/src/styled-system/patterns/vstack.d.ts new file mode 100644 index 00000000..92a9772a --- /dev/null +++ b/src/styled-system/patterns/vstack.d.ts @@ -0,0 +1,22 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { PropertyValue } from '../types/prop-type'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface VstackProperties { + justify?: PropertyValue<'justifyContent'> + gap?: PropertyValue<'gap'> +} + + +interface VstackStyles extends VstackProperties, DistributiveOmit {} + +interface VstackPatternFn { + (styles?: VstackStyles): string + raw: (styles?: VstackStyles) => SystemStyleObject +} + + +export declare const vstack: VstackPatternFn; diff --git a/src/styled-system/patterns/vstack.mjs b/src/styled-system/patterns/vstack.mjs new file mode 100644 index 00000000..14a5cf67 --- /dev/null +++ b/src/styled-system/patterns/vstack.mjs @@ -0,0 +1,20 @@ +import { mapObject } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const vstackConfig = { +transform(props) { + const { justify, gap = "10px", ...rest } = props; + return { + display: "flex", + alignItems: "center", + justifyContent: justify, + gap, + flexDirection: "column", + ...rest + }; +}} + +export const getVstackStyle = (styles = {}) => vstackConfig.transform(styles, { map: mapObject }) + +export const vstack = (styles) => css(getVstackStyle(styles)) +vstack.raw = getVstackStyle \ No newline at end of file diff --git a/src/styled-system/patterns/wrap.d.ts b/src/styled-system/patterns/wrap.d.ts new file mode 100644 index 00000000..0e49971c --- /dev/null +++ b/src/styled-system/patterns/wrap.d.ts @@ -0,0 +1,25 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { PropertyValue } from '../types/prop-type'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface WrapProperties { + gap?: PropertyValue<'gap'> + rowGap?: PropertyValue<'gap'> + columnGap?: PropertyValue<'gap'> + align?: PropertyValue<'alignItems'> + justify?: PropertyValue<'justifyContent'> +} + + +interface WrapStyles extends WrapProperties, DistributiveOmit {} + +interface WrapPatternFn { + (styles?: WrapStyles): string + raw: (styles?: WrapStyles) => SystemStyleObject +} + + +export declare const wrap: WrapPatternFn; diff --git a/src/styled-system/patterns/wrap.mjs b/src/styled-system/patterns/wrap.mjs new file mode 100644 index 00000000..ee0c269f --- /dev/null +++ b/src/styled-system/patterns/wrap.mjs @@ -0,0 +1,22 @@ +import { mapObject } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const wrapConfig = { +transform(props) { + const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props; + return { + display: "flex", + flexWrap: "wrap", + alignItems: align, + justifyContent: justify, + gap, + columnGap, + rowGap, + ...rest + }; +}} + +export const getWrapStyle = (styles = {}) => wrapConfig.transform(styles, { map: mapObject }) + +export const wrap = (styles) => css(getWrapStyle(styles)) +wrap.raw = getWrapStyle \ No newline at end of file diff --git a/src/styled-system/reset.css b/src/styled-system/reset.css new file mode 100644 index 00000000..d3ef901b --- /dev/null +++ b/src/styled-system/reset.css @@ -0,0 +1,214 @@ +@layer reset { + * { + margin: 0; + padding: 0; + font: inherit; + } + + *, + *::before, + *::after { + box-sizing: border-box; + border-width: 0; + border-style: solid; + border-color: var(--global-color-border, currentColor); + } + + html { + line-height: 1.5; + --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; + -webkit-text-size-adjust: 100%; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -moz-tab-size: 4; + tab-size: 4; + font-family: var(--global-font-body, var(--font-fallback)); + } + + hr { + height: 0; + color: inherit; + border-top-width: 1px; + } + + body { + height: 100%; + line-height: inherit; + } + + img { + border-style: none; + } + + img, + svg, + video, + canvas, + audio, + iframe, + embed, + object { + display: block; + vertical-align: middle; + } + + img, + video { + max-width: 100%; + height: auto; + } + + p, + h1, + h2, + h3, + h4, + h5, + h6 { + overflow-wrap: break-word; + } + + ol, + ul { + list-style: none; + } + + code, + kbd, + pre, + samp { + font-size: 1em; + } + + button, + [type='button'], + [type='reset'], + [type='submit'] { + -webkit-appearance: button; + background-color: transparent; + background-image: none; + } + + button, + input, + optgroup, + select, + textarea { + color: inherit; + } + + button, + select { + text-transform: none; + } + + table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; + } + + input::placeholder, + textarea::placeholder { + opacity: 1; + color: var(--global-color-placeholder, #9ca3af); + } + + textarea { + resize: vertical; + } + + summary { + display: list-item; + } + + small { + font-size: 80%; + } + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + dialog { + padding: 0; + } + + a { + color: inherit; + text-decoration: inherit; + } + + abbr:where([title]) { + text-decoration: underline dotted; + } + + b, + strong { + font-weight: bolder; + } + + code, + kbd, + samp, + pre { + font-size: 1em; + --font-mono-fallback: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New'; + font-family: var(--global-font-mono, var(--font-fallback)); + } + + + input[type="text"], + input[type="email"], + input[type="search"], + input[type="password"] { + -webkit-appearance: none; + -moz-appearance: none; + } + + input[type='search'] { + -webkit-appearance: textfield; + outline-offset: -2px; + } + + ::-webkit-search-decoration, + ::-webkit-search-cancel-button { + -webkit-appearance: none; + } + + ::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; + } + + input[type="number"]::-webkit-inner-spin-button, + input[type="number"]::-webkit-outer-spin-button { + height: auto; + } + + input[type='number']{ + -moz-appearance: textfield; + } + + :-moz-ui-invalid { + box-shadow: none; + } + + :-moz-focusring { + outline: auto; + } +} \ No newline at end of file diff --git a/src/styled-system/tokens/index.css b/src/styled-system/tokens/index.css new file mode 100644 index 00000000..640b66b0 --- /dev/null +++ b/src/styled-system/tokens/index.css @@ -0,0 +1,423 @@ +@layer tokens { + :where(:root, :host) { + --borders-none: none; + --easings-default: cubic-bezier(0.4, 0, 0.2, 1); + --easings-linear: linear; + --easings-in: cubic-bezier(0.4, 0, 1, 1); + --easings-out: cubic-bezier(0, 0, 0.2, 1); + --easings-in-out: cubic-bezier(0.4, 0, 0.2, 1); + --durations-fastest: 50ms; + --durations-faster: 100ms; + --durations-fast: 150ms; + --durations-normal: 200ms; + --durations-slow: 300ms; + --durations-slower: 400ms; + --durations-slowest: 500ms; + --radii-xs: 0.125rem; + --radii-sm: 0.25rem; + --radii-md: 0.375rem; + --radii-lg: 0.5rem; + --radii-xl: 0.75rem; + --radii-2xl: 1rem; + --radii-3xl: 1.5rem; + --radii-full: 9999px; + --font-weights-thin: 100; + --font-weights-extralight: 200; + --font-weights-light: 300; + --font-weights-normal: 400; + --font-weights-medium: 500; + --font-weights-semibold: 600; + --font-weights-bold: 700; + --font-weights-extrabold: 800; + --font-weights-black: 900; + --line-heights-none: 1; + --line-heights-tight: 1.25; + --line-heights-snug: 1.375; + --line-heights-normal: 1.5; + --line-heights-relaxed: 1.625; + --line-heights-loose: 2; + --fonts-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --fonts-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; + --fonts-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --letter-spacings-tighter: -0.05em; + --letter-spacings-tight: -0.025em; + --letter-spacings-normal: 0em; + --letter-spacings-wide: 0.025em; + --letter-spacings-wider: 0.05em; + --letter-spacings-widest: 0.1em; + --font-sizes-2xs: 0.5rem; + --font-sizes-xs: 0.75rem; + --font-sizes-sm: 0.875rem; + --font-sizes-md: 1rem; + --font-sizes-lg: 1.125rem; + --font-sizes-xl: 1.25rem; + --font-sizes-2xl: 1.5rem; + --font-sizes-3xl: 1.875rem; + --font-sizes-4xl: 2.25rem; + --font-sizes-5xl: 3rem; + --font-sizes-6xl: 3.75rem; + --font-sizes-7xl: 4.5rem; + --font-sizes-8xl: 6rem; + --font-sizes-9xl: 8rem; + --shadows-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --shadows-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --shadows-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --shadows-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --shadows-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --shadows-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --shadows-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); + --colors-current: currentColor; + --colors-black: #000; + --colors-white: #fff; + --colors-transparent: rgb(0 0 0 / 0); + --colors-rose-50: #fff1f2; + --colors-rose-100: #ffe4e6; + --colors-rose-200: #fecdd3; + --colors-rose-300: #fda4af; + --colors-rose-400: #fb7185; + --colors-rose-500: #f43f5e; + --colors-rose-600: #e11d48; + --colors-rose-700: #be123c; + --colors-rose-800: #9f1239; + --colors-rose-900: #881337; + --colors-rose-950: #4c0519; + --colors-pink-50: #fdf2f8; + --colors-pink-100: #fce7f3; + --colors-pink-200: #fbcfe8; + --colors-pink-300: #f9a8d4; + --colors-pink-400: #f472b6; + --colors-pink-500: #ec4899; + --colors-pink-600: #db2777; + --colors-pink-700: #be185d; + --colors-pink-800: #9d174d; + --colors-pink-900: #831843; + --colors-pink-950: #500724; + --colors-fuchsia-50: #fdf4ff; + --colors-fuchsia-100: #fae8ff; + --colors-fuchsia-200: #f5d0fe; + --colors-fuchsia-300: #f0abfc; + --colors-fuchsia-400: #e879f9; + --colors-fuchsia-500: #d946ef; + --colors-fuchsia-600: #c026d3; + --colors-fuchsia-700: #a21caf; + --colors-fuchsia-800: #86198f; + --colors-fuchsia-900: #701a75; + --colors-fuchsia-950: #4a044e; + --colors-purple-50: #faf5ff; + --colors-purple-100: #f3e8ff; + --colors-purple-200: #e9d5ff; + --colors-purple-300: #d8b4fe; + --colors-purple-400: #c084fc; + --colors-purple-500: #a855f7; + --colors-purple-600: #9333ea; + --colors-purple-700: #7e22ce; + --colors-purple-800: #6b21a8; + --colors-purple-900: #581c87; + --colors-purple-950: #3b0764; + --colors-violet-50: #f5f3ff; + --colors-violet-100: #ede9fe; + --colors-violet-200: #ddd6fe; + --colors-violet-300: #c4b5fd; + --colors-violet-400: #a78bfa; + --colors-violet-500: #8b5cf6; + --colors-violet-600: #7c3aed; + --colors-violet-700: #6d28d9; + --colors-violet-800: #5b21b6; + --colors-violet-900: #4c1d95; + --colors-violet-950: #2e1065; + --colors-indigo-50: #eef2ff; + --colors-indigo-100: #e0e7ff; + --colors-indigo-200: #c7d2fe; + --colors-indigo-300: #a5b4fc; + --colors-indigo-400: #818cf8; + --colors-indigo-500: #6366f1; + --colors-indigo-600: #4f46e5; + --colors-indigo-700: #4338ca; + --colors-indigo-800: #3730a3; + --colors-indigo-900: #312e81; + --colors-indigo-950: #1e1b4b; + --colors-blue-50: #eff6ff; + --colors-blue-100: #dbeafe; + --colors-blue-200: #bfdbfe; + --colors-blue-300: #93c5fd; + --colors-blue-400: #60a5fa; + --colors-blue-500: #3b82f6; + --colors-blue-600: #2563eb; + --colors-blue-700: #1d4ed8; + --colors-blue-800: #1e40af; + --colors-blue-900: #1e3a8a; + --colors-blue-950: #172554; + --colors-sky-50: #f0f9ff; + --colors-sky-100: #e0f2fe; + --colors-sky-200: #bae6fd; + --colors-sky-300: #7dd3fc; + --colors-sky-400: #38bdf8; + --colors-sky-500: #0ea5e9; + --colors-sky-600: #0284c7; + --colors-sky-700: #0369a1; + --colors-sky-800: #075985; + --colors-sky-900: #0c4a6e; + --colors-sky-950: #082f49; + --colors-cyan-50: #ecfeff; + --colors-cyan-100: #cffafe; + --colors-cyan-200: #a5f3fc; + --colors-cyan-300: #67e8f9; + --colors-cyan-400: #22d3ee; + --colors-cyan-500: #06b6d4; + --colors-cyan-600: #0891b2; + --colors-cyan-700: #0e7490; + --colors-cyan-800: #155e75; + --colors-cyan-900: #164e63; + --colors-cyan-950: #083344; + --colors-teal-50: #f0fdfa; + --colors-teal-100: #ccfbf1; + --colors-teal-200: #99f6e4; + --colors-teal-300: #5eead4; + --colors-teal-400: #2dd4bf; + --colors-teal-500: #14b8a6; + --colors-teal-600: #0d9488; + --colors-teal-700: #0f766e; + --colors-teal-800: #115e59; + --colors-teal-900: #134e4a; + --colors-teal-950: #042f2e; + --colors-emerald-50: #ecfdf5; + --colors-emerald-100: #d1fae5; + --colors-emerald-200: #a7f3d0; + --colors-emerald-300: #6ee7b7; + --colors-emerald-400: #34d399; + --colors-emerald-500: #10b981; + --colors-emerald-600: #059669; + --colors-emerald-700: #047857; + --colors-emerald-800: #065f46; + --colors-emerald-900: #064e3b; + --colors-emerald-950: #022c22; + --colors-green-50: #f0fdf4; + --colors-green-100: #dcfce7; + --colors-green-200: #bbf7d0; + --colors-green-300: #86efac; + --colors-green-400: #4ade80; + --colors-green-500: #22c55e; + --colors-green-600: #16a34a; + --colors-green-700: #15803d; + --colors-green-800: #166534; + --colors-green-900: #14532d; + --colors-green-950: #052e16; + --colors-lime-50: #f7fee7; + --colors-lime-100: #ecfccb; + --colors-lime-200: #d9f99d; + --colors-lime-300: #bef264; + --colors-lime-400: #a3e635; + --colors-lime-500: #84cc16; + --colors-lime-600: #65a30d; + --colors-lime-700: #4d7c0f; + --colors-lime-800: #3f6212; + --colors-lime-900: #365314; + --colors-lime-950: #1a2e05; + --colors-yellow-50: #fefce8; + --colors-yellow-100: #fef9c3; + --colors-yellow-200: #fef08a; + --colors-yellow-300: #fde047; + --colors-yellow-400: #facc15; + --colors-yellow-500: #eab308; + --colors-yellow-600: #ca8a04; + --colors-yellow-700: #a16207; + --colors-yellow-800: #854d0e; + --colors-yellow-900: #713f12; + --colors-yellow-950: #422006; + --colors-amber-50: #fffbeb; + --colors-amber-100: #fef3c7; + --colors-amber-200: #fde68a; + --colors-amber-300: #fcd34d; + --colors-amber-400: #fbbf24; + --colors-amber-500: #f59e0b; + --colors-amber-600: #d97706; + --colors-amber-700: #b45309; + --colors-amber-800: #92400e; + --colors-amber-900: #78350f; + --colors-amber-950: #451a03; + --colors-orange-50: #fff7ed; + --colors-orange-100: #ffedd5; + --colors-orange-200: #fed7aa; + --colors-orange-300: #fdba74; + --colors-orange-400: #fb923c; + --colors-orange-500: #f97316; + --colors-orange-600: #ea580c; + --colors-orange-700: #c2410c; + --colors-orange-800: #9a3412; + --colors-orange-900: #7c2d12; + --colors-orange-950: #431407; + --colors-red-50: #fef2f2; + --colors-red-100: #fee2e2; + --colors-red-200: #fecaca; + --colors-red-300: #fca5a5; + --colors-red-400: #f87171; + --colors-red-500: #ef4444; + --colors-red-600: #dc2626; + --colors-red-700: #b91c1c; + --colors-red-800: #991b1b; + --colors-red-900: #7f1d1d; + --colors-red-950: #450a0a; + --colors-neutral-50: #fafafa; + --colors-neutral-100: #f5f5f5; + --colors-neutral-200: #e5e5e5; + --colors-neutral-300: #d4d4d4; + --colors-neutral-400: #a3a3a3; + --colors-neutral-500: #737373; + --colors-neutral-600: #525252; + --colors-neutral-700: #404040; + --colors-neutral-800: #262626; + --colors-neutral-900: #171717; + --colors-neutral-950: #0a0a0a; + --colors-stone-50: #fafaf9; + --colors-stone-100: #f5f5f4; + --colors-stone-200: #e7e5e4; + --colors-stone-300: #d6d3d1; + --colors-stone-400: #a8a29e; + --colors-stone-500: #78716c; + --colors-stone-600: #57534e; + --colors-stone-700: #44403c; + --colors-stone-800: #292524; + --colors-stone-900: #1c1917; + --colors-stone-950: #0c0a09; + --colors-zinc-50: #fafafa; + --colors-zinc-100: #f4f4f5; + --colors-zinc-200: #e4e4e7; + --colors-zinc-300: #d4d4d8; + --colors-zinc-400: #a1a1aa; + --colors-zinc-500: #71717a; + --colors-zinc-600: #52525b; + --colors-zinc-700: #3f3f46; + --colors-zinc-800: #27272a; + --colors-zinc-900: #18181b; + --colors-zinc-950: #09090b; + --colors-gray-50: #f9fafb; + --colors-gray-100: #f3f4f6; + --colors-gray-200: #e5e7eb; + --colors-gray-300: #d1d5db; + --colors-gray-400: #9ca3af; + --colors-gray-500: #6b7280; + --colors-gray-600: #4b5563; + --colors-gray-700: #374151; + --colors-gray-800: #1f2937; + --colors-gray-900: #111827; + --colors-gray-950: #030712; + --colors-slate-50: #f8fafc; + --colors-slate-100: #f1f5f9; + --colors-slate-200: #e2e8f0; + --colors-slate-300: #cbd5e1; + --colors-slate-400: #94a3b8; + --colors-slate-500: #64748b; + --colors-slate-600: #475569; + --colors-slate-700: #334155; + --colors-slate-800: #1e293b; + --colors-slate-900: #0f172a; + --colors-slate-950: #020617; + --blurs-sm: 4px; + --blurs-base: 8px; + --blurs-md: 12px; + --blurs-lg: 16px; + --blurs-xl: 24px; + --blurs-2xl: 40px; + --blurs-3xl: 64px; + --spacing-0: 0rem; + --spacing-1: 0.25rem; + --spacing-2: 0.5rem; + --spacing-3: 0.75rem; + --spacing-4: 1rem; + --spacing-5: 1.25rem; + --spacing-6: 1.5rem; + --spacing-7: 1.75rem; + --spacing-8: 2rem; + --spacing-9: 2.25rem; + --spacing-10: 2.5rem; + --spacing-11: 2.75rem; + --spacing-12: 3rem; + --spacing-14: 3.5rem; + --spacing-16: 4rem; + --spacing-20: 5rem; + --spacing-24: 6rem; + --spacing-28: 7rem; + --spacing-32: 8rem; + --spacing-36: 9rem; + --spacing-40: 10rem; + --spacing-44: 11rem; + --spacing-48: 12rem; + --spacing-52: 13rem; + --spacing-56: 14rem; + --spacing-60: 15rem; + --spacing-64: 16rem; + --spacing-72: 18rem; + --spacing-80: 20rem; + --spacing-96: 24rem; + --spacing-0\.5: 0.125rem; + --spacing-1\.5: 0.375rem; + --spacing-2\.5: 0.625rem; + --spacing-3\.5: 0.875rem; + --sizes-0: 0rem; + --sizes-1: 0.25rem; + --sizes-2: 0.5rem; + --sizes-3: 0.75rem; + --sizes-4: 1rem; + --sizes-5: 1.25rem; + --sizes-6: 1.5rem; + --sizes-7: 1.75rem; + --sizes-8: 2rem; + --sizes-9: 2.25rem; + --sizes-10: 2.5rem; + --sizes-11: 2.75rem; + --sizes-12: 3rem; + --sizes-14: 3.5rem; + --sizes-16: 4rem; + --sizes-20: 5rem; + --sizes-24: 6rem; + --sizes-28: 7rem; + --sizes-32: 8rem; + --sizes-36: 9rem; + --sizes-40: 10rem; + --sizes-44: 11rem; + --sizes-48: 12rem; + --sizes-52: 13rem; + --sizes-56: 14rem; + --sizes-60: 15rem; + --sizes-64: 16rem; + --sizes-72: 18rem; + --sizes-80: 20rem; + --sizes-96: 24rem; + --sizes-0\.5: 0.125rem; + --sizes-1\.5: 0.375rem; + --sizes-2\.5: 0.625rem; + --sizes-3\.5: 0.875rem; + --sizes-xs: 20rem; + --sizes-sm: 24rem; + --sizes-md: 28rem; + --sizes-lg: 32rem; + --sizes-xl: 36rem; + --sizes-2xl: 42rem; + --sizes-3xl: 48rem; + --sizes-4xl: 56rem; + --sizes-5xl: 64rem; + --sizes-6xl: 72rem; + --sizes-7xl: 80rem; + --sizes-8xl: 90rem; + --sizes-prose: 65ch; + --sizes-full: 100%; + --sizes-min: min-content; + --sizes-max: max-content; + --sizes-fit: fit-content; + --sizes-breakpoint-sm: 640px; + --sizes-breakpoint-md: 768px; + --sizes-breakpoint-lg: 1024px; + --sizes-breakpoint-xl: 1280px; + --sizes-breakpoint-2xl: 1536px; + --animations-spin: spin 1s linear infinite; + --animations-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; + --animations-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + --animations-bounce: bounce 1s infinite; + --breakpoints-sm: 640px; + --breakpoints-md: 768px; + --breakpoints-lg: 1024px; + --breakpoints-xl: 1280px; + --breakpoints-2xl: 1536px +} + } + \ No newline at end of file diff --git a/src/styled-system/tokens/index.d.ts b/src/styled-system/tokens/index.d.ts new file mode 100644 index 00000000..c398f48f --- /dev/null +++ b/src/styled-system/tokens/index.d.ts @@ -0,0 +1,9 @@ +/* eslint-disable */ +import type { Token } from './tokens'; + +export declare const token: { + (path: Token, fallback?: string): string + var: (path: Token, fallback?: string) => string +} + +export * from './tokens'; \ No newline at end of file diff --git a/src/styled-system/tokens/index.mjs b/src/styled-system/tokens/index.mjs new file mode 100644 index 00000000..5db20578 --- /dev/null +++ b/src/styled-system/tokens/index.mjs @@ -0,0 +1,1864 @@ +const tokens = { + "borders.none": { + "value": "none", + "variable": "var(--borders-none)" + }, + "easings.default": { + "value": "cubic-bezier(0.4, 0, 0.2, 1)", + "variable": "var(--easings-default)" + }, + "easings.linear": { + "value": "linear", + "variable": "var(--easings-linear)" + }, + "easings.in": { + "value": "cubic-bezier(0.4, 0, 1, 1)", + "variable": "var(--easings-in)" + }, + "easings.out": { + "value": "cubic-bezier(0, 0, 0.2, 1)", + "variable": "var(--easings-out)" + }, + "easings.in-out": { + "value": "cubic-bezier(0.4, 0, 0.2, 1)", + "variable": "var(--easings-in-out)" + }, + "durations.fastest": { + "value": "50ms", + "variable": "var(--durations-fastest)" + }, + "durations.faster": { + "value": "100ms", + "variable": "var(--durations-faster)" + }, + "durations.fast": { + "value": "150ms", + "variable": "var(--durations-fast)" + }, + "durations.normal": { + "value": "200ms", + "variable": "var(--durations-normal)" + }, + "durations.slow": { + "value": "300ms", + "variable": "var(--durations-slow)" + }, + "durations.slower": { + "value": "400ms", + "variable": "var(--durations-slower)" + }, + "durations.slowest": { + "value": "500ms", + "variable": "var(--durations-slowest)" + }, + "radii.xs": { + "value": "0.125rem", + "variable": "var(--radii-xs)" + }, + "radii.sm": { + "value": "0.25rem", + "variable": "var(--radii-sm)" + }, + "radii.md": { + "value": "0.375rem", + "variable": "var(--radii-md)" + }, + "radii.lg": { + "value": "0.5rem", + "variable": "var(--radii-lg)" + }, + "radii.xl": { + "value": "0.75rem", + "variable": "var(--radii-xl)" + }, + "radii.2xl": { + "value": "1rem", + "variable": "var(--radii-2xl)" + }, + "radii.3xl": { + "value": "1.5rem", + "variable": "var(--radii-3xl)" + }, + "radii.full": { + "value": "9999px", + "variable": "var(--radii-full)" + }, + "fontWeights.thin": { + "value": "100", + "variable": "var(--font-weights-thin)" + }, + "fontWeights.extralight": { + "value": "200", + "variable": "var(--font-weights-extralight)" + }, + "fontWeights.light": { + "value": "300", + "variable": "var(--font-weights-light)" + }, + "fontWeights.normal": { + "value": "400", + "variable": "var(--font-weights-normal)" + }, + "fontWeights.medium": { + "value": "500", + "variable": "var(--font-weights-medium)" + }, + "fontWeights.semibold": { + "value": "600", + "variable": "var(--font-weights-semibold)" + }, + "fontWeights.bold": { + "value": "700", + "variable": "var(--font-weights-bold)" + }, + "fontWeights.extrabold": { + "value": "800", + "variable": "var(--font-weights-extrabold)" + }, + "fontWeights.black": { + "value": "900", + "variable": "var(--font-weights-black)" + }, + "lineHeights.none": { + "value": "1", + "variable": "var(--line-heights-none)" + }, + "lineHeights.tight": { + "value": "1.25", + "variable": "var(--line-heights-tight)" + }, + "lineHeights.snug": { + "value": "1.375", + "variable": "var(--line-heights-snug)" + }, + "lineHeights.normal": { + "value": "1.5", + "variable": "var(--line-heights-normal)" + }, + "lineHeights.relaxed": { + "value": "1.625", + "variable": "var(--line-heights-relaxed)" + }, + "lineHeights.loose": { + "value": "2", + "variable": "var(--line-heights-loose)" + }, + "fonts.sans": { + "value": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"", + "variable": "var(--fonts-sans)" + }, + "fonts.serif": { + "value": "ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif", + "variable": "var(--fonts-serif)" + }, + "fonts.mono": { + "value": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace", + "variable": "var(--fonts-mono)" + }, + "letterSpacings.tighter": { + "value": "-0.05em", + "variable": "var(--letter-spacings-tighter)" + }, + "letterSpacings.tight": { + "value": "-0.025em", + "variable": "var(--letter-spacings-tight)" + }, + "letterSpacings.normal": { + "value": "0em", + "variable": "var(--letter-spacings-normal)" + }, + "letterSpacings.wide": { + "value": "0.025em", + "variable": "var(--letter-spacings-wide)" + }, + "letterSpacings.wider": { + "value": "0.05em", + "variable": "var(--letter-spacings-wider)" + }, + "letterSpacings.widest": { + "value": "0.1em", + "variable": "var(--letter-spacings-widest)" + }, + "fontSizes.2xs": { + "value": "0.5rem", + "variable": "var(--font-sizes-2xs)" + }, + "fontSizes.xs": { + "value": "0.75rem", + "variable": "var(--font-sizes-xs)" + }, + "fontSizes.sm": { + "value": "0.875rem", + "variable": "var(--font-sizes-sm)" + }, + "fontSizes.md": { + "value": "1rem", + "variable": "var(--font-sizes-md)" + }, + "fontSizes.lg": { + "value": "1.125rem", + "variable": "var(--font-sizes-lg)" + }, + "fontSizes.xl": { + "value": "1.25rem", + "variable": "var(--font-sizes-xl)" + }, + "fontSizes.2xl": { + "value": "1.5rem", + "variable": "var(--font-sizes-2xl)" + }, + "fontSizes.3xl": { + "value": "1.875rem", + "variable": "var(--font-sizes-3xl)" + }, + "fontSizes.4xl": { + "value": "2.25rem", + "variable": "var(--font-sizes-4xl)" + }, + "fontSizes.5xl": { + "value": "3rem", + "variable": "var(--font-sizes-5xl)" + }, + "fontSizes.6xl": { + "value": "3.75rem", + "variable": "var(--font-sizes-6xl)" + }, + "fontSizes.7xl": { + "value": "4.5rem", + "variable": "var(--font-sizes-7xl)" + }, + "fontSizes.8xl": { + "value": "6rem", + "variable": "var(--font-sizes-8xl)" + }, + "fontSizes.9xl": { + "value": "8rem", + "variable": "var(--font-sizes-9xl)" + }, + "shadows.xs": { + "value": "0 1px 2px 0 rgb(0 0 0 / 0.05)", + "variable": "var(--shadows-xs)" + }, + "shadows.sm": { + "value": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)", + "variable": "var(--shadows-sm)" + }, + "shadows.md": { + "value": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)", + "variable": "var(--shadows-md)" + }, + "shadows.lg": { + "value": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)", + "variable": "var(--shadows-lg)" + }, + "shadows.xl": { + "value": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)", + "variable": "var(--shadows-xl)" + }, + "shadows.2xl": { + "value": "0 25px 50px -12px rgb(0 0 0 / 0.25)", + "variable": "var(--shadows-2xl)" + }, + "shadows.inner": { + "value": "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)", + "variable": "var(--shadows-inner)" + }, + "colors.current": { + "value": "currentColor", + "variable": "var(--colors-current)" + }, + "colors.black": { + "value": "#000", + "variable": "var(--colors-black)" + }, + "colors.white": { + "value": "#fff", + "variable": "var(--colors-white)" + }, + "colors.transparent": { + "value": "rgb(0 0 0 / 0)", + "variable": "var(--colors-transparent)" + }, + "colors.rose.50": { + "value": "#fff1f2", + "variable": "var(--colors-rose-50)" + }, + "colors.rose.100": { + "value": "#ffe4e6", + "variable": "var(--colors-rose-100)" + }, + "colors.rose.200": { + "value": "#fecdd3", + "variable": "var(--colors-rose-200)" + }, + "colors.rose.300": { + "value": "#fda4af", + "variable": "var(--colors-rose-300)" + }, + "colors.rose.400": { + "value": "#fb7185", + "variable": "var(--colors-rose-400)" + }, + "colors.rose.500": { + "value": "#f43f5e", + "variable": "var(--colors-rose-500)" + }, + "colors.rose.600": { + "value": "#e11d48", + "variable": "var(--colors-rose-600)" + }, + "colors.rose.700": { + "value": "#be123c", + "variable": "var(--colors-rose-700)" + }, + "colors.rose.800": { + "value": "#9f1239", + "variable": "var(--colors-rose-800)" + }, + "colors.rose.900": { + "value": "#881337", + "variable": "var(--colors-rose-900)" + }, + "colors.rose.950": { + "value": "#4c0519", + "variable": "var(--colors-rose-950)" + }, + "colors.pink.50": { + "value": "#fdf2f8", + "variable": "var(--colors-pink-50)" + }, + "colors.pink.100": { + "value": "#fce7f3", + "variable": "var(--colors-pink-100)" + }, + "colors.pink.200": { + "value": "#fbcfe8", + "variable": "var(--colors-pink-200)" + }, + "colors.pink.300": { + "value": "#f9a8d4", + "variable": "var(--colors-pink-300)" + }, + "colors.pink.400": { + "value": "#f472b6", + "variable": "var(--colors-pink-400)" + }, + "colors.pink.500": { + "value": "#ec4899", + "variable": "var(--colors-pink-500)" + }, + "colors.pink.600": { + "value": "#db2777", + "variable": "var(--colors-pink-600)" + }, + "colors.pink.700": { + "value": "#be185d", + "variable": "var(--colors-pink-700)" + }, + "colors.pink.800": { + "value": "#9d174d", + "variable": "var(--colors-pink-800)" + }, + "colors.pink.900": { + "value": "#831843", + "variable": "var(--colors-pink-900)" + }, + "colors.pink.950": { + "value": "#500724", + "variable": "var(--colors-pink-950)" + }, + "colors.fuchsia.50": { + "value": "#fdf4ff", + "variable": "var(--colors-fuchsia-50)" + }, + "colors.fuchsia.100": { + "value": "#fae8ff", + "variable": "var(--colors-fuchsia-100)" + }, + "colors.fuchsia.200": { + "value": "#f5d0fe", + "variable": "var(--colors-fuchsia-200)" + }, + "colors.fuchsia.300": { + "value": "#f0abfc", + "variable": "var(--colors-fuchsia-300)" + }, + "colors.fuchsia.400": { + "value": "#e879f9", + "variable": "var(--colors-fuchsia-400)" + }, + "colors.fuchsia.500": { + "value": "#d946ef", + "variable": "var(--colors-fuchsia-500)" + }, + "colors.fuchsia.600": { + "value": "#c026d3", + "variable": "var(--colors-fuchsia-600)" + }, + "colors.fuchsia.700": { + "value": "#a21caf", + "variable": "var(--colors-fuchsia-700)" + }, + "colors.fuchsia.800": { + "value": "#86198f", + "variable": "var(--colors-fuchsia-800)" + }, + "colors.fuchsia.900": { + "value": "#701a75", + "variable": "var(--colors-fuchsia-900)" + }, + "colors.fuchsia.950": { + "value": "#4a044e", + "variable": "var(--colors-fuchsia-950)" + }, + "colors.purple.50": { + "value": "#faf5ff", + "variable": "var(--colors-purple-50)" + }, + "colors.purple.100": { + "value": "#f3e8ff", + "variable": "var(--colors-purple-100)" + }, + "colors.purple.200": { + "value": "#e9d5ff", + "variable": "var(--colors-purple-200)" + }, + "colors.purple.300": { + "value": "#d8b4fe", + "variable": "var(--colors-purple-300)" + }, + "colors.purple.400": { + "value": "#c084fc", + "variable": "var(--colors-purple-400)" + }, + "colors.purple.500": { + "value": "#a855f7", + "variable": "var(--colors-purple-500)" + }, + "colors.purple.600": { + "value": "#9333ea", + "variable": "var(--colors-purple-600)" + }, + "colors.purple.700": { + "value": "#7e22ce", + "variable": "var(--colors-purple-700)" + }, + "colors.purple.800": { + "value": "#6b21a8", + "variable": "var(--colors-purple-800)" + }, + "colors.purple.900": { + "value": "#581c87", + "variable": "var(--colors-purple-900)" + }, + "colors.purple.950": { + "value": "#3b0764", + "variable": "var(--colors-purple-950)" + }, + "colors.violet.50": { + "value": "#f5f3ff", + "variable": "var(--colors-violet-50)" + }, + "colors.violet.100": { + "value": "#ede9fe", + "variable": "var(--colors-violet-100)" + }, + "colors.violet.200": { + "value": "#ddd6fe", + "variable": "var(--colors-violet-200)" + }, + "colors.violet.300": { + "value": "#c4b5fd", + "variable": "var(--colors-violet-300)" + }, + "colors.violet.400": { + "value": "#a78bfa", + "variable": "var(--colors-violet-400)" + }, + "colors.violet.500": { + "value": "#8b5cf6", + "variable": "var(--colors-violet-500)" + }, + "colors.violet.600": { + "value": "#7c3aed", + "variable": "var(--colors-violet-600)" + }, + "colors.violet.700": { + "value": "#6d28d9", + "variable": "var(--colors-violet-700)" + }, + "colors.violet.800": { + "value": "#5b21b6", + "variable": "var(--colors-violet-800)" + }, + "colors.violet.900": { + "value": "#4c1d95", + "variable": "var(--colors-violet-900)" + }, + "colors.violet.950": { + "value": "#2e1065", + "variable": "var(--colors-violet-950)" + }, + "colors.indigo.50": { + "value": "#eef2ff", + "variable": "var(--colors-indigo-50)" + }, + "colors.indigo.100": { + "value": "#e0e7ff", + "variable": "var(--colors-indigo-100)" + }, + "colors.indigo.200": { + "value": "#c7d2fe", + "variable": "var(--colors-indigo-200)" + }, + "colors.indigo.300": { + "value": "#a5b4fc", + "variable": "var(--colors-indigo-300)" + }, + "colors.indigo.400": { + "value": "#818cf8", + "variable": "var(--colors-indigo-400)" + }, + "colors.indigo.500": { + "value": "#6366f1", + "variable": "var(--colors-indigo-500)" + }, + "colors.indigo.600": { + "value": "#4f46e5", + "variable": "var(--colors-indigo-600)" + }, + "colors.indigo.700": { + "value": "#4338ca", + "variable": "var(--colors-indigo-700)" + }, + "colors.indigo.800": { + "value": "#3730a3", + "variable": "var(--colors-indigo-800)" + }, + "colors.indigo.900": { + "value": "#312e81", + "variable": "var(--colors-indigo-900)" + }, + "colors.indigo.950": { + "value": "#1e1b4b", + "variable": "var(--colors-indigo-950)" + }, + "colors.blue.50": { + "value": "#eff6ff", + "variable": "var(--colors-blue-50)" + }, + "colors.blue.100": { + "value": "#dbeafe", + "variable": "var(--colors-blue-100)" + }, + "colors.blue.200": { + "value": "#bfdbfe", + "variable": "var(--colors-blue-200)" + }, + "colors.blue.300": { + "value": "#93c5fd", + "variable": "var(--colors-blue-300)" + }, + "colors.blue.400": { + "value": "#60a5fa", + "variable": "var(--colors-blue-400)" + }, + "colors.blue.500": { + "value": "#3b82f6", + "variable": "var(--colors-blue-500)" + }, + "colors.blue.600": { + "value": "#2563eb", + "variable": "var(--colors-blue-600)" + }, + "colors.blue.700": { + "value": "#1d4ed8", + "variable": "var(--colors-blue-700)" + }, + "colors.blue.800": { + "value": "#1e40af", + "variable": "var(--colors-blue-800)" + }, + "colors.blue.900": { + "value": "#1e3a8a", + "variable": "var(--colors-blue-900)" + }, + "colors.blue.950": { + "value": "#172554", + "variable": "var(--colors-blue-950)" + }, + "colors.sky.50": { + "value": "#f0f9ff", + "variable": "var(--colors-sky-50)" + }, + "colors.sky.100": { + "value": "#e0f2fe", + "variable": "var(--colors-sky-100)" + }, + "colors.sky.200": { + "value": "#bae6fd", + "variable": "var(--colors-sky-200)" + }, + "colors.sky.300": { + "value": "#7dd3fc", + "variable": "var(--colors-sky-300)" + }, + "colors.sky.400": { + "value": "#38bdf8", + "variable": "var(--colors-sky-400)" + }, + "colors.sky.500": { + "value": "#0ea5e9", + "variable": "var(--colors-sky-500)" + }, + "colors.sky.600": { + "value": "#0284c7", + "variable": "var(--colors-sky-600)" + }, + "colors.sky.700": { + "value": "#0369a1", + "variable": "var(--colors-sky-700)" + }, + "colors.sky.800": { + "value": "#075985", + "variable": "var(--colors-sky-800)" + }, + "colors.sky.900": { + "value": "#0c4a6e", + "variable": "var(--colors-sky-900)" + }, + "colors.sky.950": { + "value": "#082f49", + "variable": "var(--colors-sky-950)" + }, + "colors.cyan.50": { + "value": "#ecfeff", + "variable": "var(--colors-cyan-50)" + }, + "colors.cyan.100": { + "value": "#cffafe", + "variable": "var(--colors-cyan-100)" + }, + "colors.cyan.200": { + "value": "#a5f3fc", + "variable": "var(--colors-cyan-200)" + }, + "colors.cyan.300": { + "value": "#67e8f9", + "variable": "var(--colors-cyan-300)" + }, + "colors.cyan.400": { + "value": "#22d3ee", + "variable": "var(--colors-cyan-400)" + }, + "colors.cyan.500": { + "value": "#06b6d4", + "variable": "var(--colors-cyan-500)" + }, + "colors.cyan.600": { + "value": "#0891b2", + "variable": "var(--colors-cyan-600)" + }, + "colors.cyan.700": { + "value": "#0e7490", + "variable": "var(--colors-cyan-700)" + }, + "colors.cyan.800": { + "value": "#155e75", + "variable": "var(--colors-cyan-800)" + }, + "colors.cyan.900": { + "value": "#164e63", + "variable": "var(--colors-cyan-900)" + }, + "colors.cyan.950": { + "value": "#083344", + "variable": "var(--colors-cyan-950)" + }, + "colors.teal.50": { + "value": "#f0fdfa", + "variable": "var(--colors-teal-50)" + }, + "colors.teal.100": { + "value": "#ccfbf1", + "variable": "var(--colors-teal-100)" + }, + "colors.teal.200": { + "value": "#99f6e4", + "variable": "var(--colors-teal-200)" + }, + "colors.teal.300": { + "value": "#5eead4", + "variable": "var(--colors-teal-300)" + }, + "colors.teal.400": { + "value": "#2dd4bf", + "variable": "var(--colors-teal-400)" + }, + "colors.teal.500": { + "value": "#14b8a6", + "variable": "var(--colors-teal-500)" + }, + "colors.teal.600": { + "value": "#0d9488", + "variable": "var(--colors-teal-600)" + }, + "colors.teal.700": { + "value": "#0f766e", + "variable": "var(--colors-teal-700)" + }, + "colors.teal.800": { + "value": "#115e59", + "variable": "var(--colors-teal-800)" + }, + "colors.teal.900": { + "value": "#134e4a", + "variable": "var(--colors-teal-900)" + }, + "colors.teal.950": { + "value": "#042f2e", + "variable": "var(--colors-teal-950)" + }, + "colors.emerald.50": { + "value": "#ecfdf5", + "variable": "var(--colors-emerald-50)" + }, + "colors.emerald.100": { + "value": "#d1fae5", + "variable": "var(--colors-emerald-100)" + }, + "colors.emerald.200": { + "value": "#a7f3d0", + "variable": "var(--colors-emerald-200)" + }, + "colors.emerald.300": { + "value": "#6ee7b7", + "variable": "var(--colors-emerald-300)" + }, + "colors.emerald.400": { + "value": "#34d399", + "variable": "var(--colors-emerald-400)" + }, + "colors.emerald.500": { + "value": "#10b981", + "variable": "var(--colors-emerald-500)" + }, + "colors.emerald.600": { + "value": "#059669", + "variable": "var(--colors-emerald-600)" + }, + "colors.emerald.700": { + "value": "#047857", + "variable": "var(--colors-emerald-700)" + }, + "colors.emerald.800": { + "value": "#065f46", + "variable": "var(--colors-emerald-800)" + }, + "colors.emerald.900": { + "value": "#064e3b", + "variable": "var(--colors-emerald-900)" + }, + "colors.emerald.950": { + "value": "#022c22", + "variable": "var(--colors-emerald-950)" + }, + "colors.green.50": { + "value": "#f0fdf4", + "variable": "var(--colors-green-50)" + }, + "colors.green.100": { + "value": "#dcfce7", + "variable": "var(--colors-green-100)" + }, + "colors.green.200": { + "value": "#bbf7d0", + "variable": "var(--colors-green-200)" + }, + "colors.green.300": { + "value": "#86efac", + "variable": "var(--colors-green-300)" + }, + "colors.green.400": { + "value": "#4ade80", + "variable": "var(--colors-green-400)" + }, + "colors.green.500": { + "value": "#22c55e", + "variable": "var(--colors-green-500)" + }, + "colors.green.600": { + "value": "#16a34a", + "variable": "var(--colors-green-600)" + }, + "colors.green.700": { + "value": "#15803d", + "variable": "var(--colors-green-700)" + }, + "colors.green.800": { + "value": "#166534", + "variable": "var(--colors-green-800)" + }, + "colors.green.900": { + "value": "#14532d", + "variable": "var(--colors-green-900)" + }, + "colors.green.950": { + "value": "#052e16", + "variable": "var(--colors-green-950)" + }, + "colors.lime.50": { + "value": "#f7fee7", + "variable": "var(--colors-lime-50)" + }, + "colors.lime.100": { + "value": "#ecfccb", + "variable": "var(--colors-lime-100)" + }, + "colors.lime.200": { + "value": "#d9f99d", + "variable": "var(--colors-lime-200)" + }, + "colors.lime.300": { + "value": "#bef264", + "variable": "var(--colors-lime-300)" + }, + "colors.lime.400": { + "value": "#a3e635", + "variable": "var(--colors-lime-400)" + }, + "colors.lime.500": { + "value": "#84cc16", + "variable": "var(--colors-lime-500)" + }, + "colors.lime.600": { + "value": "#65a30d", + "variable": "var(--colors-lime-600)" + }, + "colors.lime.700": { + "value": "#4d7c0f", + "variable": "var(--colors-lime-700)" + }, + "colors.lime.800": { + "value": "#3f6212", + "variable": "var(--colors-lime-800)" + }, + "colors.lime.900": { + "value": "#365314", + "variable": "var(--colors-lime-900)" + }, + "colors.lime.950": { + "value": "#1a2e05", + "variable": "var(--colors-lime-950)" + }, + "colors.yellow.50": { + "value": "#fefce8", + "variable": "var(--colors-yellow-50)" + }, + "colors.yellow.100": { + "value": "#fef9c3", + "variable": "var(--colors-yellow-100)" + }, + "colors.yellow.200": { + "value": "#fef08a", + "variable": "var(--colors-yellow-200)" + }, + "colors.yellow.300": { + "value": "#fde047", + "variable": "var(--colors-yellow-300)" + }, + "colors.yellow.400": { + "value": "#facc15", + "variable": "var(--colors-yellow-400)" + }, + "colors.yellow.500": { + "value": "#eab308", + "variable": "var(--colors-yellow-500)" + }, + "colors.yellow.600": { + "value": "#ca8a04", + "variable": "var(--colors-yellow-600)" + }, + "colors.yellow.700": { + "value": "#a16207", + "variable": "var(--colors-yellow-700)" + }, + "colors.yellow.800": { + "value": "#854d0e", + "variable": "var(--colors-yellow-800)" + }, + "colors.yellow.900": { + "value": "#713f12", + "variable": "var(--colors-yellow-900)" + }, + "colors.yellow.950": { + "value": "#422006", + "variable": "var(--colors-yellow-950)" + }, + "colors.amber.50": { + "value": "#fffbeb", + "variable": "var(--colors-amber-50)" + }, + "colors.amber.100": { + "value": "#fef3c7", + "variable": "var(--colors-amber-100)" + }, + "colors.amber.200": { + "value": "#fde68a", + "variable": "var(--colors-amber-200)" + }, + "colors.amber.300": { + "value": "#fcd34d", + "variable": "var(--colors-amber-300)" + }, + "colors.amber.400": { + "value": "#fbbf24", + "variable": "var(--colors-amber-400)" + }, + "colors.amber.500": { + "value": "#f59e0b", + "variable": "var(--colors-amber-500)" + }, + "colors.amber.600": { + "value": "#d97706", + "variable": "var(--colors-amber-600)" + }, + "colors.amber.700": { + "value": "#b45309", + "variable": "var(--colors-amber-700)" + }, + "colors.amber.800": { + "value": "#92400e", + "variable": "var(--colors-amber-800)" + }, + "colors.amber.900": { + "value": "#78350f", + "variable": "var(--colors-amber-900)" + }, + "colors.amber.950": { + "value": "#451a03", + "variable": "var(--colors-amber-950)" + }, + "colors.orange.50": { + "value": "#fff7ed", + "variable": "var(--colors-orange-50)" + }, + "colors.orange.100": { + "value": "#ffedd5", + "variable": "var(--colors-orange-100)" + }, + "colors.orange.200": { + "value": "#fed7aa", + "variable": "var(--colors-orange-200)" + }, + "colors.orange.300": { + "value": "#fdba74", + "variable": "var(--colors-orange-300)" + }, + "colors.orange.400": { + "value": "#fb923c", + "variable": "var(--colors-orange-400)" + }, + "colors.orange.500": { + "value": "#f97316", + "variable": "var(--colors-orange-500)" + }, + "colors.orange.600": { + "value": "#ea580c", + "variable": "var(--colors-orange-600)" + }, + "colors.orange.700": { + "value": "#c2410c", + "variable": "var(--colors-orange-700)" + }, + "colors.orange.800": { + "value": "#9a3412", + "variable": "var(--colors-orange-800)" + }, + "colors.orange.900": { + "value": "#7c2d12", + "variable": "var(--colors-orange-900)" + }, + "colors.orange.950": { + "value": "#431407", + "variable": "var(--colors-orange-950)" + }, + "colors.red.50": { + "value": "#fef2f2", + "variable": "var(--colors-red-50)" + }, + "colors.red.100": { + "value": "#fee2e2", + "variable": "var(--colors-red-100)" + }, + "colors.red.200": { + "value": "#fecaca", + "variable": "var(--colors-red-200)" + }, + "colors.red.300": { + "value": "#fca5a5", + "variable": "var(--colors-red-300)" + }, + "colors.red.400": { + "value": "#f87171", + "variable": "var(--colors-red-400)" + }, + "colors.red.500": { + "value": "#ef4444", + "variable": "var(--colors-red-500)" + }, + "colors.red.600": { + "value": "#dc2626", + "variable": "var(--colors-red-600)" + }, + "colors.red.700": { + "value": "#b91c1c", + "variable": "var(--colors-red-700)" + }, + "colors.red.800": { + "value": "#991b1b", + "variable": "var(--colors-red-800)" + }, + "colors.red.900": { + "value": "#7f1d1d", + "variable": "var(--colors-red-900)" + }, + "colors.red.950": { + "value": "#450a0a", + "variable": "var(--colors-red-950)" + }, + "colors.neutral.50": { + "value": "#fafafa", + "variable": "var(--colors-neutral-50)" + }, + "colors.neutral.100": { + "value": "#f5f5f5", + "variable": "var(--colors-neutral-100)" + }, + "colors.neutral.200": { + "value": "#e5e5e5", + "variable": "var(--colors-neutral-200)" + }, + "colors.neutral.300": { + "value": "#d4d4d4", + "variable": "var(--colors-neutral-300)" + }, + "colors.neutral.400": { + "value": "#a3a3a3", + "variable": "var(--colors-neutral-400)" + }, + "colors.neutral.500": { + "value": "#737373", + "variable": "var(--colors-neutral-500)" + }, + "colors.neutral.600": { + "value": "#525252", + "variable": "var(--colors-neutral-600)" + }, + "colors.neutral.700": { + "value": "#404040", + "variable": "var(--colors-neutral-700)" + }, + "colors.neutral.800": { + "value": "#262626", + "variable": "var(--colors-neutral-800)" + }, + "colors.neutral.900": { + "value": "#171717", + "variable": "var(--colors-neutral-900)" + }, + "colors.neutral.950": { + "value": "#0a0a0a", + "variable": "var(--colors-neutral-950)" + }, + "colors.stone.50": { + "value": "#fafaf9", + "variable": "var(--colors-stone-50)" + }, + "colors.stone.100": { + "value": "#f5f5f4", + "variable": "var(--colors-stone-100)" + }, + "colors.stone.200": { + "value": "#e7e5e4", + "variable": "var(--colors-stone-200)" + }, + "colors.stone.300": { + "value": "#d6d3d1", + "variable": "var(--colors-stone-300)" + }, + "colors.stone.400": { + "value": "#a8a29e", + "variable": "var(--colors-stone-400)" + }, + "colors.stone.500": { + "value": "#78716c", + "variable": "var(--colors-stone-500)" + }, + "colors.stone.600": { + "value": "#57534e", + "variable": "var(--colors-stone-600)" + }, + "colors.stone.700": { + "value": "#44403c", + "variable": "var(--colors-stone-700)" + }, + "colors.stone.800": { + "value": "#292524", + "variable": "var(--colors-stone-800)" + }, + "colors.stone.900": { + "value": "#1c1917", + "variable": "var(--colors-stone-900)" + }, + "colors.stone.950": { + "value": "#0c0a09", + "variable": "var(--colors-stone-950)" + }, + "colors.zinc.50": { + "value": "#fafafa", + "variable": "var(--colors-zinc-50)" + }, + "colors.zinc.100": { + "value": "#f4f4f5", + "variable": "var(--colors-zinc-100)" + }, + "colors.zinc.200": { + "value": "#e4e4e7", + "variable": "var(--colors-zinc-200)" + }, + "colors.zinc.300": { + "value": "#d4d4d8", + "variable": "var(--colors-zinc-300)" + }, + "colors.zinc.400": { + "value": "#a1a1aa", + "variable": "var(--colors-zinc-400)" + }, + "colors.zinc.500": { + "value": "#71717a", + "variable": "var(--colors-zinc-500)" + }, + "colors.zinc.600": { + "value": "#52525b", + "variable": "var(--colors-zinc-600)" + }, + "colors.zinc.700": { + "value": "#3f3f46", + "variable": "var(--colors-zinc-700)" + }, + "colors.zinc.800": { + "value": "#27272a", + "variable": "var(--colors-zinc-800)" + }, + "colors.zinc.900": { + "value": "#18181b", + "variable": "var(--colors-zinc-900)" + }, + "colors.zinc.950": { + "value": "#09090b", + "variable": "var(--colors-zinc-950)" + }, + "colors.gray.50": { + "value": "#f9fafb", + "variable": "var(--colors-gray-50)" + }, + "colors.gray.100": { + "value": "#f3f4f6", + "variable": "var(--colors-gray-100)" + }, + "colors.gray.200": { + "value": "#e5e7eb", + "variable": "var(--colors-gray-200)" + }, + "colors.gray.300": { + "value": "#d1d5db", + "variable": "var(--colors-gray-300)" + }, + "colors.gray.400": { + "value": "#9ca3af", + "variable": "var(--colors-gray-400)" + }, + "colors.gray.500": { + "value": "#6b7280", + "variable": "var(--colors-gray-500)" + }, + "colors.gray.600": { + "value": "#4b5563", + "variable": "var(--colors-gray-600)" + }, + "colors.gray.700": { + "value": "#374151", + "variable": "var(--colors-gray-700)" + }, + "colors.gray.800": { + "value": "#1f2937", + "variable": "var(--colors-gray-800)" + }, + "colors.gray.900": { + "value": "#111827", + "variable": "var(--colors-gray-900)" + }, + "colors.gray.950": { + "value": "#030712", + "variable": "var(--colors-gray-950)" + }, + "colors.slate.50": { + "value": "#f8fafc", + "variable": "var(--colors-slate-50)" + }, + "colors.slate.100": { + "value": "#f1f5f9", + "variable": "var(--colors-slate-100)" + }, + "colors.slate.200": { + "value": "#e2e8f0", + "variable": "var(--colors-slate-200)" + }, + "colors.slate.300": { + "value": "#cbd5e1", + "variable": "var(--colors-slate-300)" + }, + "colors.slate.400": { + "value": "#94a3b8", + "variable": "var(--colors-slate-400)" + }, + "colors.slate.500": { + "value": "#64748b", + "variable": "var(--colors-slate-500)" + }, + "colors.slate.600": { + "value": "#475569", + "variable": "var(--colors-slate-600)" + }, + "colors.slate.700": { + "value": "#334155", + "variable": "var(--colors-slate-700)" + }, + "colors.slate.800": { + "value": "#1e293b", + "variable": "var(--colors-slate-800)" + }, + "colors.slate.900": { + "value": "#0f172a", + "variable": "var(--colors-slate-900)" + }, + "colors.slate.950": { + "value": "#020617", + "variable": "var(--colors-slate-950)" + }, + "blurs.sm": { + "value": "4px", + "variable": "var(--blurs-sm)" + }, + "blurs.base": { + "value": "8px", + "variable": "var(--blurs-base)" + }, + "blurs.md": { + "value": "12px", + "variable": "var(--blurs-md)" + }, + "blurs.lg": { + "value": "16px", + "variable": "var(--blurs-lg)" + }, + "blurs.xl": { + "value": "24px", + "variable": "var(--blurs-xl)" + }, + "blurs.2xl": { + "value": "40px", + "variable": "var(--blurs-2xl)" + }, + "blurs.3xl": { + "value": "64px", + "variable": "var(--blurs-3xl)" + }, + "spacing.0": { + "value": "0rem", + "variable": "var(--spacing-0)" + }, + "spacing.1": { + "value": "0.25rem", + "variable": "var(--spacing-1)" + }, + "spacing.2": { + "value": "0.5rem", + "variable": "var(--spacing-2)" + }, + "spacing.3": { + "value": "0.75rem", + "variable": "var(--spacing-3)" + }, + "spacing.4": { + "value": "1rem", + "variable": "var(--spacing-4)" + }, + "spacing.5": { + "value": "1.25rem", + "variable": "var(--spacing-5)" + }, + "spacing.6": { + "value": "1.5rem", + "variable": "var(--spacing-6)" + }, + "spacing.7": { + "value": "1.75rem", + "variable": "var(--spacing-7)" + }, + "spacing.8": { + "value": "2rem", + "variable": "var(--spacing-8)" + }, + "spacing.9": { + "value": "2.25rem", + "variable": "var(--spacing-9)" + }, + "spacing.10": { + "value": "2.5rem", + "variable": "var(--spacing-10)" + }, + "spacing.11": { + "value": "2.75rem", + "variable": "var(--spacing-11)" + }, + "spacing.12": { + "value": "3rem", + "variable": "var(--spacing-12)" + }, + "spacing.14": { + "value": "3.5rem", + "variable": "var(--spacing-14)" + }, + "spacing.16": { + "value": "4rem", + "variable": "var(--spacing-16)" + }, + "spacing.20": { + "value": "5rem", + "variable": "var(--spacing-20)" + }, + "spacing.24": { + "value": "6rem", + "variable": "var(--spacing-24)" + }, + "spacing.28": { + "value": "7rem", + "variable": "var(--spacing-28)" + }, + "spacing.32": { + "value": "8rem", + "variable": "var(--spacing-32)" + }, + "spacing.36": { + "value": "9rem", + "variable": "var(--spacing-36)" + }, + "spacing.40": { + "value": "10rem", + "variable": "var(--spacing-40)" + }, + "spacing.44": { + "value": "11rem", + "variable": "var(--spacing-44)" + }, + "spacing.48": { + "value": "12rem", + "variable": "var(--spacing-48)" + }, + "spacing.52": { + "value": "13rem", + "variable": "var(--spacing-52)" + }, + "spacing.56": { + "value": "14rem", + "variable": "var(--spacing-56)" + }, + "spacing.60": { + "value": "15rem", + "variable": "var(--spacing-60)" + }, + "spacing.64": { + "value": "16rem", + "variable": "var(--spacing-64)" + }, + "spacing.72": { + "value": "18rem", + "variable": "var(--spacing-72)" + }, + "spacing.80": { + "value": "20rem", + "variable": "var(--spacing-80)" + }, + "spacing.96": { + "value": "24rem", + "variable": "var(--spacing-96)" + }, + "spacing.0.5": { + "value": "0.125rem", + "variable": "var(--spacing-0\\.5)" + }, + "spacing.1.5": { + "value": "0.375rem", + "variable": "var(--spacing-1\\.5)" + }, + "spacing.2.5": { + "value": "0.625rem", + "variable": "var(--spacing-2\\.5)" + }, + "spacing.3.5": { + "value": "0.875rem", + "variable": "var(--spacing-3\\.5)" + }, + "sizes.0": { + "value": "0rem", + "variable": "var(--sizes-0)" + }, + "sizes.1": { + "value": "0.25rem", + "variable": "var(--sizes-1)" + }, + "sizes.2": { + "value": "0.5rem", + "variable": "var(--sizes-2)" + }, + "sizes.3": { + "value": "0.75rem", + "variable": "var(--sizes-3)" + }, + "sizes.4": { + "value": "1rem", + "variable": "var(--sizes-4)" + }, + "sizes.5": { + "value": "1.25rem", + "variable": "var(--sizes-5)" + }, + "sizes.6": { + "value": "1.5rem", + "variable": "var(--sizes-6)" + }, + "sizes.7": { + "value": "1.75rem", + "variable": "var(--sizes-7)" + }, + "sizes.8": { + "value": "2rem", + "variable": "var(--sizes-8)" + }, + "sizes.9": { + "value": "2.25rem", + "variable": "var(--sizes-9)" + }, + "sizes.10": { + "value": "2.5rem", + "variable": "var(--sizes-10)" + }, + "sizes.11": { + "value": "2.75rem", + "variable": "var(--sizes-11)" + }, + "sizes.12": { + "value": "3rem", + "variable": "var(--sizes-12)" + }, + "sizes.14": { + "value": "3.5rem", + "variable": "var(--sizes-14)" + }, + "sizes.16": { + "value": "4rem", + "variable": "var(--sizes-16)" + }, + "sizes.20": { + "value": "5rem", + "variable": "var(--sizes-20)" + }, + "sizes.24": { + "value": "6rem", + "variable": "var(--sizes-24)" + }, + "sizes.28": { + "value": "7rem", + "variable": "var(--sizes-28)" + }, + "sizes.32": { + "value": "8rem", + "variable": "var(--sizes-32)" + }, + "sizes.36": { + "value": "9rem", + "variable": "var(--sizes-36)" + }, + "sizes.40": { + "value": "10rem", + "variable": "var(--sizes-40)" + }, + "sizes.44": { + "value": "11rem", + "variable": "var(--sizes-44)" + }, + "sizes.48": { + "value": "12rem", + "variable": "var(--sizes-48)" + }, + "sizes.52": { + "value": "13rem", + "variable": "var(--sizes-52)" + }, + "sizes.56": { + "value": "14rem", + "variable": "var(--sizes-56)" + }, + "sizes.60": { + "value": "15rem", + "variable": "var(--sizes-60)" + }, + "sizes.64": { + "value": "16rem", + "variable": "var(--sizes-64)" + }, + "sizes.72": { + "value": "18rem", + "variable": "var(--sizes-72)" + }, + "sizes.80": { + "value": "20rem", + "variable": "var(--sizes-80)" + }, + "sizes.96": { + "value": "24rem", + "variable": "var(--sizes-96)" + }, + "sizes.0.5": { + "value": "0.125rem", + "variable": "var(--sizes-0\\.5)" + }, + "sizes.1.5": { + "value": "0.375rem", + "variable": "var(--sizes-1\\.5)" + }, + "sizes.2.5": { + "value": "0.625rem", + "variable": "var(--sizes-2\\.5)" + }, + "sizes.3.5": { + "value": "0.875rem", + "variable": "var(--sizes-3\\.5)" + }, + "sizes.xs": { + "value": "20rem", + "variable": "var(--sizes-xs)" + }, + "sizes.sm": { + "value": "24rem", + "variable": "var(--sizes-sm)" + }, + "sizes.md": { + "value": "28rem", + "variable": "var(--sizes-md)" + }, + "sizes.lg": { + "value": "32rem", + "variable": "var(--sizes-lg)" + }, + "sizes.xl": { + "value": "36rem", + "variable": "var(--sizes-xl)" + }, + "sizes.2xl": { + "value": "42rem", + "variable": "var(--sizes-2xl)" + }, + "sizes.3xl": { + "value": "48rem", + "variable": "var(--sizes-3xl)" + }, + "sizes.4xl": { + "value": "56rem", + "variable": "var(--sizes-4xl)" + }, + "sizes.5xl": { + "value": "64rem", + "variable": "var(--sizes-5xl)" + }, + "sizes.6xl": { + "value": "72rem", + "variable": "var(--sizes-6xl)" + }, + "sizes.7xl": { + "value": "80rem", + "variable": "var(--sizes-7xl)" + }, + "sizes.8xl": { + "value": "90rem", + "variable": "var(--sizes-8xl)" + }, + "sizes.prose": { + "value": "65ch", + "variable": "var(--sizes-prose)" + }, + "sizes.full": { + "value": "100%", + "variable": "var(--sizes-full)" + }, + "sizes.min": { + "value": "min-content", + "variable": "var(--sizes-min)" + }, + "sizes.max": { + "value": "max-content", + "variable": "var(--sizes-max)" + }, + "sizes.fit": { + "value": "fit-content", + "variable": "var(--sizes-fit)" + }, + "sizes.breakpoint-sm": { + "value": "640px", + "variable": "var(--sizes-breakpoint-sm)" + }, + "sizes.breakpoint-md": { + "value": "768px", + "variable": "var(--sizes-breakpoint-md)" + }, + "sizes.breakpoint-lg": { + "value": "1024px", + "variable": "var(--sizes-breakpoint-lg)" + }, + "sizes.breakpoint-xl": { + "value": "1280px", + "variable": "var(--sizes-breakpoint-xl)" + }, + "sizes.breakpoint-2xl": { + "value": "1536px", + "variable": "var(--sizes-breakpoint-2xl)" + }, + "animations.spin": { + "value": "spin 1s linear infinite", + "variable": "var(--animations-spin)" + }, + "animations.ping": { + "value": "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite", + "variable": "var(--animations-ping)" + }, + "animations.pulse": { + "value": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite", + "variable": "var(--animations-pulse)" + }, + "animations.bounce": { + "value": "bounce 1s infinite", + "variable": "var(--animations-bounce)" + }, + "breakpoints.sm": { + "value": "640px", + "variable": "var(--breakpoints-sm)" + }, + "breakpoints.md": { + "value": "768px", + "variable": "var(--breakpoints-md)" + }, + "breakpoints.lg": { + "value": "1024px", + "variable": "var(--breakpoints-lg)" + }, + "breakpoints.xl": { + "value": "1280px", + "variable": "var(--breakpoints-xl)" + }, + "breakpoints.2xl": { + "value": "1536px", + "variable": "var(--breakpoints-2xl)" + }, + "spacing.-1": { + "value": "calc(var(--spacing-1) * -1)", + "variable": "var(--spacing-1)" + }, + "spacing.-2": { + "value": "calc(var(--spacing-2) * -1)", + "variable": "var(--spacing-2)" + }, + "spacing.-3": { + "value": "calc(var(--spacing-3) * -1)", + "variable": "var(--spacing-3)" + }, + "spacing.-4": { + "value": "calc(var(--spacing-4) * -1)", + "variable": "var(--spacing-4)" + }, + "spacing.-5": { + "value": "calc(var(--spacing-5) * -1)", + "variable": "var(--spacing-5)" + }, + "spacing.-6": { + "value": "calc(var(--spacing-6) * -1)", + "variable": "var(--spacing-6)" + }, + "spacing.-7": { + "value": "calc(var(--spacing-7) * -1)", + "variable": "var(--spacing-7)" + }, + "spacing.-8": { + "value": "calc(var(--spacing-8) * -1)", + "variable": "var(--spacing-8)" + }, + "spacing.-9": { + "value": "calc(var(--spacing-9) * -1)", + "variable": "var(--spacing-9)" + }, + "spacing.-10": { + "value": "calc(var(--spacing-10) * -1)", + "variable": "var(--spacing-10)" + }, + "spacing.-11": { + "value": "calc(var(--spacing-11) * -1)", + "variable": "var(--spacing-11)" + }, + "spacing.-12": { + "value": "calc(var(--spacing-12) * -1)", + "variable": "var(--spacing-12)" + }, + "spacing.-14": { + "value": "calc(var(--spacing-14) * -1)", + "variable": "var(--spacing-14)" + }, + "spacing.-16": { + "value": "calc(var(--spacing-16) * -1)", + "variable": "var(--spacing-16)" + }, + "spacing.-20": { + "value": "calc(var(--spacing-20) * -1)", + "variable": "var(--spacing-20)" + }, + "spacing.-24": { + "value": "calc(var(--spacing-24) * -1)", + "variable": "var(--spacing-24)" + }, + "spacing.-28": { + "value": "calc(var(--spacing-28) * -1)", + "variable": "var(--spacing-28)" + }, + "spacing.-32": { + "value": "calc(var(--spacing-32) * -1)", + "variable": "var(--spacing-32)" + }, + "spacing.-36": { + "value": "calc(var(--spacing-36) * -1)", + "variable": "var(--spacing-36)" + }, + "spacing.-40": { + "value": "calc(var(--spacing-40) * -1)", + "variable": "var(--spacing-40)" + }, + "spacing.-44": { + "value": "calc(var(--spacing-44) * -1)", + "variable": "var(--spacing-44)" + }, + "spacing.-48": { + "value": "calc(var(--spacing-48) * -1)", + "variable": "var(--spacing-48)" + }, + "spacing.-52": { + "value": "calc(var(--spacing-52) * -1)", + "variable": "var(--spacing-52)" + }, + "spacing.-56": { + "value": "calc(var(--spacing-56) * -1)", + "variable": "var(--spacing-56)" + }, + "spacing.-60": { + "value": "calc(var(--spacing-60) * -1)", + "variable": "var(--spacing-60)" + }, + "spacing.-64": { + "value": "calc(var(--spacing-64) * -1)", + "variable": "var(--spacing-64)" + }, + "spacing.-72": { + "value": "calc(var(--spacing-72) * -1)", + "variable": "var(--spacing-72)" + }, + "spacing.-80": { + "value": "calc(var(--spacing-80) * -1)", + "variable": "var(--spacing-80)" + }, + "spacing.-96": { + "value": "calc(var(--spacing-96) * -1)", + "variable": "var(--spacing-96)" + }, + "spacing.-0.5": { + "value": "calc(var(--spacing-0\\.5) * -1)", + "variable": "var(--spacing-0\\.5)" + }, + "spacing.-1.5": { + "value": "calc(var(--spacing-1\\.5) * -1)", + "variable": "var(--spacing-1\\.5)" + }, + "spacing.-2.5": { + "value": "calc(var(--spacing-2\\.5) * -1)", + "variable": "var(--spacing-2\\.5)" + }, + "spacing.-3.5": { + "value": "calc(var(--spacing-3\\.5) * -1)", + "variable": "var(--spacing-3\\.5)" + }, + "colors.colorPalette": { + "value": "var(--colors-color-palette)", + "variable": "var(--colors-color-palette)" + }, + "colors.colorPalette.50": { + "value": "var(--colors-color-palette-50)", + "variable": "var(--colors-color-palette-50)" + }, + "colors.colorPalette.100": { + "value": "var(--colors-color-palette-100)", + "variable": "var(--colors-color-palette-100)" + }, + "colors.colorPalette.200": { + "value": "var(--colors-color-palette-200)", + "variable": "var(--colors-color-palette-200)" + }, + "colors.colorPalette.300": { + "value": "var(--colors-color-palette-300)", + "variable": "var(--colors-color-palette-300)" + }, + "colors.colorPalette.400": { + "value": "var(--colors-color-palette-400)", + "variable": "var(--colors-color-palette-400)" + }, + "colors.colorPalette.500": { + "value": "var(--colors-color-palette-500)", + "variable": "var(--colors-color-palette-500)" + }, + "colors.colorPalette.600": { + "value": "var(--colors-color-palette-600)", + "variable": "var(--colors-color-palette-600)" + }, + "colors.colorPalette.700": { + "value": "var(--colors-color-palette-700)", + "variable": "var(--colors-color-palette-700)" + }, + "colors.colorPalette.800": { + "value": "var(--colors-color-palette-800)", + "variable": "var(--colors-color-palette-800)" + }, + "colors.colorPalette.900": { + "value": "var(--colors-color-palette-900)", + "variable": "var(--colors-color-palette-900)" + }, + "colors.colorPalette.950": { + "value": "var(--colors-color-palette-950)", + "variable": "var(--colors-color-palette-950)" + } +} + +export function token(path, fallback) { + return tokens[path]?.value || fallback +} + +function tokenVar(path, fallback) { + return tokens[path]?.variable || fallback +} + +token.var = tokenVar \ No newline at end of file diff --git a/src/styled-system/tokens/keyframes.css b/src/styled-system/tokens/keyframes.css new file mode 100644 index 00000000..12c573b6 --- /dev/null +++ b/src/styled-system/tokens/keyframes.css @@ -0,0 +1,44 @@ +@layer tokens { + @keyframes spin { + to { + transform: rotate(360deg) + } + } + @keyframes ping { + 75%, 100% { + transform: scale(2); + opacity: 0 + } + } + @keyframes pulse { + 50% { + opacity: .5 + } + } + @keyframes bounce { + 0%, 100% { + transform: translateY(-25%); + animation-timing-function: cubic-bezier(0.8,0,1,1) + } + 50% { + transform: none; + animation-timing-function: cubic-bezier(0,0,0.2,1) + } + } + @keyframes gradient { + 0% { + transform: rotate(0deg); + background-position-x: 0%; + background-position-y: 0% + } + 50% { + background-position-x: 50%; + background-position-y: 100% + } + 100% { + transform: rotate(0deg); + background-position-x: 0%; + background-position-y: 0% + } + } +} \ No newline at end of file diff --git a/src/styled-system/tokens/tokens.d.ts b/src/styled-system/tokens/tokens.d.ts new file mode 100644 index 00000000..227f6866 --- /dev/null +++ b/src/styled-system/tokens/tokens.d.ts @@ -0,0 +1,60 @@ +/* eslint-disable */ +export type Token = "borders.none" | "easings.default" | "easings.linear" | "easings.in" | "easings.out" | "easings.in-out" | "durations.fastest" | "durations.faster" | "durations.fast" | "durations.normal" | "durations.slow" | "durations.slower" | "durations.slowest" | "radii.xs" | "radii.sm" | "radii.md" | "radii.lg" | "radii.xl" | "radii.2xl" | "radii.3xl" | "radii.full" | "fontWeights.thin" | "fontWeights.extralight" | "fontWeights.light" | "fontWeights.normal" | "fontWeights.medium" | "fontWeights.semibold" | "fontWeights.bold" | "fontWeights.extrabold" | "fontWeights.black" | "lineHeights.none" | "lineHeights.tight" | "lineHeights.snug" | "lineHeights.normal" | "lineHeights.relaxed" | "lineHeights.loose" | "fonts.sans" | "fonts.serif" | "fonts.mono" | "letterSpacings.tighter" | "letterSpacings.tight" | "letterSpacings.normal" | "letterSpacings.wide" | "letterSpacings.wider" | "letterSpacings.widest" | "fontSizes.2xs" | "fontSizes.xs" | "fontSizes.sm" | "fontSizes.md" | "fontSizes.lg" | "fontSizes.xl" | "fontSizes.2xl" | "fontSizes.3xl" | "fontSizes.4xl" | "fontSizes.5xl" | "fontSizes.6xl" | "fontSizes.7xl" | "fontSizes.8xl" | "fontSizes.9xl" | "shadows.xs" | "shadows.sm" | "shadows.md" | "shadows.lg" | "shadows.xl" | "shadows.2xl" | "shadows.inner" | "colors.current" | "colors.black" | "colors.white" | "colors.transparent" | "colors.rose.50" | "colors.rose.100" | "colors.rose.200" | "colors.rose.300" | "colors.rose.400" | "colors.rose.500" | "colors.rose.600" | "colors.rose.700" | "colors.rose.800" | "colors.rose.900" | "colors.rose.950" | "colors.pink.50" | "colors.pink.100" | "colors.pink.200" | "colors.pink.300" | "colors.pink.400" | "colors.pink.500" | "colors.pink.600" | "colors.pink.700" | "colors.pink.800" | "colors.pink.900" | "colors.pink.950" | "colors.fuchsia.50" | "colors.fuchsia.100" | "colors.fuchsia.200" | "colors.fuchsia.300" | "colors.fuchsia.400" | "colors.fuchsia.500" | "colors.fuchsia.600" | "colors.fuchsia.700" | "colors.fuchsia.800" | "colors.fuchsia.900" | "colors.fuchsia.950" | "colors.purple.50" | "colors.purple.100" | "colors.purple.200" | "colors.purple.300" | "colors.purple.400" | "colors.purple.500" | "colors.purple.600" | "colors.purple.700" | "colors.purple.800" | "colors.purple.900" | "colors.purple.950" | "colors.violet.50" | "colors.violet.100" | "colors.violet.200" | "colors.violet.300" | "colors.violet.400" | "colors.violet.500" | "colors.violet.600" | "colors.violet.700" | "colors.violet.800" | "colors.violet.900" | "colors.violet.950" | "colors.indigo.50" | "colors.indigo.100" | "colors.indigo.200" | "colors.indigo.300" | "colors.indigo.400" | "colors.indigo.500" | "colors.indigo.600" | "colors.indigo.700" | "colors.indigo.800" | "colors.indigo.900" | "colors.indigo.950" | "colors.blue.50" | "colors.blue.100" | "colors.blue.200" | "colors.blue.300" | "colors.blue.400" | "colors.blue.500" | "colors.blue.600" | "colors.blue.700" | "colors.blue.800" | "colors.blue.900" | "colors.blue.950" | "colors.sky.50" | "colors.sky.100" | "colors.sky.200" | "colors.sky.300" | "colors.sky.400" | "colors.sky.500" | "colors.sky.600" | "colors.sky.700" | "colors.sky.800" | "colors.sky.900" | "colors.sky.950" | "colors.cyan.50" | "colors.cyan.100" | "colors.cyan.200" | "colors.cyan.300" | "colors.cyan.400" | "colors.cyan.500" | "colors.cyan.600" | "colors.cyan.700" | "colors.cyan.800" | "colors.cyan.900" | "colors.cyan.950" | "colors.teal.50" | "colors.teal.100" | "colors.teal.200" | "colors.teal.300" | "colors.teal.400" | "colors.teal.500" | "colors.teal.600" | "colors.teal.700" | "colors.teal.800" | "colors.teal.900" | "colors.teal.950" | "colors.emerald.50" | "colors.emerald.100" | "colors.emerald.200" | "colors.emerald.300" | "colors.emerald.400" | "colors.emerald.500" | "colors.emerald.600" | "colors.emerald.700" | "colors.emerald.800" | "colors.emerald.900" | "colors.emerald.950" | "colors.green.50" | "colors.green.100" | "colors.green.200" | "colors.green.300" | "colors.green.400" | "colors.green.500" | "colors.green.600" | "colors.green.700" | "colors.green.800" | "colors.green.900" | "colors.green.950" | "colors.lime.50" | "colors.lime.100" | "colors.lime.200" | "colors.lime.300" | "colors.lime.400" | "colors.lime.500" | "colors.lime.600" | "colors.lime.700" | "colors.lime.800" | "colors.lime.900" | "colors.lime.950" | "colors.yellow.50" | "colors.yellow.100" | "colors.yellow.200" | "colors.yellow.300" | "colors.yellow.400" | "colors.yellow.500" | "colors.yellow.600" | "colors.yellow.700" | "colors.yellow.800" | "colors.yellow.900" | "colors.yellow.950" | "colors.amber.50" | "colors.amber.100" | "colors.amber.200" | "colors.amber.300" | "colors.amber.400" | "colors.amber.500" | "colors.amber.600" | "colors.amber.700" | "colors.amber.800" | "colors.amber.900" | "colors.amber.950" | "colors.orange.50" | "colors.orange.100" | "colors.orange.200" | "colors.orange.300" | "colors.orange.400" | "colors.orange.500" | "colors.orange.600" | "colors.orange.700" | "colors.orange.800" | "colors.orange.900" | "colors.orange.950" | "colors.red.50" | "colors.red.100" | "colors.red.200" | "colors.red.300" | "colors.red.400" | "colors.red.500" | "colors.red.600" | "colors.red.700" | "colors.red.800" | "colors.red.900" | "colors.red.950" | "colors.neutral.50" | "colors.neutral.100" | "colors.neutral.200" | "colors.neutral.300" | "colors.neutral.400" | "colors.neutral.500" | "colors.neutral.600" | "colors.neutral.700" | "colors.neutral.800" | "colors.neutral.900" | "colors.neutral.950" | "colors.stone.50" | "colors.stone.100" | "colors.stone.200" | "colors.stone.300" | "colors.stone.400" | "colors.stone.500" | "colors.stone.600" | "colors.stone.700" | "colors.stone.800" | "colors.stone.900" | "colors.stone.950" | "colors.zinc.50" | "colors.zinc.100" | "colors.zinc.200" | "colors.zinc.300" | "colors.zinc.400" | "colors.zinc.500" | "colors.zinc.600" | "colors.zinc.700" | "colors.zinc.800" | "colors.zinc.900" | "colors.zinc.950" | "colors.gray.50" | "colors.gray.100" | "colors.gray.200" | "colors.gray.300" | "colors.gray.400" | "colors.gray.500" | "colors.gray.600" | "colors.gray.700" | "colors.gray.800" | "colors.gray.900" | "colors.gray.950" | "colors.slate.50" | "colors.slate.100" | "colors.slate.200" | "colors.slate.300" | "colors.slate.400" | "colors.slate.500" | "colors.slate.600" | "colors.slate.700" | "colors.slate.800" | "colors.slate.900" | "colors.slate.950" | "blurs.sm" | "blurs.base" | "blurs.md" | "blurs.lg" | "blurs.xl" | "blurs.2xl" | "blurs.3xl" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "spacing.9" | "spacing.10" | "spacing.11" | "spacing.12" | "spacing.14" | "spacing.16" | "spacing.20" | "spacing.24" | "spacing.28" | "spacing.32" | "spacing.36" | "spacing.40" | "spacing.44" | "spacing.48" | "spacing.52" | "spacing.56" | "spacing.60" | "spacing.64" | "spacing.72" | "spacing.80" | "spacing.96" | "spacing.0.5" | "spacing.1.5" | "spacing.2.5" | "spacing.3.5" | "sizes.0" | "sizes.1" | "sizes.2" | "sizes.3" | "sizes.4" | "sizes.5" | "sizes.6" | "sizes.7" | "sizes.8" | "sizes.9" | "sizes.10" | "sizes.11" | "sizes.12" | "sizes.14" | "sizes.16" | "sizes.20" | "sizes.24" | "sizes.28" | "sizes.32" | "sizes.36" | "sizes.40" | "sizes.44" | "sizes.48" | "sizes.52" | "sizes.56" | "sizes.60" | "sizes.64" | "sizes.72" | "sizes.80" | "sizes.96" | "sizes.0.5" | "sizes.1.5" | "sizes.2.5" | "sizes.3.5" | "sizes.xs" | "sizes.sm" | "sizes.md" | "sizes.lg" | "sizes.xl" | "sizes.2xl" | "sizes.3xl" | "sizes.4xl" | "sizes.5xl" | "sizes.6xl" | "sizes.7xl" | "sizes.8xl" | "sizes.prose" | "sizes.full" | "sizes.min" | "sizes.max" | "sizes.fit" | "sizes.breakpoint-sm" | "sizes.breakpoint-md" | "sizes.breakpoint-lg" | "sizes.breakpoint-xl" | "sizes.breakpoint-2xl" | "animations.spin" | "animations.ping" | "animations.pulse" | "animations.bounce" | "breakpoints.sm" | "breakpoints.md" | "breakpoints.lg" | "breakpoints.xl" | "breakpoints.2xl" | "spacing.-1" | "spacing.-2" | "spacing.-3" | "spacing.-4" | "spacing.-5" | "spacing.-6" | "spacing.-7" | "spacing.-8" | "spacing.-9" | "spacing.-10" | "spacing.-11" | "spacing.-12" | "spacing.-14" | "spacing.-16" | "spacing.-20" | "spacing.-24" | "spacing.-28" | "spacing.-32" | "spacing.-36" | "spacing.-40" | "spacing.-44" | "spacing.-48" | "spacing.-52" | "spacing.-56" | "spacing.-60" | "spacing.-64" | "spacing.-72" | "spacing.-80" | "spacing.-96" | "spacing.-0.5" | "spacing.-1.5" | "spacing.-2.5" | "spacing.-3.5" | "colors.colorPalette" | "colors.colorPalette.50" | "colors.colorPalette.100" | "colors.colorPalette.200" | "colors.colorPalette.300" | "colors.colorPalette.400" | "colors.colorPalette.500" | "colors.colorPalette.600" | "colors.colorPalette.700" | "colors.colorPalette.800" | "colors.colorPalette.900" | "colors.colorPalette.950" + +export type ColorPalette = "current" | "black" | "white" | "transparent" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "neutral" | "stone" | "zinc" | "gray" | "slate" + +export type BorderToken = "none" + +export type EasingToken = "default" | "linear" | "in" | "out" | "in-out" + +export type DurationToken = "fastest" | "faster" | "fast" | "normal" | "slow" | "slower" | "slowest" + +export type RadiusToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" + +export type FontWeightToken = "thin" | "extralight" | "light" | "normal" | "medium" | "semibold" | "bold" | "extrabold" | "black" + +export type LineHeightToken = "none" | "tight" | "snug" | "normal" | "relaxed" | "loose" + +export type FontToken = "sans" | "serif" | "mono" + +export type LetterSpacingToken = "tighter" | "tight" | "normal" | "wide" | "wider" | "widest" + +export type FontSizeToken = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" + +export type ShadowToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "inner" + +export type ColorToken = "current" | "black" | "white" | "transparent" | "rose.50" | "rose.100" | "rose.200" | "rose.300" | "rose.400" | "rose.500" | "rose.600" | "rose.700" | "rose.800" | "rose.900" | "rose.950" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "pink.950" | "fuchsia.50" | "fuchsia.100" | "fuchsia.200" | "fuchsia.300" | "fuchsia.400" | "fuchsia.500" | "fuchsia.600" | "fuchsia.700" | "fuchsia.800" | "fuchsia.900" | "fuchsia.950" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "purple.950" | "violet.50" | "violet.100" | "violet.200" | "violet.300" | "violet.400" | "violet.500" | "violet.600" | "violet.700" | "violet.800" | "violet.900" | "violet.950" | "indigo.50" | "indigo.100" | "indigo.200" | "indigo.300" | "indigo.400" | "indigo.500" | "indigo.600" | "indigo.700" | "indigo.800" | "indigo.900" | "indigo.950" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "blue.950" | "sky.50" | "sky.100" | "sky.200" | "sky.300" | "sky.400" | "sky.500" | "sky.600" | "sky.700" | "sky.800" | "sky.900" | "sky.950" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "cyan.950" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "teal.950" | "emerald.50" | "emerald.100" | "emerald.200" | "emerald.300" | "emerald.400" | "emerald.500" | "emerald.600" | "emerald.700" | "emerald.800" | "emerald.900" | "emerald.950" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "green.950" | "lime.50" | "lime.100" | "lime.200" | "lime.300" | "lime.400" | "lime.500" | "lime.600" | "lime.700" | "lime.800" | "lime.900" | "lime.950" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "yellow.950" | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | "amber.950" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "orange.950" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "red.950" | "neutral.50" | "neutral.100" | "neutral.200" | "neutral.300" | "neutral.400" | "neutral.500" | "neutral.600" | "neutral.700" | "neutral.800" | "neutral.900" | "neutral.950" | "stone.50" | "stone.100" | "stone.200" | "stone.300" | "stone.400" | "stone.500" | "stone.600" | "stone.700" | "stone.800" | "stone.900" | "stone.950" | "zinc.50" | "zinc.100" | "zinc.200" | "zinc.300" | "zinc.400" | "zinc.500" | "zinc.600" | "zinc.700" | "zinc.800" | "zinc.900" | "zinc.950" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "gray.950" | "slate.50" | "slate.100" | "slate.200" | "slate.300" | "slate.400" | "slate.500" | "slate.600" | "slate.700" | "slate.800" | "slate.900" | "slate.950" | "colorPalette" | "colorPalette.50" | "colorPalette.100" | "colorPalette.200" | "colorPalette.300" | "colorPalette.400" | "colorPalette.500" | "colorPalette.600" | "colorPalette.700" | "colorPalette.800" | "colorPalette.900" | "colorPalette.950" + +export type BlurToken = "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "3xl" + +export type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-0.5" | "-1.5" | "-2.5" | "-3.5" + +export type SizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | "full" | "min" | "max" | "fit" | "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl" | "breakpoint-2xl" + +export type AnimationToken = "spin" | "ping" | "pulse" | "bounce" + +export type BreakpointToken = "sm" | "md" | "lg" | "xl" | "2xl" + +export type AnimationName = "spin" | "ping" | "pulse" | "bounce" | "gradient" + +export type Tokens = { + borders: BorderToken + easings: EasingToken + durations: DurationToken + radii: RadiusToken + fontWeights: FontWeightToken + lineHeights: LineHeightToken + fonts: FontToken + letterSpacings: LetterSpacingToken + fontSizes: FontSizeToken + shadows: ShadowToken + colors: ColorToken + blurs: BlurToken + spacing: SpacingToken + sizes: SizeToken + animations: AnimationToken + breakpoints: BreakpointToken + animationName: AnimationName +} & { [token: string]: never } + +export type TokenCategory = "zIndex" | "opacity" | "colors" | "fonts" | "fontSizes" | "fontWeights" | "lineHeights" | "letterSpacings" | "sizes" | "shadows" | "spacing" | "radii" | "borders" | "durations" | "easings" | "animations" | "blurs" | "gradients" | "breakpoints" | "assets" \ No newline at end of file diff --git a/src/styled-system/types/composition.d.ts b/src/styled-system/types/composition.d.ts new file mode 100644 index 00000000..08b2ed97 --- /dev/null +++ b/src/styled-system/types/composition.d.ts @@ -0,0 +1,111 @@ +/* eslint-disable */ +import type { CompositionStyleObject } from './system-types'; + +interface Token { + value: T + description?: string +} + +interface Recursive { + [key: string]: Recursive | T +} + +/* ----------------------------------------------------------------------------- + * Text styles + * -----------------------------------------------------------------------------*/ + +type TextStyleProperty = + | 'fontSize' + | 'fontSizeAdjust' + | 'fontVariationSettings' + | 'fontVariantPosition' + | 'fontVariantCaps' + | 'fontVariantNumeric' + | 'fontVariantAlternates' + | 'fontVariantLigatures' + | 'fontFamily' + | 'fontWeight' + | 'fontSynthesis' + | 'fontStyle' + | 'fontVariant' + | 'lineHeight' + | 'letterSpacing' + | 'textDecoration' + | 'textTransform' + | 'textIndent' + | 'textDecorationColor' + | 'textDecorationLine' + | 'textDecorationStyle' + | 'textEmphasisColor' + | 'textEmphasisPosition' + | 'textEmphasisStyle' + | 'hyphenateCharacter' + | 'textOrientation' + | 'textOverflow' + | 'textRendering' + +export type TextStyle = CompositionStyleObject + +export type TextStyles = Recursive> + +/* ----------------------------------------------------------------------------- + * Layer styles + * -----------------------------------------------------------------------------*/ + +type Placement = + | 'Top' + | 'Right' + | 'Bottom' + | 'Left' + | 'Inline' + | 'Block' + | 'InlineStart' + | 'InlineEnd' + | 'BlockStart' + | 'BlockEnd' + +type Radius = + | `Top${'Right' | 'Left'}` + | `Bottom${'Right' | 'Left'}` + | `Start${'Start' | 'End'}` + | `End${'Start' | 'End'}` + +type LayerStyleProperty = + | 'background' + | 'backgroundColor' + | 'backgroundImage' + | 'borderRadius' + | 'border' + | 'borderWidth' + | 'borderColor' + | 'borderStyle' + | 'boxShadow' + | 'filter' + | 'backdropFilter' + | 'transform' + | 'color' + | 'opacity' + | 'backgroundBlendMode' + | 'backgroundAttachment' + | 'backgroundClip' + | 'backgroundOrigin' + | 'backgroundPosition' + | 'backgroundRepeat' + | 'backgroundSize' + | `border${Placement}` + | `border${Placement}Width` + | 'borderRadius' + | `border${Radius}Radius` + | `border${Placement}Color` + | `border${Placement}Style` + | 'padding' + | `padding${Placement}` + +export type LayerStyle = CompositionStyleObject + +export type LayerStyles = Recursive> + +export interface CompositionStyles { + textStyles: TextStyles + layerStyles: LayerStyles +} diff --git a/src/styled-system/types/conditions.d.ts b/src/styled-system/types/conditions.d.ts new file mode 100644 index 00000000..eb1aa8cb --- /dev/null +++ b/src/styled-system/types/conditions.d.ts @@ -0,0 +1,252 @@ +/* eslint-disable */ +import type { AnySelector, Selectors } from './selectors'; + +export interface Conditions { + /** `&:is(:hover, [data-hover])` */ + "_hover": string + /** `&:is(:focus, [data-focus])` */ + "_focus": string + /** `&:focus-within` */ + "_focusWithin": string + /** `&:is(:focus-visible, [data-focus-visible])` */ + "_focusVisible": string + /** `&:is(:disabled, [disabled], [data-disabled])` */ + "_disabled": string + /** `&:is(:active, [data-active])` */ + "_active": string + /** `&:visited` */ + "_visited": string + /** `&:target` */ + "_target": string + /** `&:is(:read-only, [data-read-only])` */ + "_readOnly": string + /** `&:read-write` */ + "_readWrite": string + /** `&:is(:empty, [data-empty])` */ + "_empty": string + /** `&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])` */ + "_checked": string + /** `&:enabled` */ + "_enabled": string + /** `&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])` */ + "_expanded": string + /** `&[data-highlighted]` */ + "_highlighted": string + /** `&::before` */ + "_before": string + /** `&::after` */ + "_after": string + /** `&::first-letter` */ + "_firstLetter": string + /** `&::first-line` */ + "_firstLine": string + /** `&::marker` */ + "_marker": string + /** `&::selection` */ + "_selection": string + /** `&::file-selector-button` */ + "_file": string + /** `&::backdrop` */ + "_backdrop": string + /** `&:first-child` */ + "_first": string + /** `&:last-child` */ + "_last": string + /** `&:only-child` */ + "_only": string + /** `&:nth-child(even)` */ + "_even": string + /** `&:nth-child(odd)` */ + "_odd": string + /** `&:first-of-type` */ + "_firstOfType": string + /** `&:last-of-type` */ + "_lastOfType": string + /** `&:only-of-type` */ + "_onlyOfType": string + /** `.peer:is(:focus, [data-focus]) ~ &` */ + "_peerFocus": string + /** `.peer:is(:hover, [data-hover]) ~ &` */ + "_peerHover": string + /** `.peer:is(:active, [data-active]) ~ &` */ + "_peerActive": string + /** `.peer:focus-within ~ &` */ + "_peerFocusWithin": string + /** `.peer:is(:focus-visible, [data-focus-visible]) ~ &` */ + "_peerFocusVisible": string + /** `.peer:is(:disabled, [disabled], [data-disabled]) ~ &` */ + "_peerDisabled": string + /** `.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &` */ + "_peerChecked": string + /** `.peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &` */ + "_peerInvalid": string + /** `.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &` */ + "_peerExpanded": string + /** `.peer:placeholder-shown ~ &` */ + "_peerPlaceholderShown": string + /** `.group:is(:focus, [data-focus]) &` */ + "_groupFocus": string + /** `.group:is(:hover, [data-hover]) &` */ + "_groupHover": string + /** `.group:is(:active, [data-active]) &` */ + "_groupActive": string + /** `.group:focus-within &` */ + "_groupFocusWithin": string + /** `.group:is(:focus-visible, [data-focus-visible]) &` */ + "_groupFocusVisible": string + /** `.group:is(:disabled, [disabled], [data-disabled]) &` */ + "_groupDisabled": string + /** `.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &` */ + "_groupChecked": string + /** `.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &` */ + "_groupExpanded": string + /** `.group:invalid &` */ + "_groupInvalid": string + /** `&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate")` */ + "_indeterminate": string + /** `&:is(:required, [data-required], [aria-required=true])` */ + "_required": string + /** `&:is(:valid, [data-valid])` */ + "_valid": string + /** `&:is(:invalid, [data-invalid])` */ + "_invalid": string + /** `&:autofill` */ + "_autofill": string + /** `&:in-range` */ + "_inRange": string + /** `&:out-of-range` */ + "_outOfRange": string + /** `&::placeholder` */ + "_placeholder": string + /** `&:placeholder-shown` */ + "_placeholderShown": string + /** `&:is([aria-pressed=true], [data-pressed])` */ + "_pressed": string + /** `&:is([aria-selected=true], [data-selected])` */ + "_selected": string + /** `&:default` */ + "_default": string + /** `&:optional` */ + "_optional": string + /** `&:is([open], [data-open], [data-state="open"])` */ + "_open": string + /** `&:is([closed], [data-closed], [data-state="closed"])` */ + "_closed": string + /** `&:fullscreen` */ + "_fullscreen": string + /** `&:is([data-loading], [aria-busy=true])` */ + "_loading": string + /** `&[aria-current=page]` */ + "_currentPage": string + /** `&[aria-current=step]` */ + "_currentStep": string + /** `@media (prefers-reduced-motion: reduce)` */ + "_motionReduce": string + /** `@media (prefers-reduced-motion: no-preference)` */ + "_motionSafe": string + /** `@media print` */ + "_print": string + /** `@media (orientation: landscape)` */ + "_landscape": string + /** `@media (orientation: portrait)` */ + "_portrait": string + /** ` &.dark, .dark &` */ + "_dark": string + /** ` &.light, .light &` */ + "_light": string + /** `@media (prefers-color-scheme: dark)` */ + "_osDark": string + /** `@media (prefers-color-scheme: light)` */ + "_osLight": string + /** `@media (forced-colors: active)` */ + "_highContrast": string + /** `@media (prefers-contrast: less)` */ + "_lessContrast": string + /** `@media (prefers-contrast: more)` */ + "_moreContrast": string + /** `[dir=ltr] &` */ + "_ltr": string + /** `[dir=rtl] &` */ + "_rtl": string + /** `&::-webkit-scrollbar` */ + "_scrollbar": string + /** `&::-webkit-scrollbar-thumb` */ + "_scrollbarThumb": string + /** `&::-webkit-scrollbar-track` */ + "_scrollbarTrack": string + /** `&[data-orientation=horizontal]` */ + "_horizontal": string + /** `&[data-orientation=vertical]` */ + "_vertical": string + /** `@media screen and (min-width: 40em)` */ + "sm": string + /** `@media screen and (min-width: 40em) and (max-width: 47.9975em)` */ + "smOnly": string + /** `@media screen and (max-width: 39.9975em)` */ + "smDown": string + /** `@media screen and (min-width: 48em)` */ + "md": string + /** `@media screen and (min-width: 48em) and (max-width: 63.9975em)` */ + "mdOnly": string + /** `@media screen and (max-width: 47.9975em)` */ + "mdDown": string + /** `@media screen and (min-width: 64em)` */ + "lg": string + /** `@media screen and (min-width: 64em) and (max-width: 79.9975em)` */ + "lgOnly": string + /** `@media screen and (max-width: 63.9975em)` */ + "lgDown": string + /** `@media screen and (min-width: 80em)` */ + "xl": string + /** `@media screen and (min-width: 80em) and (max-width: 95.9975em)` */ + "xlOnly": string + /** `@media screen and (max-width: 79.9975em)` */ + "xlDown": string + /** `@media screen and (min-width: 96em)` */ + "2xl": string + /** `@media screen and (min-width: 96em)` */ + "2xlOnly": string + /** `@media screen and (max-width: 95.9975em)` */ + "2xlDown": string + /** `@media screen and (min-width: 40em) and (max-width: 47.9975em)` */ + "smToMd": string + /** `@media screen and (min-width: 40em) and (max-width: 63.9975em)` */ + "smToLg": string + /** `@media screen and (min-width: 40em) and (max-width: 79.9975em)` */ + "smToXl": string + /** `@media screen and (min-width: 40em) and (max-width: 95.9975em)` */ + "smTo2xl": string + /** `@media screen and (min-width: 48em) and (max-width: 63.9975em)` */ + "mdToLg": string + /** `@media screen and (min-width: 48em) and (max-width: 79.9975em)` */ + "mdToXl": string + /** `@media screen and (min-width: 48em) and (max-width: 95.9975em)` */ + "mdTo2xl": string + /** `@media screen and (min-width: 64em) and (max-width: 79.9975em)` */ + "lgToXl": string + /** `@media screen and (min-width: 64em) and (max-width: 95.9975em)` */ + "lgTo2xl": string + /** `@media screen and (min-width: 80em) and (max-width: 95.9975em)` */ + "xlTo2xl": string + /** The base (=no conditions) styles to apply */ + "base": string +} + +export type Condition = keyof Conditions + +export type Conditional = + | V + | Array + | { + [K in keyof Conditions]?: Conditional + } + +export type ConditionalValue = Conditional + +export type Nested

= P & { + [K in Selectors]?: Nested

+} & { + [K in AnySelector]?: Nested

+} & { + [K in keyof Conditions]?: Nested

+} diff --git a/src/styled-system/types/csstype.d.ts b/src/styled-system/types/csstype.d.ts new file mode 100644 index 00000000..11f95c0b --- /dev/null +++ b/src/styled-system/types/csstype.d.ts @@ -0,0 +1,20749 @@ +/* eslint-disable */ +export {}; + +export type PropertyValue = TValue extends Array + ? Array + : TValue extends infer TUnpacked & {} + ? TUnpacked + : TValue; + +export type Fallback = { [P in keyof T]: T[P] | NonNullable[] }; + +export interface StandardLonghandProperties { + /** + * The **`accent-color`** CSS property sets the accent color for user-interface controls generated by some elements. + * + * **Syntax**: `auto | ` + * + * **Initial value**: `auto` + * + * | Chrome | Firefox | Safari | Edge | IE | + * | :----: | :-----: | :------: | :--: | :-: | + * | **93** | **92** | **15.4** | n/a | No | + * + * @see https://developer.mozilla.org/docs/Web/CSS/accent-color + */ + accentColor?: Property.AccentColor | undefined; + /** + * The CSS **`align-content`** property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. + * + * **Syntax**: `normal | | | ? ` + * + * **Initial value**: `normal` + * + * | Chrome | Firefox | Safari | Edge | IE | + * | :------: | :-----: | :-----: | :----: | :----: | + * | **29** | **28** | **9** | **12** | **11** | + * | 21 _-x-_ | | 7 _-x-_ | | | + * + * @see https://developer.mozilla.org/docs/Web/CSS/align-content + */ + alignContent?: Property.AlignContent | undefined; + /** + * The CSS **`align-items`** property sets the `align-self` value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. + * + * **Syntax**: `normal | stretch | | [ ? ]` + * + * **Initial value**: `normal` + * + * | Chrome | Firefox | Safari | Edge | IE | + * | :------: | :-----: | :-----: | :----: | :----: | + * | **29** | **20** | **9** | **12** | **11** | + * | 21 _-x-_ | | 7 _-x-_ | | | + * + * @see https://developer.mozilla.org/docs/Web/CSS/align-items + */ + alignItems?: Property.AlignItems | undefined; + /** + * The **`align-self`** CSS property overrides a grid or flex item's `align-items` value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis. + * + * **Syntax**: `auto | normal | stretch | | ? ` + * + * **Initial value**: `auto` + * + * | Chrome | Firefox | Safari | Edge | IE | + * | :------: | :-----: | :-----: | :----: | :----: | + * | **29** | **20** | **9** | **12** | **10** | + * | 21 _-x-_ | | 7 _-x-_ | | | + * + * @see https://developer.mozilla.org/docs/Web/CSS/align-self + */ + alignSelf?: Property.AlignSelf | undefined; + /** + * The **`align-tracks`** CSS property sets the alignment in the masonry axis for grid containers that have masonry in their block axis. + * + * **Syntax**: `[ normal | | | ? ]#` + * + * **Initial value**: `normal` + * + * | Chrome | Firefox | Safari | Edge | IE | + * | :----: | :-----: | :----: | :--: | :-: | + * | No | n/a | No | n/a | No | + * + * @see https://developer.mozilla.org/docs/Web/CSS/align-tracks + */ + alignTracks?: Property.AlignTracks | undefined; + /** + * The **`animation-composition`** CSS property specifies the composite operation to use when multiple animations affect the same property simultaneously. + * + * **Syntax**: `#` + * + * **Initial value**: `replace` + * + * | Chrome | Firefox | Safari | Edge | IE | + * | :-----: | :-----: | :----: | :--: | :-: | + * | **112** | n/a | **16** | n/a | No | + * + * @see https://developer.mozilla.org/docs/Web/CSS/animation-composition + */ + animationComposition?: Property.AnimationComposition | undefined; + /** + * The **`animation-delay`** CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation. + * + * **Syntax**: `