chore: create preset

.github/composite-actions/install/action.yml

@@ -0,0 +1,20 @@
+name: "Install"
+description: "Sets up Node.js and runs install"
+
+runs:
+  using: composite
+  steps:
+    - uses: pnpm/[email protected]
+      with:
+        version: 7
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: 16.x
+        registry-url: "https://registry.npmjs.org"
+        cache: "pnpm"
+
+    - name: Install dependencies
+      shell: bash
+      run: pnpm install --no-frozen-lockfile

.github/workflows/static.yml

@@ -0,0 +1,59 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy Demo page
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+env:
+  BUILD_PATH: "site"
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Install
+        uses: ./.github/composite-actions/install
+      - name: Setup Node
+        uses: actions/setup-node@v3
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v2
+      - name: Build with Vite
+        run: |
+          pnpm --filter site build
+        working-directory: ${{ env.BUILD_PATH }}
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: ${{ env.BUILD_PATH }}/site-build
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    name: Deploy
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.gitignore

@@ -0,0 +1,48 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules/
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+.next
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# Panda
+styled-system
+
+# Sitemap
+sitemap*.xml
+
+.env
+dist
+*.tgz
+
+# contentlayer
+.contentlayer

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+pnpm commitlint --edit 

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+pnpm lint-staged

.ncurc.json

@@ -0,0 +1,3 @@
+{
+  "reject": ["@types/node"]
+}

.npmrc

@@ -0,0 +1,3 @@
+unsafe-perm=true
+save-exact=true
+enable-pre-post-scripts=true

.nvmrc

@@ -0,0 +1 @@
+18.x

.prettierignore

@@ -0,0 +1 @@
+*.hbs

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "arrowParens": "always",
+  "semi": false
+}

README.md

@@ -0,0 +1,106 @@
+<div align="center">
+
+  <h1>
+    <br/>
+    <span>
+    <svg width="120" height="120">
+  <g transform="translate(0 30)">
+    <text x="25%" y="25%" font-size="2em">
+      <animateTransform attributeName="transform" type="rotate" from="90 60 30" to="450 60 30" dur="3" repeatCount="indefinite" />
+      🐼
+    </text>
+  </g>
+</svg>
+</span><br />
+panda-transitions-css
+<br />
+    <br />
+
+  </h1>
+  <sup>
+    <br />
+    <br />
+    <a href="https://www.npmjs.com/package/panda-transitions-css?style=for-the-badge">
+       <img src="https://img.shields.io/npm/v/panda-transitions-css.svg?style=for-the-badge" alt="npm package" />
+    </a>
+    <a href="https://www.npmjs.com/package/panda-transitions-css?style=for-the-badge">
+      <img src="https://img.shields.io/npm/dw/panda-transitions-css.svg?style=for-the-badge" alt="npm  downloads" />
+    </a>
+<a>
+    <img alt="NPM" src="https://img.shields.io/npm/l/panda-transitions-css?style=for-the-badge">
+</a>
+
+<a><img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/anubra266/panda-transitions-css?logo=github&style=for-the-badge">
+
+</a>
+    <br />
+   Drop-in CSS transitions from transition.css for Panda CSS.
+
+  </sup>
+  <br />
+  <br />
+  <br />
+  <br />
+  <pre>npm i -D <a href="https://www.npmjs.com/package/panda-transitions-css">panda-transitions-css</a></pre>
+  <br />
+  <br />
+  <br />
+  <br />
+  <br />
+</div>
+
+## About
+
+It's a preset for [Panda CSS](https://panda-css.com) that adds [Transition.css](https://transition.style) transitions to your project.
+
+## Install
+
+```bash
+npm i -D panda-transitions-css
+#or
+yarn add -D panda-transitions-css
+#or
+pnpm i -D panda-transitions-css
+```
+
+## Usage
+
+Add as first item of presets in your [Panda](https://panda-css.com) config.
+
+```ts
+import { defineConfig } from '@pandacss/dev'
+
+export default defineConfig({
+  // Other config...
+  presets: ['panda-transitions-css', '@pandacss/dev/presets'],
+})
+```
+
+You can now use it in your project.
+
+```jsx
+<div
+  className={css({
+    animationName: 'in:circle:hesitate',
+
+    // Optional attributes
+    animationRepeat: 'infinite', // can also be a number
+    animationDuration: '1s',
+    animationDelay: '1s',
+  })}
+>
+  Element with Transition
+</div>
+```
+
+You can play around with the animations in the [docs](https://anubra266.github.io/panda-transitions-css/)
+
+## Sponsors ✨
+
+Thanks goes to these wonderful people
+
+<p align="center">
+  <a href="https://patreon.com/anubra266?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=creatorshare_creator&utm_content=join_link">
+    <img src='https://cdn.jsdelivr.net/gh/anubra266/static@main/sponsors.svg'/>
+  </a>
+</p>

examples/next-js/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/next-js/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/next-js/README.md

@@ -0,0 +1,34 @@
+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).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+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.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/next-js/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig

examples/next-js/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "examples-react-next-js",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "prepare": "panda codegen --silent",
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@types/node": "20.4.9",
+    "@types/react": "18.2.20",
+    "@types/react-dom": "18.2.7",
+    "panda-transitions-css": "workspace:*",
+    "eslint": "8.47.0",
+    "eslint-config-next": "13.4.16",
+    "next": "13.4.16",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "typescript": "5.1.6"
+  },
+  "devDependencies": {
+    "@pandacss/dev": "0.11.1"
+  }
+}

examples/next-js/panda.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from '@pandacss/dev'
+
+export default defineConfig({
+  preflight: true,
+  presets: ['@pandacss/dev/presets', 'panda-transitions-css'],
+  include: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{js,jsx,ts,tsx}'],
+  exclude: [],
+  theme: {
+    extend: {},
+  },
+  jsxFramework: 'react',
+  outdir: 'styled-system',
+})

examples/next-js/postcss.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    '@pandacss/dev/postcss': {},
+  },
+}