diff --git a/.changeset/README.md b/.changeset/README.md new file mode 100644 index 00000000..e69de29b diff --git a/.changeset/config.json b/.changeset/config.json new file mode 100644 index 00000000..2373ce28 --- /dev/null +++ b/.changeset/config.json @@ -0,0 +1,11 @@ +{ + "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json", + "changelog": ["@changesets/changelog-github", { "repo": "GDSC-Hongik/wow-design-system" }], + "commit": false, + "fixed": [], + "linked": [], + "access": "public", + "baseBranch": "main", + "updateInternalDependencies": "patch", + "ignore": [] +} diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 00000000..f65e8150 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,135 @@ +// This configuration only applies to the package manager root. +const { resolve } = require("node:path"); + +const project = resolve(process.cwd(), "tsconfig.json"); +/** @type {import("eslint").Linter.Config} */ + +module.exports = { + parser: "@typescript-eslint/parser", + parserOptions: { + project, + }, + extends: [ + "eslint:recommended", + "plugin:storybook/recommended", + "plugin:import/recommended", + "plugin:react-hooks/recommended", + "plugin:import/typescript", + "plugin:jsx-a11y/recommended", + "plugin:prettier/recommended", + "eslint-config-turbo", + ], + plugins: [ + "@typescript-eslint/eslint-plugin", + "react", + "only-warn", + "simple-import-sort", + ], + globals: { + React: true, + JSX: true, + }, + env: { + browser: true, + node: true, + es6: true, + commonjs: true, + }, + rules: { + "no-unused-vars": "error", + eqeqeq: [ + "error", + "always", + { + null: "ignore", + }, + ], + "react-hooks/rules-of-hooks": "error", + "react-hooks/exhaustive-deps": "error", + "react/function-component-definition": [ + "error", + { + namedComponents: "arrow-function", + }, + ], + "react/jsx-curly-brace-presence": [ + "error", + { + props: "never", + children: "never", + }, + ], + "react/jsx-sort-props": [ + "error", + { + callbacksLast: true, + multiline: "last", + shorthandFirst: true, + }, + ], + "@typescript-eslint/consistent-type-imports": "error", + "@typescript-eslint/naming-convention": [ + "error", + { + format: ["camelCase", "UPPER_CASE", "PascalCase"], + selector: "variable", + leadingUnderscore: "allow", + }, + { + format: ["camelCase", "PascalCase"], + selector: "function", + }, + { + format: ["PascalCase"], + selector: "interface", + }, + { + format: ["PascalCase"], + selector: "typeAlias", + }, + ], + "@typescript-eslint/no-empty-function": "warn", + "import/no-duplicates": "error", + "import/namespace": [ + "error", + { + allowComputed: true, + }, + ], + "prettier/prettier": [ + "error", + { + endOfLine: "auto", + }, + ], + "simple-import-sort/imports": "error", + "simple-import-sort/exports": "error", + }, + + settings: { + "import/ignore": ["^@styled-system/css/css"], + "import/resolver": { + typescript: { project }, + }, + react: { + version: "detect", + }, + }, + + ignorePatterns: [ + ".*.js", + "node_modules/", + "dist/", + "styled-system/", + "panda.config.ts", + "rollup.config.js", + "postcss.config.cjs", + "jest.config.ts", + "jest.setup.ts", + "coverage/", + ], + + env: { + jest: true, + }, +}; diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS new file mode 100644 index 00000000..1faaaeb4 --- /dev/null +++ b/.github/CODEOWNERS @@ -0,0 +1 @@ +* @ghdtjgus76 @eugene028 @hamo-o @SeieunYoo @kongnayeon \ No newline at end of file diff --git a/.github/ISSUE_TEMPLATE/bug-issue-template.md b/.github/ISSUE_TEMPLATE/bug-issue-template.md new file mode 100644 index 00000000..9471be7f --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug-issue-template.md @@ -0,0 +1,13 @@ +--- +name: bug issue template +about: 버그 μˆ˜μ • +title: "[Bug]" +labels: bug +assignees: '' + +--- + +## 🎯 μ„€λͺ… + +## βœ… TODO +- [ ] diff --git a/.github/ISSUE_TEMPLATE/design-issue-template.md b/.github/ISSUE_TEMPLATE/design-issue-template.md new file mode 100644 index 00000000..84ca3fb4 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/design-issue-template.md @@ -0,0 +1,13 @@ +--- +name: design issue template +about: λ””μžμΈ μˆ˜μ • +title: "[Design]" +labels: design +assignees: '' + +--- + +## 🎯 μ„€λͺ… + +## βœ… TODO +- [ ] diff --git a/.github/ISSUE_TEMPLATE/feature-issue-template.md b/.github/ISSUE_TEMPLATE/feature-issue-template.md new file mode 100644 index 00000000..490de0df --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature-issue-template.md @@ -0,0 +1,13 @@ +--- +name: Feature issue template +about: κΈ°λŠ₯ κ΅¬ν˜„ +title: "[Feature]" +labels: feature +assignees: '' + +--- + +## 🎯 μ„€λͺ… + +## βœ… TODO +- [ ] diff --git a/.github/ISSUE_TEMPLATE/refactor-issue-template.md b/.github/ISSUE_TEMPLATE/refactor-issue-template.md new file mode 100644 index 00000000..4f6d3229 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/refactor-issue-template.md @@ -0,0 +1,13 @@ +--- +name: refactor issue template +about: λ¦¬νŒ©ν† λ§ +title: "[Refactor]" +labels: refactor +assignees: '' + +--- + +## 🎯 μ„€λͺ… + +## βœ… TODO +- [ ] diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md new file mode 100644 index 00000000..d58dfc1f --- /dev/null +++ b/.github/pull_request_template.md @@ -0,0 +1,5 @@ +## πŸŽ‰ λ³€κ²½ 사항 + +## 🚩 κ΄€λ ¨ 이슈 + +### πŸ™ μ—¬κΈ°λŠ” κΌ­ λ΄μ£Όμ„Έμš”! diff --git a/.github/workflows/a11y-test.yml b/.github/workflows/a11y-test.yml new file mode 100644 index 00000000..4418afef --- /dev/null +++ b/.github/workflows/a11y-test.yml @@ -0,0 +1,65 @@ +name: "a11y-test" + +on: + pull_request: + branches: + - main + paths: + - packages/wow-ui/src/** + +jobs: + accessibility: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + with: + fetch-depth: 0 + + - name: Setup Node.js + uses: actions/setup-node@v3 + with: + node-version: 20 + + - name: Cache Dependencies + uses: actions/cache@v2 + with: + path: ~/.pnpm-store + key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }} + restore-keys: | + ${{ runner.os }}-pnpm- + + - name: Install Pnpm + uses: pnpm/action-setup@v3 + with: + version: 8 + run_install: false + + - name: Install Dependency + run: pnpm install --no-frozen-lockfile + working-directory: packages/wow-ui + + - name: Install Playwright + run: pnpm dlx playwright install --with-deps + working-directory: packages/wow-ui + + - name: Build Packages + run: pnpm build + + - name: Start Storybook + run: | + nohup pnpm storybook & + sleep 10 + curl --retry 10 --retry-connrefused http://localhost:6006 + working-directory: packages/wow-ui + + - name: Run Tests + run: pnpm test-storybook + working-directory: packages/wow-ui + + - name: Kill Storybook process + run: | + PID=$(ps -ef | grep "pnpm storybook" | grep -v grep | awk '{print $2}') + if [ -n "$PID" ]; then + kill -9 $PID + fi + working-directory: packages/wow-ui diff --git a/.github/workflows/deploy-chromatic.yml b/.github/workflows/deploy-chromatic.yml new file mode 100644 index 00000000..135cd2b7 --- /dev/null +++ b/.github/workflows/deploy-chromatic.yml @@ -0,0 +1,50 @@ +name: "deploy-chromatic" + +on: + pull_request: + branches: + - main + paths: + - packages/wow-ui/src/** + +jobs: + chromatic-deployment: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + with: + fetch-depth: 0 + + - name: Setup Node.js + uses: actions/setup-node@v2 + with: + node-version: 20.x + + - name: Cache Dependencies + uses: actions/cache@v2 + with: + path: ~/.pnpm-store + key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }} + restore-keys: | + ${{ runner.os }}-pnpm- + + - name: Install pnpm + uses: pnpm/action-setup@v3 + with: + version: 8 + run_install: false + + - name: Install Dependency + run: pnpm install --no-frozen-lockfile + working-directory: packages/wow-ui + + - name: Build packages + run: pnpm build + + - name: Publish Chromatic + id: chromatic + uses: chromaui/action@v1 + with: + workingDir: packages/wow-ui/src + projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + token: ${{ secrets.TOKEN }} diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml new file mode 100644 index 00000000..b98af4ef --- /dev/null +++ b/.github/workflows/release.yml @@ -0,0 +1,60 @@ +name: "release" + +on: + push: + branches: + - main + +concurrency: ${{ github.workflow }}-${{ github.ref }} + +jobs: + release: + name: Release + runs-on: ubuntu-latest + steps: + - name: Checkout Repo + uses: actions/checkout@v3 + + - name: Setup Node.js 20.x + uses: actions/setup-node@v3 + with: + node-version: 20.x + + - name: Cache Dependencies + uses: actions/cache@v2 + with: + path: ~/.pnpm-store + key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }} + restore-keys: | + ${{ runner.os }}-pnpm- + + - name: Install pnpm + uses: pnpm/action-setup@v3 + with: + version: 8 + run_install: false + + - name: Install Dependency + run: pnpm install --no-frozen-lockfile + working-directory: packages/wow-ui + + - name: Build packages + run: pnpm build + + - name: Create .npmrc file + run: | + cat << EOF > "$HOME/.npmrc" + email=gdsc.hongik@gmail.com + //registry.npmjs.org/:_authToken=$NPM_TOKEN + EOF + env: + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} + + - name: Create Release Pull Request + uses: changesets/action@v1 + with: + version: pnpm changeset version + publish: pnpm changeset publish + env: + GITHUB_TOKEN: ${{ secrets.TOKEN }} + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml new file mode 100644 index 00000000..7efaea39 --- /dev/null +++ b/.github/workflows/test.yml @@ -0,0 +1,44 @@ +name: "test" + +on: + pull_request: + branches: + - main + paths: + - packages/wow-ui/src/** + +jobs: + test: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + with: + fetch-depth: 0 + + - name: Setup Node.js + uses: actions/setup-node@v3 + with: + node-version: 20 + + - name: Cache Dependencies + uses: actions/cache@v2 + with: + path: ~/.pnpm-store + key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }} + restore-keys: | + ${{ runner.os }}-pnpm- + + - name: Install Pnpm + uses: pnpm/action-setup@v3 + with: + version: 8 + run_install: false + + - name: Install Dependency + run: pnpm install --no-frozen-lockfile + working-directory: packages/wow-ui + + - name: Run Tests + run: pnpm test + working-directory: packages/wow-ui + diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..bc08bd16 --- /dev/null +++ b/.gitignore @@ -0,0 +1,42 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# Dependencies +node_modules +.pnp +.pnp.js + +# Local env files +.env +.env.local +.env.development.local +.env.test.local +.env.production.local + +# Testing +coverage + +# Turbo +.turbo + +# Vercel +.vercel + +# Build Outputs +.next/ +out/ +build +dist + + +# Debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Misc +.DS_Store +*.pem + +## Panda +styled-system-studio +*storybook.log \ No newline at end of file diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 00000000..d24fdfc6 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/usr/bin/env sh +. "$(dirname -- "$0")/_/husky.sh" + +npx lint-staged diff --git a/.npmrc b/.npmrc new file mode 100644 index 00000000..e69de29b diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..5a0181c4 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,9 @@ +{ + "singleQuote": false, + "semi": true, + "tabWidth": 2, + "useTabs": false, + "trailingComma": "es5", + "printWidth": 80, + "arrowParens": "always" +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..53ae1ac9 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,10 @@ +{ + "editor.codeActionsOnSave": { + "source.fixAll.eslint": "explicit", + "source.fixAll.stylelint": "explicit" + }, + "eslint.workingDirectories": [{ "mode": "auto" }], + "editor.formatOnSave": true, + "typescript.preferences.importModuleSpecifier": "non-relative", + "typescript.tsdk": "node_modules/typescript/lib" +} diff --git a/apps/wow-docs/README.md b/apps/wow-docs/README.md new file mode 100644 index 00000000..e69de29b diff --git a/apps/wow-docs/app/favicon.ico b/apps/wow-docs/app/favicon.ico new file mode 100644 index 00000000..3f804c02 Binary files /dev/null and b/apps/wow-docs/app/favicon.ico differ diff --git a/apps/wow-docs/app/globals.css b/apps/wow-docs/app/globals.css new file mode 100644 index 00000000..383f7abc --- /dev/null +++ b/apps/wow-docs/app/globals.css @@ -0,0 +1,2 @@ +@layer reset, base, tokens, recipes, utilities; +@import url("wowds-ui/styles.css"); diff --git a/apps/wow-docs/app/layout.tsx b/apps/wow-docs/app/layout.tsx new file mode 100644 index 00000000..4b91742e --- /dev/null +++ b/apps/wow-docs/app/layout.tsx @@ -0,0 +1,25 @@ +import "@/globals.css"; + +import type { Metadata } from "next"; +import { Inter } from "next/font/google"; + +const inter = Inter({ subsets: ["latin"] }); + +export const metadata: Metadata = { + title: "Create Turborepo", + description: "Generated by create turbo", +}; + +const RootLayout = ({ + children, +}: { + children: React.ReactNode; +}): JSX.Element => { + return ( + + {children} + + ); +}; + +export default RootLayout; diff --git a/apps/wow-docs/app/page.module.css b/apps/wow-docs/app/page.module.css new file mode 100644 index 00000000..98481c6a --- /dev/null +++ b/apps/wow-docs/app/page.module.css @@ -0,0 +1,335 @@ +.main { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + padding: 6rem; + min-height: 100vh; +} + +.vercelLogo { + filter: invert(1); +} + +.description { + display: inherit; + justify-content: inherit; + align-items: inherit; + font-size: 0.85rem; + max-width: var(--max-width); + width: 100%; + z-index: 2; + font-family: var(--font-mono); +} + +.description a { + display: flex; + justify-content: center; + align-items: center; + gap: 0.5rem; +} + +.description p { + position: relative; + margin: 0; + padding: 1rem; + background-color: rgba(var(--callout-rgb), 0.5); + border: 1px solid rgba(var(--callout-border-rgb), 0.3); + border-radius: var(--border-radius); +} + +.code { + font-weight: 700; + font-family: var(--font-mono); +} + +.hero { + display: flex; + position: relative; + place-items: center; +} + +.heroContent { + display: flex; + position: relative; + z-index: 0; + padding-bottom: 4rem; + flex-direction: column; + gap: 2rem; + justify-content: space-between; + align-items: center; + width: auto; + font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, + "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol", "Noto Color Emoji"; + padding-top: 48px; + + @media (min-width: 768px) { + padding-top: 4rem; + padding-bottom: 6rem; + } + @media (min-width: 1024px) { + padding-top: 5rem; + padding-bottom: 8rem; + } +} + +.logos { + display: flex; + z-index: 50; + justify-content: center; + align-items: center; + width: 100%; +} + +.grid { + display: grid; + grid-template-columns: repeat(4, minmax(25%, auto)); + max-width: 100%; + width: var(--max-width); +} + +.card { + padding: 1rem 1.2rem; + border-radius: var(--border-radius); + background: rgba(var(--card-rgb), 0); + border: 1px solid rgba(var(--card-border-rgb), 0); + transition: background 200ms, border 200ms; +} + +.card span { + display: inline-block; + transition: transform 200ms; +} + +.card h2 { + font-weight: 600; + margin-bottom: 0.7rem; +} + +.card p { + margin: 0; + opacity: 0.6; + font-size: 0.9rem; + line-height: 1.5; + max-width: 30ch; +} + +@media (prefers-reduced-motion) { + .card:hover span { + transform: none; + } +} + +/* Mobile */ +@media (max-width: 700px) { + .content { + padding: 4rem; + } + + .grid { + grid-template-columns: 1fr; + margin-bottom: 120px; + max-width: 320px; + text-align: center; + } + + .card { + padding: 1rem 2.5rem; + } + + .card h2 { + margin-bottom: 0.5rem; + } + + .center { + padding: 8rem 0 6rem; + } + + .center::before { + transform: none; + height: 300px; + } + + .description { + font-size: 0.8rem; + } + + .description a { + padding: 1rem; + } + + .description p, + .description div { + display: flex; + justify-content: center; + position: fixed; + width: 100%; + } + + .description p { + align-items: center; + inset: 0 0 auto; + padding: 2rem 1rem 1.4rem; + border-radius: 0; + border: none; + border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25); + background: linear-gradient( + to bottom, + rgba(var(--background-start-rgb), 1), + rgba(var(--callout-rgb), 0.5) + ); + background-clip: padding-box; + backdrop-filter: blur(24px); + } + + .description div { + align-items: flex-end; + pointer-events: none; + inset: auto 0 0; + padding: 2rem; + height: 200px; + background: linear-gradient( + to bottom, + transparent 0%, + rgb(var(--background-end-rgb)) 40% + ); + z-index: 1; + } +} + +/* Enable hover only on non-touch devices */ +@media (hover: hover) and (pointer: fine) { + .card:hover { + background: rgba(var(--card-rgb), 0.1); + border: 1px solid rgba(var(--card-border-rgb), 0.15); + } + + .card:hover span { + transform: translateX(4px); + } +} + +.circles { + position: absolute; + min-width: 614px; + min-height: 614px; + pointer-events: none; +} + +.logo { + z-index: 50; + width: 120px; + height: 120px; +} + +.logoGradientContainer { + display: flex; + position: absolute; + z-index: 50; + justify-content: center; + align-items: center; + width: 16rem; + height: 16rem; +} + +.turborepoWordmarkContainer { + display: flex; + z-index: 50; + padding-left: 1.5rem; + padding-right: 1.5rem; + flex-direction: column; + gap: 1.25rem; + justify-content: center; + align-items: center; + text-align: center; + + @media (min-width: 1024px) { + gap: 1.5rem; + } +} + +.turborepoWordmark { + width: 160px; + fill: white; + + @media (min-width: 768px) { + width: 200px; + } +} + +.code { + font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", + monospace; + font-weight: 700; +} + +/* Tablet and Smaller Desktop */ +@media (min-width: 701px) and (max-width: 1120px) { + .grid { + grid-template-columns: repeat(2, 50%); + } +} + +/* Gradients */ +.gradient { + position: absolute; + mix-blend-mode: normal; + will-change: filter; + pointer-events: none; +} + +.gradientSmall { + filter: blur(32px); +} + +.gradientLarge { + filter: blur(75px); +} + +.glowConic { + background-image: var(--glow-conic); +} + +.logoGradient { + opacity: 0.9; + width: 120px; + height: 120px; +} + +.backgroundGradient { + top: -500px; + width: 1000px; + height: 1000px; + opacity: 0.15; +} + +.button { + background-color: #ffffff; + border-radius: 8px; + border-style: none; + box-sizing: border-box; + color: #000000; + cursor: pointer; + display: inline-block; + font-size: 16px; + height: 40px; + line-height: 20px; + list-style: none; + margin: 0; + outline: none; + padding: 10px 16px; + position: relative; + text-align: center; + text-decoration: none; + transition: color 100ms; + vertical-align: baseline; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; +} + +.button:hover, +.button:focus { + background-color: #e5e4e2; +} diff --git a/apps/wow-docs/app/page.test.tsx b/apps/wow-docs/app/page.test.tsx new file mode 100644 index 00000000..8e176781 --- /dev/null +++ b/apps/wow-docs/app/page.test.tsx @@ -0,0 +1,8 @@ +import { render } from "@testing-library/react"; + +import Home from "@/page"; + +it("renders homepage unchanged", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); +}); diff --git a/apps/wow-docs/app/page.tsx b/apps/wow-docs/app/page.tsx new file mode 100644 index 00000000..c8dfb06c --- /dev/null +++ b/apps/wow-docs/app/page.tsx @@ -0,0 +1,23 @@ +import { css } from "@styled-system/css/css"; +import { UpArrow } from "wowds-icons"; +import Button from "wowds-ui/Button"; + +const Home = () => { + return ( + <> +
+

