├── .nvmrc
├── .prettierignore
├── .ncurc.json
├── site
├── src
│ ├── vite-env.d.ts
│ ├── index.css
│ ├── main.tsx
│ ├── color-mode-button.tsx
│ ├── codeblocks.ts
│ ├── useColorMode.ts
│ ├── code.tsx
│ ├── copy-code-button.tsx
│ └── App.tsx
├── postcss.config.cjs
├── tsconfig.node.json
├── vite.config.ts
├── panda.config.ts
├── .gitignore
├── .eslintrc.cjs
├── index.html
├── tsconfig.json
├── package.json
└── README.md
├── .npmrc
├── examples
└── next-js
│ ├── .eslintrc.json
│ ├── src
│ └── app
│ │ ├── global.css
│ │ ├── page.tsx
│ │ ├── layout.tsx
│ │ └── favicon.ico
│ ├── postcss.config.cjs
│ ├── next.config.js
│ ├── panda.config.ts
│ ├── .gitignore
│ ├── public
│ ├── vercel.svg
│ └── next.svg
│ ├── package.json
│ ├── tsconfig.json
│ └── README.md
├── .husky
├── pre-commit
└── commit-msg
├── pnpm-workspace.yaml
├── .prettierrc
├── packages
└── animated-pandacss
│ ├── CHANGELOG.md
│ ├── .release-it.json
│ ├── tsconfig.json
│ ├── src
│ ├── index.ts
│ └── keyframes.ts
│ └── package.json
├── .github
├── composite-actions
│ └── install
│ │ └── action.yml
├── dependabot.yml
└── workflows
│ └── static.yml
├── .gitignore
├── package.json
└── README.md
/.nvmrc:
--------------------------------------------------------------------------------
1 | 18.x
2 |
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | *.hbs
--------------------------------------------------------------------------------
/.ncurc.json:
--------------------------------------------------------------------------------
1 | {
2 | "reject": ["@types/node"]
3 | }
4 |
--------------------------------------------------------------------------------
/site/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/site/src/index.css:
--------------------------------------------------------------------------------
1 | @layer reset, base, tokens, recipes, utilities;
2 |
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | unsafe-perm=true
2 | save-exact=true
3 | enable-pre-post-scripts=true
--------------------------------------------------------------------------------
/examples/next-js/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/examples/next-js/src/app/global.css:
--------------------------------------------------------------------------------
1 | @layer reset, base, tokens, recipes, utilities;
2 |
--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | . "$(dirname "$0")/_/husky.sh"
3 |
4 | pnpm lint-staged
5 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - "examples/**"
3 | - "packages/*"
4 | - "site"
5 |
--------------------------------------------------------------------------------
/.husky/commit-msg:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | . "$(dirname "$0")/_/husky.sh"
3 |
4 | pnpm commitlint --edit
5 |
--------------------------------------------------------------------------------
/site/postcss.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | '@pandacss/dev/postcss': {},
4 | },
5 | }
--------------------------------------------------------------------------------
/examples/next-js/postcss.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | '@pandacss/dev/postcss': {},
4 | },
5 | }
--------------------------------------------------------------------------------
/examples/next-js/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {}
3 |
4 | module.exports = nextConfig
5 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 100,
3 | "singleQuote": true,
4 | "trailingComma": "all",
5 | "arrowParens": "always",
6 | "semi": false
7 | }
8 |
--------------------------------------------------------------------------------
/site/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "composite": true,
4 | "skipLibCheck": true,
5 | "module": "ESNext",
6 | "moduleResolution": "bundler",
7 | "allowSyntheticDefaultImports": true
8 | },
9 | "include": ["vite.config.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/site/vite.config.ts:
--------------------------------------------------------------------------------
1 | import react from '@vitejs/plugin-react'
2 | import { defineConfig } from 'vite'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | base: './',
7 | plugins: [react()],
8 | build: {
9 | outDir: 'site-build',
10 | },
11 | })
12 |
--------------------------------------------------------------------------------
/site/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.tsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')!).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/site/panda.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from '@pandacss/dev'
2 |
3 | export default defineConfig({
4 | preflight: true,
5 | include: ['./src/**/*.{js,jsx,ts,tsx}'],
6 | presets: ['animated-pandacss', '@shadow-panda/preset'],
7 | exclude: [],
8 | outdir: 'styled-system',
9 | jsxFramework: 'react',
10 | })
11 |
--------------------------------------------------------------------------------
/packages/animated-pandacss/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ## [Unreleased]
2 |
3 | ## [0.0.4] - 2024-03-15
4 |
5 | - Fix preset config
6 |
7 | ## [0.0.3] - 2024-01-22
8 |
9 | - Updated Pandacss deps to dev
10 |
11 | ## [0.0.2] - 2023-08-18
12 |
13 | ### Changed
14 |
15 | - Removed extend from theme
16 |
17 | ## [0.0.1] - 2023-08-17
18 |
19 | ### Added
20 |
21 | - Initial release
22 |
--------------------------------------------------------------------------------
/site/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/packages/animated-pandacss/.release-it.json:
--------------------------------------------------------------------------------
1 | {
2 | "git": {
3 | "commitMessage": "chore: release ${npm.name} v${version}",
4 | "tagName": "${npm.name}@${version}"
5 | },
6 | "plugins": {
7 | "@release-it/keep-a-changelog": {
8 | "addUnreleased": true,
9 | "filename": "CHANGELOG.md"
10 | }
11 | },
12 | "hooks": {
13 | "before:init": ["pnpm build"]
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/examples/next-js/panda.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from '@pandacss/dev'
2 |
3 | export default defineConfig({
4 | preflight: true,
5 | presets: ['@pandacss/dev/presets', 'animated-pandacss'],
6 | include: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{js,jsx,ts,tsx}'],
7 | exclude: [],
8 | theme: {
9 | extend: {},
10 | },
11 | jsxFramework: 'react',
12 | outdir: 'styled-system',
13 | })
14 |
--------------------------------------------------------------------------------
/site/src/color-mode-button.tsx:
--------------------------------------------------------------------------------
1 | import { Expand } from '@theme-toggles/react'
2 | import '@theme-toggles/react/css/Expand.css'
3 | import { useColorMode } from './useColorMode'
4 |
5 | export const ColorModeButton = ({ className }: { className?: string }) => {
6 | const { toggle, colorMode } = useColorMode()
7 |
8 | return
9 | }
10 |
--------------------------------------------------------------------------------
/packages/animated-pandacss/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "module": "esnext",
5 | "allowSyntheticDefaultImports": true,
6 | "esModuleInterop": true,
7 | "forceConsistentCasingInFileNames": true,
8 | "verbatimModuleSyntax": true,
9 | "moduleResolution": "node",
10 | "noEmit": true,
11 | "resolveJsonModule": true,
12 | "skipLibCheck": true,
13 | "strict": true
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/site/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:@typescript-eslint/recommended',
7 | 'plugin:react-hooks/recommended',
8 | ],
9 | ignorePatterns: ['dist', '.eslintrc.cjs'],
10 | parser: '@typescript-eslint/parser',
11 | plugins: ['react-refresh'],
12 | rules: {
13 | 'react-refresh/only-export-components': [
14 | 'warn',
15 | { allowConstantExport: true },
16 | ],
17 | },
18 | }
19 |
--------------------------------------------------------------------------------
/examples/next-js/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env*.local
29 |
30 | # vercel
31 | .vercel
32 |
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 |
--------------------------------------------------------------------------------
/.github/composite-actions/install/action.yml:
--------------------------------------------------------------------------------
1 | name: "Install"
2 | description: "Sets up Node.js and runs install"
3 |
4 | runs:
5 | using: composite
6 | steps:
7 | - uses: pnpm/action-setup@v2.2.4
8 | with:
9 | version: 7
10 |
11 | - name: Setup Node.js
12 | uses: actions/setup-node@v3
13 | with:
14 | node-version: 16.x
15 | registry-url: "https://registry.npmjs.org"
16 | cache: "pnpm"
17 |
18 | - name: Install dependencies
19 | shell: bash
20 | run: pnpm install --no-frozen-lockfile
21 |
--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
1 | # To get started with Dependabot version updates, you'll need to specify which
2 | # package ecosystems to update and where the package manifests are located.
3 | # Please see the documentation for all configuration options:
4 | # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
5 |
6 | version: 2
7 | updates:
8 | - package-ecosystem: "pnpm" # See documentation for possible values
9 | directory: "/" # Location of package manifests
10 | schedule:
11 | interval: "weekly"
12 |
--------------------------------------------------------------------------------
/examples/next-js/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { css } from 'styled-system/css'
4 |
5 | export default function Home() {
6 | return (
7 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/site/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
9 |
10 | Animated PandaCSS
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/examples/next-js/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | node_modules/
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | .next
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env*.local
29 |
30 | # vercel
31 | .vercel
32 |
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 |
37 | # Panda
38 | styled-system
39 |
40 | # Sitemap
41 | sitemap*.xml
42 |
43 | .env
44 | dist
45 | *.tgz
46 |
47 | # contentlayer
48 | .contentlayer
--------------------------------------------------------------------------------
/site/src/codeblocks.ts:
--------------------------------------------------------------------------------
1 | export const installScript = `npm i -D animated-pandacss
2 | yarn add -D animated-pandacss
3 | pnpm i -D animated-pandacss`
4 |
5 | export const addToPreset = `import { defineConfig } from '@pandacss/dev'
6 |
7 | export default defineConfig({
8 | // Other config...
9 | presets: ['animated-pandacss', '@pandacss/dev/presets'],
10 | })
11 | `
12 |
13 | export const usageScript = `
23 | Animated element
24 |
`
25 |
--------------------------------------------------------------------------------
/examples/next-js/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "examples-react-next-js",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "prepare": "panda codegen --silent",
7 | "dev": "next dev",
8 | "build": "next build",
9 | "start": "next start",
10 | "lint": "next lint"
11 | },
12 | "dependencies": {
13 | "@types/node": "20.4.9",
14 | "@types/react": "18.2.20",
15 | "@types/react-dom": "18.2.7",
16 | "animated-pandacss": "workspace:*",
17 | "eslint": "8.47.0",
18 | "eslint-config-next": "13.4.16",
19 | "next": "13.4.16",
20 | "react": "18.2.0",
21 | "react-dom": "18.2.0",
22 | "typescript": "5.1.6"
23 | },
24 | "devDependencies": {
25 | "@pandacss/dev": "0.11.1"
26 | }
27 | }
--------------------------------------------------------------------------------
/site/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
6 | "module": "ESNext",
7 | "skipLibCheck": true,
8 | /* Bundler mode */
9 | "moduleResolution": "bundler",
10 | "allowImportingTsExtensions": true,
11 | "resolveJsonModule": true,
12 | "isolatedModules": true,
13 | "noEmit": true,
14 | "jsx": "react-jsx",
15 | /* Linting */
16 | "strict": true,
17 | "noUnusedLocals": true,
18 | "noUnusedParameters": true,
19 | "noFallthroughCasesInSwitch": true
20 | },
21 | "include": ["src", "styled-system"],
22 | "references": [
23 | {
24 | "path": "./tsconfig.node.json"
25 | }
26 | ]
27 | }
28 |
--------------------------------------------------------------------------------
/site/src/useColorMode.ts:
--------------------------------------------------------------------------------
1 | import { useEffectOnce, useLocalStorage, useUpdateEffect } from 'usehooks-ts'
2 |
3 | type ColorMode = 'light' | 'dark'
4 |
5 | export const colorModeLocalStorageKey = 'animated-pandacss-color-mode'
6 |
7 | export const useColorMode = () => {
8 | const [colorMode, setColorMode] = useLocalStorage(colorModeLocalStorageKey, 'dark')
9 |
10 | const syncColorMode = () =>
11 | colorMode === 'dark'
12 | ? document.documentElement.classList.add('dark')
13 | : document.documentElement.classList.remove('dark')
14 |
15 | useEffectOnce(syncColorMode)
16 | useUpdateEffect(syncColorMode, [colorMode])
17 |
18 | return {
19 | colorMode,
20 | toggle: () => setColorMode((prev) => (prev === 'dark' ? 'light' : 'dark')),
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/examples/next-js/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from 'next'
2 | import { Fira_Code, Plus_Jakarta_Sans } from 'next/font/google'
3 | import { PropsWithChildren } from 'react'
4 | import { cx } from 'styled-system/css'
5 | import './global.css'
6 |
7 | const body = Plus_Jakarta_Sans({ subsets: ['latin'], variable: '--font-body' })
8 | const code = Fira_Code({ subsets: ['latin'], variable: '--font-code' })
9 |
10 | export const metadata: Metadata = {
11 | title: 'Create Next App',
12 | description: 'Generated by create next app',
13 | }
14 |
15 | const RootLayout = (props: PropsWithChildren) => {
16 | const { children } = props
17 | return (
18 |
19 | {children}
20 |
21 | )
22 | }
23 |
24 | export default RootLayout
25 |
--------------------------------------------------------------------------------
/examples/next-js/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es6",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "bundler",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true,
17 | "baseUrl": ".",
18 | "plugins": [
19 | {
20 | "name": "next"
21 | }
22 | ],
23 | "paths": {
24 | "~/*": ["./src/*"]
25 | }
26 | },
27 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "postcss.config.cjs"],
28 | "exclude": ["node_modules"]
29 | }
30 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "animated-pandacss-root",
3 | "version": "0.0.0",
4 | "private": true,
5 | "scripts": {
6 | "prepare": "husky install",
7 | "preset": "pnpm --filter=animated-pandacss",
8 | "site": "pnpm --filter=site"
9 | },
10 | "devDependencies": {
11 | "@commitlint/cli": "17.7.1",
12 | "@commitlint/config-conventional": "17.7.0",
13 | "husky": "8.0.3",
14 | "lint-staged": "14.0.0",
15 | "prettier": "3.0.01",
16 | "prettier-plugin-organize-imports": "3.2.3"
17 | },
18 | "commitlint": {
19 | "extends": [
20 | "@commitlint/config-conventional"
21 | ]
22 | },
23 | "lint-staged": {
24 | "**/*.{js,jsx,ts,tsx,json}": [
25 | "prettier --plugin prettier-plugin-organize-imports --write"
26 | ]
27 | },
28 | "packageManager": "pnpm@8.6.7"
29 | }
30 |
--------------------------------------------------------------------------------
/site/src/code.tsx:
--------------------------------------------------------------------------------
1 | import SyntaxHighlighter from 'react-syntax-highlighter'
2 | import { irBlack } from 'react-syntax-highlighter/dist/esm/styles/hljs'
3 |
4 | import { Box, Flex } from '../styled-system/jsx'
5 | import { CopyCodeButton } from './copy-code-button'
6 |
7 | type Props = { code: string; lang?: string }
8 |
9 | export const Code = (props: Props) => {
10 | const { code, lang = 'typescript' } = props
11 |
12 | return (
13 |
21 |
22 | {code}
23 |
24 |
25 |
26 |
27 |
28 | )
29 | }
30 |
--------------------------------------------------------------------------------
/site/src/copy-code-button.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 | import { useEffect, useState } from 'react'
3 | import { FiCheck, FiCopy } from 'react-icons/fi'
4 | import { useCopyToClipboard } from 'usehooks-ts'
5 | import { cx } from '../styled-system/css'
6 | import { button } from '../styled-system/recipes'
7 |
8 | type Props = { content: string }
9 |
10 | export const CopyCodeButton = (props: Props) => {
11 | const { content } = props
12 | const [, copy] = useCopyToClipboard()
13 | const [visible, setVisible] = useState(true)
14 |
15 | useEffect(() => {
16 | if (visible) return
17 | const timer = setTimeout(() => setVisible(true), 1000)
18 | return () => clearTimeout(timer)
19 | }, [visible])
20 |
21 | const handleClick = () => {
22 | copy(content)
23 | setVisible(false)
24 | }
25 |
26 | return (
27 |
32 | {visible ? : }
33 |
34 | )
35 | }
36 |
--------------------------------------------------------------------------------
/site/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "site",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "prepare": "panda codegen",
8 | "dev": "vite",
9 | "build": "tsc && vite build",
10 | "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
11 | "preview": "vite preview"
12 | },
13 | "dependencies": {
14 | "@theme-toggles/react": "4.1.0",
15 | "animated-pandacss": "workspace:*",
16 | "react": "^18.2.0",
17 | "react-dom": "^18.2.0",
18 | "react-icons": "4.10.1",
19 | "react-syntax-highlighter": "15.5.0",
20 | "shiki": "0.14.3",
21 | "usehooks-ts": "2.9.1"
22 | },
23 | "devDependencies": {
24 | "@pandacss/dev": "dev",
25 | "@shadow-panda/preset": "0.2.0",
26 | "@types/node": "20.4.9",
27 | "@types/react": "^18.2.15",
28 | "@types/react-dom": "^18.2.7",
29 | "@types/react-syntax-highlighter": "15.5.7",
30 | "@typescript-eslint/eslint-plugin": "^6.0.0",
31 | "@typescript-eslint/parser": "^6.0.0",
32 | "@vitejs/plugin-react": "^4.0.3",
33 | "eslint": "^8.45.0",
34 | "eslint-plugin-react-hooks": "^4.6.0",
35 | "eslint-plugin-react-refresh": "^0.4.3",
36 | "typescript": "^5.0.2",
37 | "vite": "^4.4.12",
38 | "vite-tsconfig-paths": "4.2.0"
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/examples/next-js/public/next.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/site/README.md:
--------------------------------------------------------------------------------
1 | # React + TypeScript + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
10 | ## Expanding the ESLint configuration
11 |
12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
13 |
14 | - Configure the top-level `parserOptions` property like this:
15 |
16 | ```js
17 | parserOptions: {
18 | ecmaVersion: 'latest',
19 | sourceType: 'module',
20 | project: ['./tsconfig.json', './tsconfig.node.json'],
21 | tsconfigRootDir: __dirname,
22 | },
23 | ```
24 |
25 | - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
26 | - Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
27 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
28 |
--------------------------------------------------------------------------------
/packages/animated-pandacss/src/index.ts:
--------------------------------------------------------------------------------
1 | import { definePreset } from '@pandacss/dev'
2 | import { type Preset } from '@pandacss/types'
3 |
4 | import { keyframes } from './keyframes'
5 |
6 | const preset: Preset = definePreset({
7 | theme: {
8 | extend: {
9 | keyframes,
10 | },
11 | },
12 | utilities: {
13 | extend: {
14 | animationName: {
15 | className: 'animation-name',
16 | values: 'animationName',
17 | transform(value) {
18 | return {
19 | animationName: value,
20 | animationDuration: '1s',
21 | animationFillMode: 'both',
22 |
23 | '@media (prefers-reduced-motion: reduce), print': Object.assign(
24 | {},
25 | {
26 | animationDuration: '1ms !important',
27 | transitionDuration: '1ms !important',
28 | animationIterationCount: '1 !important',
29 | },
30 | value.includes('Out') && { opacity: 0 },
31 | ),
32 | }
33 | },
34 | },
35 | animationRepeat: {
36 | className: 'animation-name',
37 | property: 'animationIterationCount',
38 | transform(value: string) {
39 | return {
40 | animationIterationCount: value,
41 | }
42 | },
43 | },
44 | },
45 | },
46 | })
47 |
48 | export default preset
49 |
50 | export { keyframes }
51 |
--------------------------------------------------------------------------------
/examples/next-js/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2 |
3 | ## Getting Started
4 |
5 | First, run the development server:
6 |
7 | ```bash
8 | npm run dev
9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | ```
14 |
15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
16 |
17 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
18 |
19 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
20 |
21 | ## Learn More
22 |
23 | To learn more about Next.js, take a look at the following resources:
24 |
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 |
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 |
30 | ## Deploy on Vercel
31 |
32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33 |
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 |
--------------------------------------------------------------------------------
/.github/workflows/static.yml:
--------------------------------------------------------------------------------
1 | # Simple workflow for deploying static content to GitHub Pages
2 | name: Deploy Demo page
3 |
4 | on:
5 | # Runs on pushes targeting the default branch
6 | push:
7 | branches: ["main"]
8 |
9 | # Allows you to run this workflow manually from the Actions tab
10 | workflow_dispatch:
11 |
12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
13 | permissions:
14 | contents: read
15 | pages: write
16 | id-token: write
17 |
18 | # Allow one concurrent deployment
19 | concurrency:
20 | group: "pages"
21 | cancel-in-progress: true
22 |
23 | env:
24 | BUILD_PATH: "site"
25 |
26 | jobs:
27 | build:
28 | name: Build
29 | runs-on: ubuntu-latest
30 | steps:
31 | - name: Checkout
32 | uses: actions/checkout@v3
33 | - name: Install
34 | uses: ./.github/composite-actions/install
35 | - name: Setup Node
36 | uses: actions/setup-node@v3
37 | - name: Setup Pages
38 | id: pages
39 | uses: actions/configure-pages@v2
40 | - name: Build with Vite
41 | run: |
42 | pnpm --filter site build
43 | working-directory: ${{ env.BUILD_PATH }}
44 | - name: Upload artifact
45 | uses: actions/upload-pages-artifact@v1
46 | with:
47 | path: ${{ env.BUILD_PATH }}/site-build
48 |
49 | deploy:
50 | environment:
51 | name: github-pages
52 | url: ${{ steps.deployment.outputs.page_url }}
53 | needs: build
54 | runs-on: ubuntu-latest
55 | name: Deploy
56 | steps:
57 | - name: Deploy to GitHub Pages
58 | id: deployment
59 | uses: actions/deploy-pages@v1
60 |
--------------------------------------------------------------------------------
/packages/animated-pandacss/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "animated-pandacss",
3 | "version": "0.0.4",
4 | "description": "Use Animate.css with Panda CSS",
5 | "keywords": [
6 | "Animate.css",
7 | "Panda CSS",
8 | "Presets"
9 | ],
10 | "author": "Abraham Aremu (https://anubra266.com/)",
11 | "homepage": "anubra266.github.io/animated-pandacss/",
12 | "license": "MIT",
13 | "repository": "https://github.com/anubra266/animated-pandacss",
14 | "bugs": {
15 | "url": "https://github.com/anubra266/animated-pandacss/issues"
16 | },
17 | "files": [
18 | "dist",
19 | "src"
20 | ],
21 | "publishConfig": {
22 | "access": "public"
23 | },
24 | "scripts": {
25 | "build": "tsup",
26 | "release-it": "release-it",
27 | "prepack": "clean-package",
28 | "postpack": "clean-package restore"
29 | },
30 | "dependencies": {
31 | "@pandacss/dev": "dev"
32 | },
33 | "devDependencies": {
34 | "@pandacss/types": "dev",
35 | "@release-it/keep-a-changelog": "4.0.0",
36 | "clean-package": "2.2.0",
37 | "release-it": "16.1.5",
38 | "tsup": "7.2.0"
39 | },
40 | "clean-package": {
41 | "replace": {
42 | "main": "dist/index.js",
43 | "module": "dist/index.mjs",
44 | "types": "dist/index.d.ts",
45 | "exports": {
46 | ".": {
47 | "types": "./dist/index.d.ts",
48 | "import": "./dist/index.mjs",
49 | "require": "./dist/index.js"
50 | },
51 | "./package.json": "./package.json"
52 | }
53 | }
54 | },
55 | "tsup": {
56 | "entry": [
57 | "src/index.ts"
58 | ],
59 | "clean": true,
60 | "dts": true,
61 | "sourcemap": true,
62 | "format": [
63 | "esm",
64 | "cjs"
65 | ]
66 | },
67 | "main": "src/index.ts"
68 | }
69 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | 🐼
11 |
12 |
13 |
14 |
15 | animated-pandacss
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | Use Animate.css with Panda CSS
38 |
39 |
40 |
41 |
42 |
43 |
44 |
npm i -D animated-pandacss
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 | ## About
53 |
54 | It's a preset for [Panda CSS](https://panda-css.com) that adds [Animate.css](https://animate.style) animations to your project.
55 |
56 | ## Install
57 |
58 | ```bash
59 | npm i -D animated-pandacss
60 | #or
61 | yarn add -D animated-pandacss
62 | #or
63 | pnpm i -D animated-pandacss
64 | ```
65 |
66 | ## Usage
67 |
68 | Add as first item of presets in your [Panda](https://panda-css.com) config.
69 |
70 | ```ts
71 | import { defineConfig } from '@pandacss/dev'
72 |
73 | export default defineConfig({
74 | // Other config...
75 | presets: ['animated-pandacss', '@pandacss/dev/presets'],
76 | })
77 | ```
78 |
79 | You can now use it in your project.
80 |
81 | ```jsx
82 |
92 | Animated element
93 |
94 | ```
95 |
96 | You can play around with the animations in the [docs](https://anubra266.github.io/animated-pandacss/)
97 |
98 | ## Sponsors ✨
99 |
100 | Thanks goes to these wonderful people
101 |
102 |
103 |
104 |
105 |
106 |
107 |
--------------------------------------------------------------------------------
/site/src/App.tsx:
--------------------------------------------------------------------------------
1 | import { keyframes } from 'animated-pandacss'
2 | import { useState } from 'react'
3 | import { BsGithub, BsTwitter } from 'react-icons/bs'
4 | import { IoClose } from 'react-icons/io5'
5 | import { css, cx } from '../styled-system/css'
6 | import { flex, grid, stack } from '../styled-system/patterns'
7 | import { badge, button, link } from '../styled-system/recipes'
8 | import { Code } from './code'
9 | import { addToPreset, installScript, usageScript } from './codeblocks'
10 | import { ColorModeButton } from './color-mode-button'
11 |
12 | const listButton = cx('dark', button({ variant: 'ghost', size: 'sm' }), css({ w: 'fit-content' }))
13 |
14 | function App() {
15 | const [animationName, setAnimationName] = useState('zoomInDown')
16 | const [listIsOpen, setListIsOpen] = useState(false)
17 | return (
18 | <>
19 |
34 |
42 | setAnimationName(undefined)}
52 | >
53 | Animated-🐼
54 |
55 |
64 | Animations for PandaCSS
65 |
66 |
74 | setListIsOpen(true)}>
75 | See animations
76 |
77 |
78 |
79 |
80 |
112 |
143 |
144 | {Object.keys(keyframes).map((animation) => (
145 | setAnimationName(animation)}
153 | >
154 | {animation}
155 |
156 | ))}
157 |
158 |
159 |
160 |
181 |
182 |
197 |
Documentation
198 |
199 |
200 |
223 |
224 |
225 |
Installation
226 |
227 |
228 |
229 |
230 |
Usage
231 |
232 |
233 | Add as first item of presets in your panda config
234 |
235 |
236 |
237 | You can now use it in your project.
238 |
239 |
240 |
241 |
242 | >
243 | )
244 | }
245 |
246 | export default App
247 |
--------------------------------------------------------------------------------
/examples/next-js/src/app/favicon.ico:
--------------------------------------------------------------------------------
1 | ( F ( n 00 (- � � �F ( $ ] � � ] $ � � � � � � � � 8 � � � � � � � � � � 8 � � � � � � � � � � � � � � � � � � � � � � � � � � # � � �OOO�������������������������ggg� � � � # Y � � ��������������������������555� � � � Y � � � � �kkk��������������������� � � � � � � � � � � ������������������ � � � � � Y � � � � �JJJ���������kkk� � � � � � Y # � � � � ���������� � � � � � � # � � � � � �111�DDD� � � � � � � � � � � � � � � � � � � 8 � � � � � � � � � � 8 � � � � � � � � $ ] � � ] $ ( @ , U � � � � U , * � � � � � � � � � � � � * � � � � � � � � � � � � � � � � Q � � � � � � � � � � � � � � � � � � Q r � � � � � � � � � � � � � � � � � � � � r r � � � � � � � � � � � � � � � � � � � � � � r O � � � � � � � � � � � � � � � � � � � � � � � � O � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � ( � � � � � � � � � � � � � � � � � � � � � � � � � � � � ' � � � � � � �888���������������������������������������������������������___� � � � � � � � � � � � � � ����������������������������������������������������������SSS� � � � � � � � + � � � � � � � �hhh����������������������������������������������������� � � � � � � � � + T � � � � � � � ��������������������������������������������������,,,� � � � � � � � � T � � � � � � � � � �GGG��������������������������������������������� � � � � � � � � � � � � � � � � � � � � ������������������������������������������ � � � � � � � � � � � � � � � � � � � � �+++���������������������������������jjj� � � � � � � � � � � � � � � � � � � � � � � ���������������������������������� � � � � � � � � � � � T � � � � � � � � � � ��������������������������III� � � � � � � � � � � � T + � � � � � � � � � � � �hhh���������������������� � � � � � � � � � � � + � � � � � � � � � � � ������������������,,,� � � � � � � � � � � � � � � � � � � � � � � � � �GGG������������� � � � � � � � � � � � � � ' � � � � � � � � � � � � ���������� � � � � � � � � � � � � ( � � � � � � � � � � � � �333�___� � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � O � � � � � � � � � � � � � � � � � � � � � � � � O r � � � � � � � � � � � � � � � � � � � � � � r r � � � � � � � � � � � � � � � � � � � � r Q � � � � � � � � � � � � � � � � � � Q � � � � � � � � � � � � � � � � * � � � � � � � � � � � � * , U � � � � U , ( 0 ` - ( L j � � � � j K ( V � � � � � � � � � � � � � � U % � � � � � � � � � � � � � � � � � � � � &