docs

+ +
+ + + ); +}; + +export default Home; diff --git a/apps/wow-docs/jest.config.ts b/apps/wow-docs/jest.config.ts new file mode 100644 index 00000000..22cbad16 --- /dev/null +++ b/apps/wow-docs/jest.config.ts @@ -0,0 +1,15 @@ +import type { Config } from "jest"; +import jestConfig from "shared-config/jest.config"; +import nextJest from "next/jest.js"; + +const createJestConfig = nextJest({ + dir: "./", +}); + +const config: Config = { + ...jestConfig, + coverageProvider: "v8", + testEnvironment: "jsdom", +}; + +export default createJestConfig(config); diff --git a/apps/wow-docs/next-env.d.ts b/apps/wow-docs/next-env.d.ts new file mode 100644 index 00000000..4f11a03d --- /dev/null +++ b/apps/wow-docs/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/apps/wow-docs/next.config.js b/apps/wow-docs/next.config.js new file mode 100644 index 00000000..0b35c2c5 --- /dev/null +++ b/apps/wow-docs/next.config.js @@ -0,0 +1,13 @@ +/* eslint-disable no-undef */ +/** @type {import('next').NextConfig} */ +module.exports = { + transpilePackages: ["wowds-ui"], + webpack: (config) => { + config.module.rules.push({ + test: /\.svg$/, + use: ["@svgr/webpack"], + }); + + return config; + }, +}; diff --git a/apps/wow-docs/package.json b/apps/wow-docs/package.json new file mode 100644 index 00000000..3eeebd31 --- /dev/null +++ b/apps/wow-docs/package.json @@ -0,0 +1,30 @@ +{ + "name": "wow-docs", + "version": "0.0.0", + "private": true, + "scripts": { + "dev": "pnpm panda codegen && rm -rf .next && next dev", + "build": "next build", + "start": "next start", + "lint": "eslint . --max-warnings 0", + "test": "jest" + }, + "dependencies": { + "wowds-icons": "workspace:^", + "wowds-tokens": "workspace:^", + "wowds-ui": "workspace:^", + "next": "^14.1.1", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@next/eslint-plugin-next": "^14.1.1", + "@pandacss/dev": "^0.39.0", + "@types/eslint": "^8.56.5", + "@types/node": "^20.11.24", + "@types/react": "^18.2.61", + "@types/react-dom": "^18.2.19", + "eslint": "^8.57.0", + "typescript": "^5.3.3" + } +} diff --git a/apps/wow-docs/panda.config.ts b/apps/wow-docs/panda.config.ts new file mode 100644 index 00000000..5d7559d5 --- /dev/null +++ b/apps/wow-docs/panda.config.ts @@ -0,0 +1,26 @@ +import { defineConfig } from "@pandacss/dev"; +import { semanticTokens, textStyles, tokens } from "theme"; +import { removeUnusedCssVars, removeUnusedKeyframes } from "theme/utils"; + +export default defineConfig({ + preflight: true, + minify: true, + watch: true, + outExtension: "js", + polyfill: true, + include: ["./app/**/*.{ts,tsx,js,jsx}"], + exclude: [], + outdir: "styled-system", + theme: { + tokens, + textStyles, + semanticTokens, + }, + hooks: { + "cssgen:done": ({ artifact, content }) => { + if (artifact === "styles.css") { + return removeUnusedCssVars(removeUnusedKeyframes(content)); + } + }, + }, +}); diff --git a/apps/wow-docs/postcss.config.cjs b/apps/wow-docs/postcss.config.cjs new file mode 100644 index 00000000..1bfc8f1d --- /dev/null +++ b/apps/wow-docs/postcss.config.cjs @@ -0,0 +1,5 @@ +module.exports = { + plugins: { + "@pandacss/dev/postcss": {}, + }, +}; diff --git a/apps/wow-docs/public/circles.svg b/apps/wow-docs/public/circles.svg new file mode 100644 index 00000000..6533be5b --- /dev/null +++ b/apps/wow-docs/public/circles.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/apps/wow-docs/public/next.svg b/apps/wow-docs/public/next.svg new file mode 100644 index 00000000..5174b28c --- /dev/null +++ b/apps/wow-docs/public/next.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/wow-docs/public/turborepo.svg b/apps/wow-docs/public/turborepo.svg new file mode 100644 index 00000000..2f9aa1f3 --- /dev/null +++ b/apps/wow-docs/public/turborepo.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/wow-docs/public/vercel.svg b/apps/wow-docs/public/vercel.svg new file mode 100644 index 00000000..d2f84222 --- /dev/null +++ b/apps/wow-docs/public/vercel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/wow-docs/styled-system/css/conditions.js b/apps/wow-docs/styled-system/css/conditions.js new file mode 100644 index 00000000..42b2cb8e --- /dev/null +++ b/apps/wow-docs/styled-system/css/conditions.js @@ -0,0 +1,34 @@ +import { withoutSpace } from '../helpers.js'; + +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,_starting,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,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,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/apps/wow-docs/styled-system/css/css.d.ts b/apps/wow-docs/styled-system/css/css.d.ts new file mode 100644 index 00000000..175f9747 --- /dev/null +++ b/apps/wow-docs/styled-system/css/css.d.ts @@ -0,0 +1,18 @@ +/* eslint-disable */ +import type { SystemStyleObject } from '../types/index'; + +type Styles = SystemStyleObject | undefined | null | false + +interface CssFunction { + (styles: Styles): string + (styles: Styles[]): string + (...styles: Array): string + (styles: Styles): string + + raw: (styles: Styles) => string + raw: (styles: Styles[]) => string + raw: (...styles: Array) => string + raw: (styles: Styles) => string +} + +export declare const css: CssFunction; \ No newline at end of file diff --git a/apps/wow-docs/styled-system/css/css.js b/apps/wow-docs/styled-system/css/css.js new file mode 100644 index 00000000..ad99a48c --- /dev/null +++ b/apps/wow-docs/styled-system/css/css.js @@ -0,0 +1,45 @@ +import { createCss, createMergeCss, hypenateProperty, withoutSpace } from '../helpers.js'; +import { sortConditions, finalizeConditions } from './conditions.js'; + +const utilities = "aspectRatio:aspect,boxDecorationBreak:decoration,zIndex:z,boxSizing:box,objectPosition:obj-pos,objectFit:obj-fit,overscrollBehavior:overscroll,overscrollBehaviorX:overscroll-x,overscrollBehaviorY:overscroll-y,position:pos/1,top:top,left:left,insetInline:inset-x/insetX,insetBlock:inset-y/insetY,inset:inset,insetBlockEnd:inset-b,insetBlockStart:inset-t,insetInlineEnd:end/insetEnd/1,insetInlineStart:start/insetStart/1,right:right,bottom:bottom,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,spaceX:space-x,spaceY:space-y,outlineWidth:ring-width/ringWidth,outlineColor:ring-color/ringColor,outline:ring/1,outlineOffset:ring-offset/ringOffset,divideX:divide-x,divideY:divide-y,divideColor:divide-color,divideStyle:divide-style,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:fw,fontSmoothing:smoothing,fontVariantNumeric:numeric,letterSpacing:tracking,lineHeight:leading,textAlign:text-align,textDecoration:text-decor,textDecorationColor:text-decor-color,textEmphasisColor:text-emphasis-color,textDecorationStyle:decoration-style,textDecorationThickness:decoration-thickness,textUnderlineOffset:underline-offset,textTransform:text-transform,textIndent:indent,textShadow:text-shadow,textShadowColor:text-shadow/textShadowColor,textOverflow:text-overflow,verticalAlign:v-align,wordBreak:break,textWrap:text-wrap,truncate:truncate,lineClamp:clamp,listStyleType:list-type,listStylePosition:list-pos,listStyleImage:list-img,backgroundPosition:bg-pos/bgPosition,backgroundPositionX:bg-pos-x/bgPositionX,backgroundPositionY:bg-pos-y/bgPositionY,backgroundAttachment:bg-attach/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-size/bgSize,backgroundGradient:bg-gradient/bgGradient,textGradient:text-gradient,gradientFromPosition:gradient-from-pos,gradientToPosition:gradient-to-pos,gradientFrom:gradient-from,gradientTo:gradient-to,gradientVia:gradient-via,gradientViaPosition:gradient-via-pos,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,borderWidth:border-w,borderTopWidth:border-tw,borderLeftWidth:border-lw,borderRightWidth:border-rw,borderBottomWidth:border-bw,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-color/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,animationTimingFunction:animation-ease,animationDuration:animation-duration,animationDelay:animation-delay,transformOrigin:origin,rotate:rotate,rotateX:rotate-x,rotateY:rotate-y,rotateZ:rotate-z,scale:scale,scaleX:scale-x,scaleY:scale-y,translate:translate,translateX:translate-x/x,translateY:translate-y/y,translateZ:translate-z/z,accentColor:accent,caretColor:caret,scrollBehavior:scroll,scrollbar:scrollbar,scrollMargin:scroll-m,scrollMarginLeft:scroll-ml,scrollMarginRight:scroll-mr,scrollMarginTop:scroll-mt,scrollMarginBottom:scroll-mb,scrollMarginBlock:scroll-my/scrollMarginY,scrollMarginBlockEnd:scroll-mb,scrollMarginBlockStart:scroll-mt,scrollMarginInline:scroll-mx/scrollMarginX,scrollMarginInlineEnd:scroll-me,scrollMarginInlineStart:scroll-ms,scrollPadding:scroll-p,scrollPaddingBlock:scroll-pb/scrollPaddingY,scrollPaddingBlockStart:scroll-pt,scrollPaddingBlockEnd:scroll-pb,scrollPaddingInline:scroll-px/scrollPaddingX,scrollPaddingInlineEnd:scroll-pe,scrollPaddingInlineStart:scroll-ps,scrollPaddingLeft:scroll-pl,scrollPaddingRight:scroll-pr,scrollPaddingTop:scroll-pt,scrollPaddingBottom:scroll-pb,scrollSnapAlign:snap-align,scrollSnapStop:snap-stop,scrollSnapType:snap-type,scrollSnapStrictness:snap-strictness,scrollSnapMargin:snap-m,scrollSnapMarginTop:snap-mt,scrollSnapMarginBottom:snap-mb,scrollSnapMarginLeft:snap-ml,scrollSnapMarginRight:snap-mr,touchAction:touch,userSelect:select,fill:fill,stroke:stroke,strokeWidth:stroke-w,srOnly:sr,debug:debug,appearance:appearance,backfaceVisibility:backface,clipPath:clip-path,hyphens:hyphens,mask:mask,maskImage:mask-image,maskSize:mask-size,textSizeAdjust:text-adjust,container:cq,containerName:cq-name,containerType:cq-type,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, + toHash: (path, hashFn) => hashFn(path.join(":")), + 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/apps/wow-docs/styled-system/css/cva.d.ts b/apps/wow-docs/styled-system/css/cva.d.ts new file mode 100644 index 00000000..ff433257 --- /dev/null +++ b/apps/wow-docs/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 { RecipeVariant, RecipeVariantProps } from '../types/recipe'; \ No newline at end of file diff --git a/apps/wow-docs/styled-system/css/cva.js b/apps/wow-docs/styled-system/css/cva.js new file mode 100644 index 00000000..64985937 --- /dev/null +++ b/apps/wow-docs/styled-system/css/cva.js @@ -0,0 +1,87 @@ +import { compact, mergeProps, memo, splitProps, uniq } from '../helpers.js'; +import { css, mergeCss } from './css.js'; + +const defaults = (conf) => ({ + base: {}, + variants: {}, + defaultVariants: {}, + compoundVariants: [], + ...conf, +}) + +export function cva(config) { + const { base, variants, defaultVariants, compoundVariants } = defaults(config) + const getVariantProps = (variants) => ({ ...defaultVariants, ...compact(variants) }) + + function resolve(props = {}) { + const computedVariants = getVariantProps(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(memo(cvaFn), { + __cva__: true, + variantMap, + variantKeys, + raw: resolve, + config, + merge, + splitVariantProps, + getVariantProps + }) +} + +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/apps/wow-docs/styled-system/css/cx.d.ts b/apps/wow-docs/styled-system/css/cx.d.ts new file mode 100644 index 00000000..892c90ca --- /dev/null +++ b/apps/wow-docs/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/apps/wow-docs/styled-system/css/cx.js b/apps/wow-docs/styled-system/css/cx.js new file mode 100644 index 00000000..81bbdae3 --- /dev/null +++ b/apps/wow-docs/styled-system/css/cx.js @@ -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/apps/wow-docs/styled-system/css/index.d.ts b/apps/wow-docs/styled-system/css/index.d.ts new file mode 100644 index 00000000..50a581d8 --- /dev/null +++ b/apps/wow-docs/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/apps/wow-docs/styled-system/css/index.js b/apps/wow-docs/styled-system/css/index.js new file mode 100644 index 00000000..4c4c0818 --- /dev/null +++ b/apps/wow-docs/styled-system/css/index.js @@ -0,0 +1,4 @@ +export * from './css.js'; +export * from './cx.js'; +export * from './cva.js'; +export * from './sva.js'; \ No newline at end of file diff --git a/apps/wow-docs/styled-system/css/sva.d.ts b/apps/wow-docs/styled-system/css/sva.d.ts new file mode 100644 index 00000000..f97c42a3 --- /dev/null +++ b/apps/wow-docs/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/apps/wow-docs/styled-system/css/sva.js b/apps/wow-docs/styled-system/css/sva.js new file mode 100644 index 00000000..7621bd65 --- /dev/null +++ b/apps/wow-docs/styled-system/css/sva.js @@ -0,0 +1,41 @@ +import { compact, getSlotRecipes, memo, splitProps } from '../helpers.js'; +import { cva } from './cva.js'; +import { cx } from './cx.js'; + +const slotClass = (className, slot) => className + '__' + slot + +export function sva(config) { + const slots = Object.entries(getSlotRecipes(config)).map(([slot, slotCva]) => [slot, cva(slotCva)]) + const defaultVariants = config.defaultVariants ?? {} + + function svaFn(props) { + const result = slots.map(([slot, cvaFn]) => [slot, cx(cvaFn(props), config.className && slotClass(config.className, slot))]) + 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 getVariantProps = (variants) => ({ ...(defaultVariants || {}), ...compact(variants) }) + + const variantMap = Object.fromEntries( + Object.entries(variants).map(([key, value]) => [key, Object.keys(value)]) + ); + + return Object.assign(memo(svaFn), { + __cva__: false, + raw, + variantMap, + variantKeys, + splitVariantProps, + getVariantProps, + }) +} \ No newline at end of file diff --git a/apps/wow-docs/styled-system/helpers.js b/apps/wow-docs/styled-system/helpers.js new file mode 100644 index 00000000..b14325fc --- /dev/null +++ b/apps/wow-docs/styled-system/helpers.js @@ -0,0 +1,314 @@ +// 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/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/important.ts +var importantRegex = /\s*!(important)?/i; +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/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/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, child) ?? 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 (Array.isArray(obj)) + return obj.map((value) => fn(value)); + 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 normalizeStyleObject(styles, context, shorthand = true) { + 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: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0 + } + ); +} + +// 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(utility.toHash(baseArray, toHash)); + } else { + const baseArray = [...conds.finalize(conditions), formatClassName(className)]; + result = baseArray.join(":"); + } + return result; + }; + return memo(({ base, ...styles } = {}) => { + const styleObject = Object.assign(styles, base); + 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.flat().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) => normalizeStyleObject(style, context)); + } + function mergeCss(...styles) { + return mergeProps(...resolve(styles)); + } + function assignCss(...styles) { + return Object.assign({}, ...resolve(styles)); + } + return { mergeCss: memo(mergeCss), assignCss }; +} + +// 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/is-css-function.ts +var fns = ["min", "max", "clamp", "calc"]; +var fnRegExp = new RegExp(`^(${fns.join("|")})\\(.*\\)`); +var isCssFunction = (v) => typeof v === "string" && fnRegExp.test(v); + +// src/is-css-unit.ts +var lengthUnits = "cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%"; +var lengthUnitsPattern = `(?:${lengthUnits.split(",").join("|")})`; +var lengthRegExp = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`); +var isCssUnit = (v) => typeof v === "string" && lengthRegExp.test(v); + +// src/is-css-var.ts +var isCssVar = (v) => typeof v === "string" && /^var\(--.+\)$/.test(v); + +// src/pattern-fns.ts +var patternFns = { + map: mapObject, + isCssFunction, + isCssVar, + isCssUnit +}; +var getPatternStyles = (pattern, styles) => { + if (!pattern?.defaultValues) + return styles; + const defaults = typeof pattern.defaultValues === "function" ? pattern.defaultValues(styles) : pattern.defaultValues; + return Object.assign({}, defaults, compact(styles)); +}; + +// 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, + getPatternStyles, + getSlotCompoundVariant, + getSlotRecipes, + hypenateProperty, + isBaseCondition, + isObject, + mapObject, + memo, + mergeProps, + patternFns, + splitProps, + toHash, + uniq, + walkObject, + withoutSpace +}; + + + + + +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/apps/wow-docs/styled-system/patterns/aspect-ratio.d.ts b/apps/wow-docs/styled-system/patterns/aspect-ratio.d.ts new file mode 100644 index 00000000..666c374f --- /dev/null +++ b/apps/wow-docs/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 { SystemProperties } from '../types/style-props'; +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/apps/wow-docs/styled-system/patterns/aspect-ratio.js b/apps/wow-docs/styled-system/patterns/aspect-ratio.js new file mode 100644 index 00000000..a56943fc --- /dev/null +++ b/apps/wow-docs/styled-system/patterns/aspect-ratio.js @@ -0,0 +1,38 @@ +import { getPatternStyles, patternFns } from '../helpers.js'; +import { css } from '../css/index.js'; + +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 = {}) => { + const _styles = getPatternStyles(aspectRatioConfig, styles) + return aspectRatioConfig.transform(_styles, patternFns) +} + +export const aspectRatio = (styles) => css(getAspectRatioStyle(styles)) +aspectRatio.raw = getAspectRatioStyle \ No newline at end of file diff --git a/apps/wow-docs/styled-system/patterns/bleed.d.ts b/apps/wow-docs/styled-system/patterns/bleed.d.ts new file mode 100644 index 00000000..6573c635 --- /dev/null +++ b/apps/wow-docs/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 { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface BleedProperties { + inline?: SystemProperties["marginInline"] + block?: SystemProperties["marginBlock"] +} + + +interface BleedStyles extends BleedProperties, DistributiveOmit {} + +interface BleedPatternFn { + (styles?: BleedStyles): string + raw: (styles?: BleedStyles) => SystemStyleObject +} + + +export declare const bleed: BleedPatternFn; diff --git a/apps/wow-docs/styled-system/patterns/bleed.js b/apps/wow-docs/styled-system/patterns/bleed.js new file mode 100644 index 00000000..17c7b95c --- /dev/null +++ b/apps/wow-docs/styled-system/patterns/bleed.js @@ -0,0 +1,24 @@ +import { getPatternStyles, patternFns } from '../helpers.js'; +import { css } from '../css/index.js'; + +const bleedConfig = { +transform(props, { map, isCssUnit, isCssVar }) { + const { inline, block, ...rest } = props; + const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`; + return { + "--bleed-x": map(inline, valueFn), + "--bleed-y": map(block, valueFn), + marginInline: "calc(var(--bleed-x, 0) * -1)", + marginBlock: "calc(var(--bleed-y, 0) * -1)", + ...rest + }; +}, +defaultValues:{inline:'0',block:'0'}} + +export const getBleedStyle = (styles = {}) => { + const _styles = getPatternStyles(bleedConfig, styles) + return bleedConfig.transform(_styles, patternFns) +} + +export const bleed = (styles) => css(getBleedStyle(styles)) +bleed.raw = getBleedStyle \ No newline at end of file diff --git a/apps/wow-docs/styled-system/patterns/box.d.ts b/apps/wow-docs/styled-system/patterns/box.d.ts new file mode 100644 index 00000000..a7935007 --- /dev/null +++ b/apps/wow-docs/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 { SystemProperties } from '../types/style-props'; +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/apps/wow-docs/styled-system/patterns/box.js b/apps/wow-docs/styled-system/patterns/box.js new file mode 100644 index 00000000..9be49d99 --- /dev/null +++ b/apps/wow-docs/styled-system/patterns/box.js @@ -0,0 +1,15 @@ +import { getPatternStyles, patternFns } from '../helpers.js'; +import { css } from '../css/index.js'; + +const boxConfig = { +transform(props) { + return props; +}} + +export const getBoxStyle = (styles = {}) => { + const _styles = getPatternStyles(boxConfig, styles) + return boxConfig.transform(_styles, patternFns) +} + +export const box = (styles) => css(getBoxStyle(styles)) +box.raw = getBoxStyle \ No newline at end of file diff --git a/apps/wow-docs/styled-system/patterns/center.d.ts b/apps/wow-docs/styled-system/patterns/center.d.ts new file mode 100644 index 00000000..8419f3c6 --- /dev/null +++ b/apps/wow-docs/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 { SystemProperties } from '../types/style-props'; +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/apps/wow-docs/styled-system/patterns/center.js b/apps/wow-docs/styled-system/patterns/center.js new file mode 100644 index 00000000..3eb743b5 --- /dev/null +++ b/apps/wow-docs/styled-system/patterns/center.js @@ -0,0 +1,21 @@ +import { getPatternStyles, patternFns } from '../helpers.js'; +import { css } from '../css/index.js'; + +const centerConfig = { +transform(props) { + const { inline, ...rest } = props; + return { + display: inline ? "inline-flex" : "flex", + alignItems: "center", + justifyContent: "center", + ...rest + }; +}} + +export const getCenterStyle = (styles = {}) => { + const _styles = getPatternStyles(centerConfig, styles) + return centerConfig.transform(_styles, patternFns) +} + +export const center = (styles) => css(getCenterStyle(styles)) +center.raw = getCenterStyle \ No newline at end of file diff --git a/apps/wow-docs/styled-system/patterns/circle.d.ts b/apps/wow-docs/styled-system/patterns/circle.d.ts new file mode 100644 index 00000000..d6759d86 --- /dev/null +++ b/apps/wow-docs/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 { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface CircleProperties { + size?: SystemProperties["width"] +} + + +interface CircleStyles extends CircleProperties, DistributiveOmit {} + +interface CirclePatternFn { + (styles?: CircleStyles): string + raw: (styles?: CircleStyles) => SystemStyleObject +} + + +export declare const circle: CirclePatternFn; diff --git a/apps/wow-docs/styled-system/patterns/circle.js b/apps/wow-docs/styled-system/patterns/circle.js new file mode 100644 index 00000000..2082c7f3 --- /dev/null +++ b/apps/wow-docs/styled-system/patterns/circle.js @@ -0,0 +1,25 @@ +import { getPatternStyles, patternFns } from '../helpers.js'; +import { css } from '../css/index.js'; + +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 = {}) => { + const _styles = getPatternStyles(circleConfig, styles) + return circleConfig.transform(_styles, patternFns) +} + +export const circle = (styles) => css(getCircleStyle(styles)) +circle.raw = getCircleStyle \ No newline at end of file diff --git a/apps/wow-docs/styled-system/patterns/container.d.ts b/apps/wow-docs/styled-system/patterns/container.d.ts new file mode 100644 index 00000000..978e59d3 --- /dev/null +++ b/apps/wow-docs/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 { SystemProperties } from '../types/style-props'; +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/apps/wow-docs/styled-system/patterns/container.js b/apps/wow-docs/styled-system/patterns/container.js new file mode 100644 index 00000000..6cba2235 --- /dev/null +++ b/apps/wow-docs/styled-system/patterns/container.js @@ -0,0 +1,21 @@ +import { getPatternStyles, patternFns } from '../helpers.js'; +import { css } from '../css/index.js'; + +const containerConfig = { +transform(props) { + return { + position: "relative", + maxWidth: "8xl", + mx: "auto", + px: { base: "4", md: "6", lg: "8" }, + ...props + }; +}} + +export const getContainerStyle = (styles = {}) => { + const _styles = getPatternStyles(containerConfig, styles) + return containerConfig.transform(_styles, patternFns) +} + +export const container = (styles) => css(getContainerStyle(styles)) +container.raw = getContainerStyle \ No newline at end of file diff --git a/apps/wow-docs/styled-system/patterns/cq.d.ts b/apps/wow-docs/styled-system/patterns/cq.d.ts new file mode 100644 index 00000000..ee5ae932 --- /dev/null +++ b/apps/wow-docs/styled-system/patterns/cq.d.ts @@ -0,0 +1,22 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface CqProperties { + name?: ConditionalValue + type?: SystemProperties["containerType"] +} + + +interface CqStyles extends CqProperties, DistributiveOmit {} + +interface CqPatternFn { + (styles?: CqStyles): string + raw: (styles?: CqStyles) => SystemStyleObject +} + + +export declare const cq: CqPatternFn; diff --git a/apps/wow-docs/styled-system/patterns/cq.js b/apps/wow-docs/styled-system/patterns/cq.js new file mode 100644 index 00000000..8d6031d4 --- /dev/null +++ b/apps/wow-docs/styled-system/patterns/cq.js @@ -0,0 +1,21 @@ +import { getPatternStyles, patternFns } from '../helpers.js'; +import { css } from '../css/index.js'; + +const cqConfig = { +transform(props) { + const { name, type, ...rest } = props; + return { + containerType: type, + containerName: name, + ...rest + }; +}, +defaultValues:{type:'inline-size'}} + +export const getCqStyle = (styles = {}) => { + const _styles = getPatternStyles(cqConfig, styles) + return cqConfig.transform(_styles, patternFns) +} + +export const cq = (styles) => css(getCqStyle(styles)) +cq.raw = getCqStyle \ No newline at end of file diff --git a/apps/wow-docs/styled-system/patterns/divider.d.ts b/apps/wow-docs/styled-system/patterns/divider.d.ts new file mode 100644 index 00000000..a6923c4d --- /dev/null +++ b/apps/wow-docs/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 { SystemProperties } from '../types/style-props'; +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/apps/wow-docs/styled-system/patterns/divider.js b/apps/wow-docs/styled-system/patterns/divider.js new file mode 100644 index 00000000..005e94af --- /dev/null +++ b/apps/wow-docs/styled-system/patterns/divider.js @@ -0,0 +1,25 @@ +import { getPatternStyles, patternFns } from '../helpers.js'; +import { css } from '../css/index.js'; + +const dividerConfig = { +transform(props, { map }) { + const { orientation, thickness, 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 + }; +}, +defaultValues:{orientation:'horizontal',thickness:'1px'}} + +export const getDividerStyle = (styles = {}) => { + const _styles = getPatternStyles(dividerConfig, styles) + return dividerConfig.transform(_styles, patternFns) +} + +export const divider = (styles) => css(getDividerStyle(styles)) +divider.raw = getDividerStyle \ No newline at end of file diff --git a/apps/wow-docs/styled-system/patterns/flex.d.ts b/apps/wow-docs/styled-system/patterns/flex.d.ts new file mode 100644 index 00000000..71d5308b --- /dev/null +++ b/apps/wow-docs/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 { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface FlexProperties { + align?: SystemProperties["alignItems"] + justify?: SystemProperties["justifyContent"] + direction?: SystemProperties["flexDirection"] + wrap?: SystemProperties["flexWrap"] + basis?: SystemProperties["flexBasis"] + grow?: SystemProperties["flexGrow"] + shrink?: SystemProperties["flexShrink"] +} + + +interface FlexStyles extends FlexProperties, DistributiveOmit {} + +interface FlexPatternFn { + (styles?: FlexStyles): string + raw: (styles?: FlexStyles) => SystemStyleObject +} + + +export declare const flex: FlexPatternFn; diff --git a/apps/wow-docs/styled-system/patterns/flex.js b/apps/wow-docs/styled-system/patterns/flex.js new file mode 100644 index 00000000..0f00537c --- /dev/null +++ b/apps/wow-docs/styled-system/patterns/flex.js @@ -0,0 +1,26 @@ +import { getPatternStyles, patternFns } from '../helpers.js'; +import { css } from '../css/index.js'; + +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 = {}) => { + const _styles = getPatternStyles(flexConfig, styles) + return flexConfig.transform(_styles, patternFns) +} + +export const flex = (styles) => css(getFlexStyle(styles)) +flex.raw = getFlexStyle \ No newline at end of file diff --git a/apps/wow-docs/styled-system/patterns/float.d.ts b/apps/wow-docs/styled-system/patterns/float.d.ts new file mode 100644 index 00000000..07ea9c36 --- /dev/null +++ b/apps/wow-docs/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 { SystemProperties } from '../types/style-props'; +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/apps/wow-docs/styled-system/patterns/float.js b/apps/wow-docs/styled-system/patterns/float.js new file mode 100644 index 00000000..a3d40546 --- /dev/null +++ b/apps/wow-docs/styled-system/patterns/float.js @@ -0,0 +1,52 @@ +import { getPatternStyles, patternFns } from '../helpers.js'; +import { css } from '../css/index.js'; + +const floatConfig = { +transform(props, { map }) { + const { offset, offsetX, offsetY, placement, ...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 + }; +}, +defaultValues(props) { + const offset = props.offset || "0"; + return { offset, offsetX: offset, offsetY: offset, placement: "top-end" }; +}} + +export const getFloatStyle = (styles = {}) => { + const _styles = getPatternStyles(floatConfig, styles) + return floatConfig.transform(_styles, patternFns) +} + +export const float = (styles) => css(getFloatStyle(styles)) +float.raw = getFloatStyle \ No newline at end of file diff --git a/apps/wow-docs/styled-system/patterns/grid-item.d.ts b/apps/wow-docs/styled-system/patterns/grid-item.d.ts new file mode 100644 index 00000000..2301ae59 --- /dev/null +++ b/apps/wow-docs/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 { SystemProperties } from '../types/style-props'; +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/apps/wow-docs/styled-system/patterns/grid-item.js b/apps/wow-docs/styled-system/patterns/grid-item.js new file mode 100644 index 00000000..ca767a81 --- /dev/null +++ b/apps/wow-docs/styled-system/patterns/grid-item.js @@ -0,0 +1,25 @@ +import { getPatternStyles, patternFns } from '../helpers.js'; +import { css } from '../css/index.js'; + +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 = {}) => { + const _styles = getPatternStyles(gridItemConfig, styles) + return gridItemConfig.transform(_styles, patternFns) +} + +export const gridItem = (styles) => css(getGridItemStyle(styles)) +gridItem.raw = getGridItemStyle \ No newline at end of file diff --git a/apps/wow-docs/styled-system/patterns/grid.d.ts b/apps/wow-docs/styled-system/patterns/grid.d.ts new file mode 100644 index 00000000..96180bda --- /dev/null +++ b/apps/wow-docs/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 { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface GridProperties { + gap?: SystemProperties["gap"] + columnGap?: SystemProperties["gap"] + rowGap?: SystemProperties["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/apps/wow-docs/styled-system/patterns/grid.js b/apps/wow-docs/styled-system/patterns/grid.js new file mode 100644 index 00000000..a7897a2d --- /dev/null +++ b/apps/wow-docs/styled-system/patterns/grid.js @@ -0,0 +1,27 @@ +import { getPatternStyles, patternFns } from '../helpers.js'; +import { css } from '../css/index.js'; + +const gridConfig = { +transform(props, { map, isCssUnit }) { + const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props; + const getValue = (v) => isCssUnit(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 + }; +}, +defaultValues(props) { + return { gap: props.columnGap || props.rowGap ? void 0 : "10px" }; +}} + +export const getGridStyle = (styles = {}) => { + const _styles = getPatternStyles(gridConfig, styles) + return gridConfig.transform(_styles, patternFns) +} + +export const grid = (styles) => css(getGridStyle(styles)) +grid.raw = getGridStyle \ No newline at end of file diff --git a/apps/wow-docs/styled-system/patterns/hstack.d.ts b/apps/wow-docs/styled-system/patterns/hstack.d.ts new file mode 100644 index 00000000..05b0d670 --- /dev/null +++ b/apps/wow-docs/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 { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface HstackProperties { + justify?: SystemProperties["justifyContent"] + gap?: SystemProperties["gap"] +} + + +interface HstackStyles extends HstackProperties, DistributiveOmit {} + +interface HstackPatternFn { + (styles?: HstackStyles): string + raw: (styles?: HstackStyles) => SystemStyleObject +} + + +export declare const hstack: HstackPatternFn; diff --git a/apps/wow-docs/styled-system/patterns/hstack.js b/apps/wow-docs/styled-system/patterns/hstack.js new file mode 100644 index 00000000..a2603308 --- /dev/null +++ b/apps/wow-docs/styled-system/patterns/hstack.js @@ -0,0 +1,24 @@ +import { getPatternStyles, patternFns } from '../helpers.js'; +import { css } from '../css/index.js'; + +const hstackConfig = { +transform(props) { + const { justify, gap, ...rest } = props; + return { + display: "flex", + alignItems: "center", + justifyContent: justify, + gap, + flexDirection: "row", + ...rest + }; +}, +defaultValues:{gap:'10px'}} + +export const getHstackStyle = (styles = {}) => { + const _styles = getPatternStyles(hstackConfig, styles) + return hstackConfig.transform(_styles, patternFns) +} + +export const hstack = (styles) => css(getHstackStyle(styles)) +hstack.raw = getHstackStyle \ No newline at end of file diff --git a/apps/wow-docs/styled-system/patterns/index.d.ts b/apps/wow-docs/styled-system/patterns/index.d.ts new file mode 100644 index 00000000..11168918 --- /dev/null +++ b/apps/wow-docs/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-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 * from './cq'; \ No newline at end of file diff --git a/apps/wow-docs/styled-system/patterns/index.js b/apps/wow-docs/styled-system/patterns/index.js new file mode 100644 index 00000000..4cc24644 --- /dev/null +++ b/apps/wow-docs/styled-system/patterns/index.js @@ -0,0 +1,20 @@ +export * from './box.js'; +export * from './flex.js'; +export * from './stack.js'; +export * from './vstack.js'; +export * from './hstack.js'; +export * from './spacer.js'; +export * from './square.js'; +export * from './circle.js'; +export * from './center.js'; +export * from './link-overlay.js'; +export * from './aspect-ratio.js'; +export * from './grid.js'; +export * from './grid-item.js'; +export * from './wrap.js'; +export * from './container.js'; +export * from './divider.js'; +export * from './float.js'; +export * from './bleed.js'; +export * from './visually-hidden.js'; +export * from './cq.js'; \ No newline at end of file diff --git a/apps/wow-docs/styled-system/patterns/link-overlay.d.ts b/apps/wow-docs/styled-system/patterns/link-overlay.d.ts new file mode 100644 index 00000000..565005a8 --- /dev/null +++ b/apps/wow-docs/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 { SystemProperties } from '../types/style-props'; +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/apps/wow-docs/styled-system/patterns/link-overlay.js b/apps/wow-docs/styled-system/patterns/link-overlay.js new file mode 100644 index 00000000..01afd3d9 --- /dev/null +++ b/apps/wow-docs/styled-system/patterns/link-overlay.js @@ -0,0 +1,24 @@ +import { getPatternStyles, patternFns } from '../helpers.js'; +import { css } from '../css/index.js'; + +const linkOverlayConfig = { +transform(props) { + return { + _before: { + content: '""', + position: "absolute", + inset: "0", + zIndex: "0", + ...props["_before"] + }, + ...props + }; +}} + +export const getLinkOverlayStyle = (styles = {}) => { + const _styles = getPatternStyles(linkOverlayConfig, styles) + return linkOverlayConfig.transform(_styles, patternFns) +} + +export const linkOverlay = (styles) => css(getLinkOverlayStyle(styles)) +linkOverlay.raw = getLinkOverlayStyle \ No newline at end of file diff --git a/apps/wow-docs/styled-system/patterns/spacer.d.ts b/apps/wow-docs/styled-system/patterns/spacer.d.ts new file mode 100644 index 00000000..4fba408c --- /dev/null +++ b/apps/wow-docs/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 { SystemProperties } from '../types/style-props'; +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/apps/wow-docs/styled-system/patterns/spacer.js b/apps/wow-docs/styled-system/patterns/spacer.js new file mode 100644 index 00000000..e6563fe6 --- /dev/null +++ b/apps/wow-docs/styled-system/patterns/spacer.js @@ -0,0 +1,21 @@ +import { getPatternStyles, patternFns } from '../helpers.js'; +import { css } from '../css/index.js'; + +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 = {}) => { + const _styles = getPatternStyles(spacerConfig, styles) + return spacerConfig.transform(_styles, patternFns) +} + +export const spacer = (styles) => css(getSpacerStyle(styles)) +spacer.raw = getSpacerStyle \ No newline at end of file diff --git a/apps/wow-docs/styled-system/patterns/square.d.ts b/apps/wow-docs/styled-system/patterns/square.d.ts new file mode 100644 index 00000000..fda193f5 --- /dev/null +++ b/apps/wow-docs/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 { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface SquareProperties { + size?: SystemProperties["width"] +} + + +interface SquareStyles extends SquareProperties, DistributiveOmit {} + +interface SquarePatternFn { + (styles?: SquareStyles): string + raw: (styles?: SquareStyles) => SystemStyleObject +} + + +export declare const square: SquarePatternFn; diff --git a/apps/wow-docs/styled-system/patterns/square.js b/apps/wow-docs/styled-system/patterns/square.js new file mode 100644 index 00000000..447cac90 --- /dev/null +++ b/apps/wow-docs/styled-system/patterns/square.js @@ -0,0 +1,24 @@ +import { getPatternStyles, patternFns } from '../helpers.js'; +import { css } from '../css/index.js'; + +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 = {}) => { + const _styles = getPatternStyles(squareConfig, styles) + return squareConfig.transform(_styles, patternFns) +} + +export const square = (styles) => css(getSquareStyle(styles)) +square.raw = getSquareStyle \ No newline at end of file diff --git a/apps/wow-docs/styled-system/patterns/stack.d.ts b/apps/wow-docs/styled-system/patterns/stack.d.ts new file mode 100644 index 00000000..5a6c9cef --- /dev/null +++ b/apps/wow-docs/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 { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface StackProperties { + align?: SystemProperties["alignItems"] + justify?: SystemProperties["justifyContent"] + direction?: SystemProperties["flexDirection"] + gap?: SystemProperties["gap"] +} + + +interface StackStyles extends StackProperties, DistributiveOmit {} + +interface StackPatternFn { + (styles?: StackStyles): string + raw: (styles?: StackStyles) => SystemStyleObject +} + + +export declare const stack: StackPatternFn; diff --git a/apps/wow-docs/styled-system/patterns/stack.js b/apps/wow-docs/styled-system/patterns/stack.js new file mode 100644 index 00000000..b0b7a3b9 --- /dev/null +++ b/apps/wow-docs/styled-system/patterns/stack.js @@ -0,0 +1,24 @@ +import { getPatternStyles, patternFns } from '../helpers.js'; +import { css } from '../css/index.js'; + +const stackConfig = { +transform(props) { + const { align, justify, direction, gap, ...rest } = props; + return { + display: "flex", + flexDirection: direction, + alignItems: align, + justifyContent: justify, + gap, + ...rest + }; +}, +defaultValues:{direction:'column',gap:'10px'}} + +export const getStackStyle = (styles = {}) => { + const _styles = getPatternStyles(stackConfig, styles) + return stackConfig.transform(_styles, patternFns) +} + +export const stack = (styles) => css(getStackStyle(styles)) +stack.raw = getStackStyle \ No newline at end of file diff --git a/apps/wow-docs/styled-system/patterns/visually-hidden.d.ts b/apps/wow-docs/styled-system/patterns/visually-hidden.d.ts new file mode 100644 index 00000000..76f5e886 --- /dev/null +++ b/apps/wow-docs/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 { SystemProperties } from '../types/style-props'; +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/apps/wow-docs/styled-system/patterns/visually-hidden.js b/apps/wow-docs/styled-system/patterns/visually-hidden.js new file mode 100644 index 00000000..f23d1a2d --- /dev/null +++ b/apps/wow-docs/styled-system/patterns/visually-hidden.js @@ -0,0 +1,18 @@ +import { getPatternStyles, patternFns } from '../helpers.js'; +import { css } from '../css/index.js'; + +const visuallyHiddenConfig = { +transform(props) { + return { + srOnly: true, + ...props + }; +}} + +export const getVisuallyHiddenStyle = (styles = {}) => { + const _styles = getPatternStyles(visuallyHiddenConfig, styles) + return visuallyHiddenConfig.transform(_styles, patternFns) +} + +export const visuallyHidden = (styles) => css(getVisuallyHiddenStyle(styles)) +visuallyHidden.raw = getVisuallyHiddenStyle \ No newline at end of file diff --git a/apps/wow-docs/styled-system/patterns/vstack.d.ts b/apps/wow-docs/styled-system/patterns/vstack.d.ts new file mode 100644 index 00000000..4fb13221 --- /dev/null +++ b/apps/wow-docs/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 { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface VstackProperties { + justify?: SystemProperties["justifyContent"] + gap?: SystemProperties["gap"] +} + + +interface VstackStyles extends VstackProperties, DistributiveOmit {} + +interface VstackPatternFn { + (styles?: VstackStyles): string + raw: (styles?: VstackStyles) => SystemStyleObject +} + + +export declare const vstack: VstackPatternFn; diff --git a/apps/wow-docs/styled-system/patterns/vstack.js b/apps/wow-docs/styled-system/patterns/vstack.js new file mode 100644 index 00000000..8f976887 --- /dev/null +++ b/apps/wow-docs/styled-system/patterns/vstack.js @@ -0,0 +1,24 @@ +import { getPatternStyles, patternFns } from '../helpers.js'; +import { css } from '../css/index.js'; + +const vstackConfig = { +transform(props) { + const { justify, gap, ...rest } = props; + return { + display: "flex", + alignItems: "center", + justifyContent: justify, + gap, + flexDirection: "column", + ...rest + }; +}, +defaultValues:{gap:'10px'}} + +export const getVstackStyle = (styles = {}) => { + const _styles = getPatternStyles(vstackConfig, styles) + return vstackConfig.transform(_styles, patternFns) +} + +export const vstack = (styles) => css(getVstackStyle(styles)) +vstack.raw = getVstackStyle \ No newline at end of file diff --git a/apps/wow-docs/styled-system/patterns/wrap.d.ts b/apps/wow-docs/styled-system/patterns/wrap.d.ts new file mode 100644 index 00000000..36ba882c --- /dev/null +++ b/apps/wow-docs/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 { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface WrapProperties { + gap?: SystemProperties["gap"] + rowGap?: SystemProperties["gap"] + columnGap?: SystemProperties["gap"] + align?: SystemProperties["alignItems"] + justify?: SystemProperties["justifyContent"] +} + + +interface WrapStyles extends WrapProperties, DistributiveOmit {} + +interface WrapPatternFn { + (styles?: WrapStyles): string + raw: (styles?: WrapStyles) => SystemStyleObject +} + + +export declare const wrap: WrapPatternFn; diff --git a/apps/wow-docs/styled-system/patterns/wrap.js b/apps/wow-docs/styled-system/patterns/wrap.js new file mode 100644 index 00000000..80778180 --- /dev/null +++ b/apps/wow-docs/styled-system/patterns/wrap.js @@ -0,0 +1,25 @@ +import { getPatternStyles, patternFns } from '../helpers.js'; +import { css } from '../css/index.js'; + +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 = {}) => { + const _styles = getPatternStyles(wrapConfig, styles) + return wrapConfig.transform(_styles, patternFns) +} + +export const wrap = (styles) => css(getWrapStyle(styles)) +wrap.raw = getWrapStyle \ No newline at end of file diff --git a/apps/wow-docs/styled-system/tokens/index.d.ts b/apps/wow-docs/styled-system/tokens/index.d.ts new file mode 100644 index 00000000..c398f48f --- /dev/null +++ b/apps/wow-docs/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/apps/wow-docs/styled-system/tokens/index.js b/apps/wow-docs/styled-system/tokens/index.js new file mode 100644 index 00000000..a8b0cd77 --- /dev/null +++ b/apps/wow-docs/styled-system/tokens/index.js @@ -0,0 +1,440 @@ +const tokens = { + "colors.red.50": { + value: "#FDECEB", + variable: "var(--colors-red-50)", + }, + "colors.red.100": { + value: "#FBD9D7", + variable: "var(--colors-red-100)", + }, + "colors.red.150": { + value: "#F9C7C2", + variable: "var(--colors-red-150)", + }, + "colors.red.200": { + value: "#F7B4AE", + variable: "var(--colors-red-200)", + }, + "colors.red.300": { + value: "#F28E86", + variable: "var(--colors-red-300)", + }, + "colors.red.400": { + value: "#EE695D", + variable: "var(--colors-red-400)", + }, + "colors.red.500": { + value: "#EA4335", + variable: "var(--colors-red-500)", + }, + "colors.red.600": { + value: "#BB362A", + variable: "var(--colors-red-600)", + }, + "colors.red.700": { + value: "#8C2820", + variable: "var(--colors-red-700)", + }, + "colors.red.800": { + value: "#5E1B15", + variable: "var(--colors-red-800)", + }, + "colors.red.850": { + value: "#461410", + variable: "var(--colors-red-850)", + }, + "colors.red.900": { + value: "#2F0D0B", + variable: "var(--colors-red-900)", + }, + "colors.red.950": { + value: "#170705", + variable: "var(--colors-red-950)", + }, + "colors.blue.50": { + value: "#EBF4FE", + variable: "var(--colors-blue-50)", + }, + "colors.blue.100": { + value: "#D7E9FD", + variable: "var(--colors-blue-100)", + }, + "colors.blue.150": { + value: "#C3DDFD", + variable: "var(--colors-blue-150)", + }, + "colors.blue.200": { + value: "#AFD2FC", + variable: "var(--colors-blue-200)", + }, + "colors.blue.300": { + value: "#86BCFA", + variable: "var(--colors-blue-300)", + }, + "colors.blue.400": { + value: "#5EA5F9", + variable: "var(--colors-blue-400)", + }, + "colors.blue.500": { + value: "#368FF7", + variable: "var(--colors-blue-500)", + }, + "colors.blue.600": { + value: "#2B72C6", + variable: "var(--colors-blue-600)", + }, + "colors.blue.700": { + value: "#205694", + variable: "var(--colors-blue-700)", + }, + "colors.blue.800": { + value: "#163963", + variable: "var(--colors-blue-800)", + }, + "colors.blue.850": { + value: "#102B4A", + variable: "var(--colors-blue-850)", + }, + "colors.blue.900": { + value: "#0B1D31", + variable: "var(--colors-blue-900)", + }, + "colors.blue.950": { + value: "#050E19", + variable: "var(--colors-blue-950)", + }, + "colors.yellow.50": { + value: "#FEF7E6", + variable: "var(--colors-yellow-50)", + }, + "colors.yellow.100": { + value: "#FEEECC", + variable: "var(--colors-yellow-100)", + }, + "colors.yellow.150": { + value: "#FDE6B3", + variable: "var(--colors-yellow-150)", + }, + "colors.yellow.200": { + value: "#FDDD99", + variable: "var(--colors-yellow-200)", + }, + "colors.yellow.300": { + value: "#FBCD66", + variable: "var(--colors-yellow-300)", + }, + "colors.yellow.400": { + value: "#FABC33", + variable: "var(--colors-yellow-400)", + }, + "colors.yellow.500": { + value: "#F9AB00", + variable: "var(--colors-yellow-500)", + }, + "colors.yellow.600": { + value: "#C78900", + variable: "var(--colors-yellow-600)", + }, + "colors.yellow.700": { + value: "#956700", + variable: "var(--colors-yellow-700)", + }, + "colors.yellow.800": { + value: "#644400", + variable: "var(--colors-yellow-800)", + }, + "colors.yellow.850": { + value: "#4B3300", + variable: "var(--colors-yellow-850)", + }, + "colors.yellow.900": { + value: "#322200", + variable: "var(--colors-yellow-900)", + }, + "colors.yellow.950": { + value: "#191100", + variable: "var(--colors-yellow-950)", + }, + "colors.green.50": { + value: "#EBF6EE", + variable: "var(--colors-green-50)", + }, + "colors.green.100": { + value: "#D6EEDD", + variable: "var(--colors-green-100)", + }, + "colors.green.150": { + value: "#C2E5CB", + variable: "var(--colors-green-150)", + }, + "colors.green.200": { + value: "#AEDCBA", + variable: "var(--colors-green-200)", + }, + "colors.green.300": { + value: "#85CB98", + variable: "var(--colors-green-300)", + }, + "colors.green.400": { + value: "#5DB975", + variable: "var(--colors-green-400)", + }, + "colors.green.500": { + value: "#34A853", + variable: "var(--colors-green-500)", + }, + "colors.green.600": { + value: "#2A8642", + variable: "var(--colors-green-600)", + }, + "colors.green.700": { + value: "#1F6532", + variable: "var(--colors-green-700)", + }, + "colors.green.800": { + value: "#154321", + variable: "var(--colors-green-800)", + }, + "colors.green.850": { + value: "#103219", + variable: "var(--colors-green-850)", + }, + "colors.green.900": { + value: "#0A2211", + variable: "var(--colors-green-900)", + }, + "colors.green.950": { + value: "#051108", + variable: "var(--colors-green-950)", + }, + "gradients.blueGradientDark": { + value: "linear-gradient(to right, #368FF7, #205694)", + variable: "var(--gradients-blue-gradient-dark)", + }, + "gradients.blueGradientLight": { + value: "linear-gradient(to right, #AFD2FC, #4792EE)", + variable: "var(--gradients-blue-gradient-light)", + }, + "gradients.redGradientDark": { + value: "linear-gradient(to right, #EE695D, #EA4335)", + variable: "var(--gradients-red-gradient-dark)", + }, + "gradients.redGradientLight": { + value: "linear-gradient(to right, #F9C7C2, #F28E86)", + variable: "var(--gradients-red-gradient-light)", + }, + "gradients.greenGradientDark": { + value: "linear-gradient(to right, #34A853, #1F6532)", + variable: "var(--gradients-green-gradient-dark)", + }, + "gradients.greenGradientLight": { + value: "linear-gradient(to right, #C2E5CB, #5DB975)", + variable: "var(--gradients-green-gradient-light)", + }, + "gradients.yellowGradientDark": { + value: "linear-gradient(to right, #FBCD66, #F9AB00)", + variable: "var(--gradients-yellow-gradient-dark)", + }, + "gradients.yellowGradientLight": { + value: "linear-gradient(to right, #FDE6B2, #FDDD99)", + variable: "var(--gradients-yellow-gradient-light)", + }, + "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)", + }, + "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)", + }, + "colors.primary": { + value: "#368FF7", + variable: "var(--colors-primary)", + }, + "colors.success": { + value: "#34A853", + variable: "var(--colors-success)", + }, + "colors.error": { + value: "#EA4335", + variable: "var(--colors-error)", + }, + "colors.backgroundNormal": { + value: "#FFFFFF", + variable: "var(--colors-background-normal)", + }, + "colors.backgroundAlternative": { + value: "#F7F7F7", + variable: "var(--colors-background-alternative)", + }, + "colors.backgroundDimmer": { + value: "rgba(0, 0, 0, 0.8)", + variable: "var(--colors-background-dimmer)", + }, + "colors.sub": { + value: "#8F8F8F", + variable: "var(--colors-sub)", + }, + "colors.outline": { + value: "#C2C2C2", + variable: "var(--colors-outline)", + }, + "colors.textBlack": { + value: "#000000", + variable: "var(--colors-text-black)", + }, + "colors.textWhite": { + value: "#FFFFFF", + variable: "var(--colors-text-white)", + }, + "colors.darkDisabled": { + value: "#C2C2C2", + variable: "var(--colors-dark-disabled)", + }, + "colors.lightDisabled": { + value: "#E1E1E1", + variable: "var(--colors-light-disabled)", + }, + "colors.blueHover": { + value: "#2B72C6", + variable: "var(--colors-blue-hover)", + }, + "colors.monoHover": { + value: "#121212", + variable: "var(--colors-mono-hover)", + }, + "colors.elevatedHover": { + value: "rgba(16, 43, 74, 0.2)", + variable: "var(--colors-elevated-hover)", + }, + "colors.bluePressed": { + value: "#5EA5F9", + variable: "var(--colors-blue-pressed)", + }, + "colors.blueBackgroundPressed": { + value: "#EBF4FE", + variable: "var(--colors-blue-background-pressed)", + }, + "colors.monoBackgroundPressed": { + value: "#F7F7F7", + variable: "var(--colors-mono-background-pressed)", + }, + "colors.shadowSmall": { + value: "rgba(0, 0, 0, 0.1)", + variable: "var(--colors-shadow-small)", + }, + "colors.shadowMedium": { + value: "rgba(0, 0, 0, 0.2)", + variable: "var(--colors-shadow-medium)", + }, + "colors.blueShadow": { + value: "rgba(16, 43, 74, 0.2)", + variable: "var(--colors-blue-shadow)", + }, + "colors.discord": { + value: "#5566FB", + variable: "var(--colors-discord)", + }, + "colors.github": { + value: "#000000", + variable: "var(--colors-github)", + }, + "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.150": { + value: "var(--colors-color-palette-150)", + variable: "var(--colors-color-palette-150)", + }, + "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.850": { + value: "var(--colors-color-palette-850)", + variable: "var(--colors-color-palette-850)", + }, + "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)", + }, + "colors.colorPalette": { + value: "var(--colors-color-palette)", + variable: "var(--colors-color-palette)", + }, +}; + +export function token(path, fallback) { + return tokens[path]?.value || fallback; +} + +function tokenVar(path, fallback) { + return tokens[path]?.variable || fallback; +} + +token.var = tokenVar; diff --git a/apps/wow-docs/styled-system/tokens/tokens.d.ts b/apps/wow-docs/styled-system/tokens/tokens.d.ts new file mode 100644 index 00000000..492bb760 --- /dev/null +++ b/apps/wow-docs/styled-system/tokens/tokens.d.ts @@ -0,0 +1,279 @@ +/* eslint-disable */ +export type Token = + | "colors.red.50" + | "colors.red.100" + | "colors.red.150" + | "colors.red.200" + | "colors.red.300" + | "colors.red.400" + | "colors.red.500" + | "colors.red.600" + | "colors.red.700" + | "colors.red.800" + | "colors.red.850" + | "colors.red.900" + | "colors.red.950" + | "colors.blue.50" + | "colors.blue.100" + | "colors.blue.150" + | "colors.blue.200" + | "colors.blue.300" + | "colors.blue.400" + | "colors.blue.500" + | "colors.blue.600" + | "colors.blue.700" + | "colors.blue.800" + | "colors.blue.850" + | "colors.blue.900" + | "colors.blue.950" + | "colors.yellow.50" + | "colors.yellow.100" + | "colors.yellow.150" + | "colors.yellow.200" + | "colors.yellow.300" + | "colors.yellow.400" + | "colors.yellow.500" + | "colors.yellow.600" + | "colors.yellow.700" + | "colors.yellow.800" + | "colors.yellow.850" + | "colors.yellow.900" + | "colors.yellow.950" + | "colors.green.50" + | "colors.green.100" + | "colors.green.150" + | "colors.green.200" + | "colors.green.300" + | "colors.green.400" + | "colors.green.500" + | "colors.green.600" + | "colors.green.700" + | "colors.green.800" + | "colors.green.850" + | "colors.green.900" + | "colors.green.950" + | "gradients.blueGradientDark" + | "gradients.blueGradientLight" + | "gradients.redGradientDark" + | "gradients.redGradientLight" + | "gradients.greenGradientDark" + | "gradients.greenGradientLight" + | "gradients.yellowGradientDark" + | "gradients.yellowGradientLight" + | "breakpoints.sm" + | "breakpoints.md" + | "breakpoints.lg" + | "breakpoints.xl" + | "breakpoints.2xl" + | "sizes.breakpoint-sm" + | "sizes.breakpoint-md" + | "sizes.breakpoint-lg" + | "sizes.breakpoint-xl" + | "sizes.breakpoint-2xl" + | "colors.primary" + | "colors.success" + | "colors.error" + | "colors.backgroundNormal" + | "colors.backgroundAlternative" + | "colors.backgroundDimmer" + | "colors.sub" + | "colors.outline" + | "colors.textBlack" + | "colors.textWhite" + | "colors.darkDisabled" + | "colors.lightDisabled" + | "colors.blueHover" + | "colors.monoHover" + | "colors.elevatedHover" + | "colors.bluePressed" + | "colors.blueBackgroundPressed" + | "colors.monoBackgroundPressed" + | "colors.shadowSmall" + | "colors.shadowMedium" + | "colors.blueShadow" + | "colors.discord" + | "colors.github" + | "colors.colorPalette.50" + | "colors.colorPalette.100" + | "colors.colorPalette.150" + | "colors.colorPalette.200" + | "colors.colorPalette.300" + | "colors.colorPalette.400" + | "colors.colorPalette.500" + | "colors.colorPalette.600" + | "colors.colorPalette.700" + | "colors.colorPalette.800" + | "colors.colorPalette.850" + | "colors.colorPalette.900" + | "colors.colorPalette.950" + | "colors.colorPalette"; + +export type ColorPalette = + | "red" + | "blue" + | "yellow" + | "green" + | "primary" + | "success" + | "error" + | "backgroundNormal" + | "backgroundAlternative" + | "backgroundDimmer" + | "sub" + | "outline" + | "textBlack" + | "textWhite" + | "darkDisabled" + | "lightDisabled" + | "blueHover" + | "monoHover" + | "elevatedHover" + | "bluePressed" + | "blueBackgroundPressed" + | "monoBackgroundPressed" + | "shadowSmall" + | "shadowMedium" + | "blueShadow" + | "discord" + | "github"; + +export type ColorToken = + | "red.50" + | "red.100" + | "red.150" + | "red.200" + | "red.300" + | "red.400" + | "red.500" + | "red.600" + | "red.700" + | "red.800" + | "red.850" + | "red.900" + | "red.950" + | "blue.50" + | "blue.100" + | "blue.150" + | "blue.200" + | "blue.300" + | "blue.400" + | "blue.500" + | "blue.600" + | "blue.700" + | "blue.800" + | "blue.850" + | "blue.900" + | "blue.950" + | "yellow.50" + | "yellow.100" + | "yellow.150" + | "yellow.200" + | "yellow.300" + | "yellow.400" + | "yellow.500" + | "yellow.600" + | "yellow.700" + | "yellow.800" + | "yellow.850" + | "yellow.900" + | "yellow.950" + | "green.50" + | "green.100" + | "green.150" + | "green.200" + | "green.300" + | "green.400" + | "green.500" + | "green.600" + | "green.700" + | "green.800" + | "green.850" + | "green.900" + | "green.950" + | "primary" + | "success" + | "error" + | "backgroundNormal" + | "backgroundAlternative" + | "backgroundDimmer" + | "sub" + | "outline" + | "textBlack" + | "textWhite" + | "darkDisabled" + | "lightDisabled" + | "blueHover" + | "monoHover" + | "elevatedHover" + | "bluePressed" + | "blueBackgroundPressed" + | "monoBackgroundPressed" + | "shadowSmall" + | "shadowMedium" + | "blueShadow" + | "discord" + | "github" + | "colorPalette.50" + | "colorPalette.100" + | "colorPalette.150" + | "colorPalette.200" + | "colorPalette.300" + | "colorPalette.400" + | "colorPalette.500" + | "colorPalette.600" + | "colorPalette.700" + | "colorPalette.800" + | "colorPalette.850" + | "colorPalette.900" + | "colorPalette.950" + | "colorPalette"; + +export type GradientToken = + | "blueGradientDark" + | "blueGradientLight" + | "redGradientDark" + | "redGradientLight" + | "greenGradientDark" + | "greenGradientLight" + | "yellowGradientDark" + | "yellowGradientLight"; + +export type BreakpointToken = "sm" | "md" | "lg" | "xl" | "2xl"; + +export type SizeToken = + | "breakpoint-sm" + | "breakpoint-md" + | "breakpoint-lg" + | "breakpoint-xl" + | "breakpoint-2xl"; + +export type Tokens = { + colors: ColorToken; + gradients: GradientToken; + breakpoints: BreakpointToken; + sizes: SizeToken; +} & { [token: string]: never }; + +export type TokenCategory = + | "aspectRatios" + | "zIndex" + | "opacity" + | "colors" + | "fonts" + | "fontSizes" + | "fontWeights" + | "lineHeights" + | "letterSpacings" + | "sizes" + | "shadows" + | "spacing" + | "radii" + | "borders" + | "borderWidths" + | "durations" + | "easings" + | "animations" + | "blurs" + | "gradients" + | "breakpoints" + | "assets"; diff --git a/apps/wow-docs/styled-system/types/composition.d.ts b/apps/wow-docs/styled-system/types/composition.d.ts new file mode 100644 index 00000000..62d63dec --- /dev/null +++ b/apps/wow-docs/styled-system/types/composition.d.ts @@ -0,0 +1,138 @@ +/* eslint-disable */ +import type { CompositionStyleObject } from './system-types'; + +interface Token { + value: T + description?: string +} + +interface Recursive { + [key: string]: Recursive | T +} + +/* ----------------------------------------------------------------------------- + * Text styles + * -----------------------------------------------------------------------------*/ + +type TextStyleProperty = + | 'font' + | 'fontFamily' + | 'fontFeatureSettings' + | 'fontKerning' + | 'fontLanguageOverride' + | 'fontOpticalSizing' + | 'fontPalette' + | 'fontSize' + | 'fontSizeAdjust' + | 'fontStretch' + | 'fontStyle' + | 'fontSynthesis' + | 'fontVariant' + | 'fontVariantAlternates' + | 'fontVariantCaps' + | 'fontVariantLigatures' + | 'fontVariantNumeric' + | 'fontVariantPosition' + | 'fontVariationSettings' + | 'fontWeight' + | 'hypens' + | 'hyphenateCharacter' + | 'hyphenateLimitChars' + | 'letterSpacing' + | 'lineBreak' + | 'lineHeight' + | 'quotes' + | 'overflowWrap' + | 'textCombineUpright' + | 'textDecoration' + | 'textDecorationColor' + | 'textDecorationLine' + | 'textDecorationSkipInk' + | 'textDecorationStyle' + | 'textDecorationThickness' + | 'textEmphasis' + | 'textEmphasisColor' + | 'textEmphasisPosition' + | 'textEmphasisStyle' + | 'textIndent' + | 'textJustify' + | 'textOrientation' + | 'textOverflow' + | 'textRendering' + | 'textShadow' + | 'textTransform' + | 'textUnderlineOffset' + | 'textUnderlinePosition' + | 'textWrap' + | 'textWrapMode' + | 'textWrapStyle' + | 'verticalAlign' + | 'whiteSpace' + | 'wordBreak' + | 'wordSpacing' + +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/apps/wow-docs/styled-system/types/conditions.d.ts b/apps/wow-docs/styled-system/types/conditions.d.ts new file mode 100644 index 00000000..7cff43ee --- /dev/null +++ b/apps/wow-docs/styled-system/types/conditions.d.ts @@ -0,0 +1,274 @@ +/* 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, &[data-placeholder]` */ + "_placeholder": string + /** `&:is(:placeholder-shown, [data-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": string + /** `.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 + /** `@starting-style` */ + "_starting": string + /** `@media screen and (min-width: 40rem)` */ + "sm": string + /** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */ + "smOnly": string + /** `@media screen and (max-width: 39.9975rem)` */ + "smDown": string + /** `@media screen and (min-width: 48rem)` */ + "md": string + /** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */ + "mdOnly": string + /** `@media screen and (max-width: 47.9975rem)` */ + "mdDown": string + /** `@media screen and (min-width: 64rem)` */ + "lg": string + /** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */ + "lgOnly": string + /** `@media screen and (max-width: 63.9975rem)` */ + "lgDown": string + /** `@media screen and (min-width: 80rem)` */ + "xl": string + /** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */ + "xlOnly": string + /** `@media screen and (max-width: 79.9975rem)` */ + "xlDown": string + /** `@media screen and (min-width: 96rem)` */ + "2xl": string + /** `@media screen and (min-width: 96rem)` */ + "2xlOnly": string + /** `@media screen and (max-width: 95.9975rem)` */ + "2xlDown": string + /** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */ + "smToMd": string + /** `@media screen and (min-width: 40rem) and (max-width: 63.9975rem)` */ + "smToLg": string + /** `@media screen and (min-width: 40rem) and (max-width: 79.9975rem)` */ + "smToXl": string + /** `@media screen and (min-width: 40rem) and (max-width: 95.9975rem)` */ + "smTo2xl": string + /** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */ + "mdToLg": string + /** `@media screen and (min-width: 48rem) and (max-width: 79.9975rem)` */ + "mdToXl": string + /** `@media screen and (min-width: 48rem) and (max-width: 95.9975rem)` */ + "mdTo2xl": string + /** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */ + "lgToXl": string + /** `@media screen and (min-width: 64rem) and (max-width: 95.9975rem)` */ + "lgTo2xl": string + /** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */ + "xlTo2xl": string + /** `@container (min-width: 20rem)` */ + "@/xs": string + /** `@container (min-width: 24rem)` */ + "@/sm": string + /** `@container (min-width: 28rem)` */ + "@/md": string + /** `@container (min-width: 32rem)` */ + "@/lg": string + /** `@container (min-width: 36rem)` */ + "@/xl": string + /** `@container (min-width: 42rem)` */ + "@/2xl": string + /** `@container (min-width: 48rem)` */ + "@/3xl": string + /** `@container (min-width: 56rem)` */ + "@/4xl": string + /** `@container (min-width: 64rem)` */ + "@/5xl": string + /** `@container (min-width: 72rem)` */ + "@/6xl": string + /** `@container (min-width: 80rem)` */ + "@/7xl": string + /** `@container (min-width: 90rem)` */ + "@/8xl": string + /** The base (=no conditions) styles to apply */ + "base": string +} + +export type ConditionalValue = + | V + | Array + | { + [K in keyof Conditions]?: ConditionalValue + } + +export type Nested

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

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

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

+} diff --git a/apps/wow-docs/styled-system/types/csstype.d.ts b/apps/wow-docs/styled-system/types/csstype.d.ts new file mode 100644 index 00000000..2c9b3fcd --- /dev/null +++ b/apps/wow-docs/styled-system/types/csstype.d.ts @@ -0,0 +1,21298 @@ +/* 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] | readonly 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** | **115** | **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**: `