├── .husky ├── .gitignore ├── _ │ └── .gitignore └── pre-commit ├── website ├── src │ ├── env.d.ts │ ├── nextra │ │ ├── tabs │ │ │ └── index.ts │ │ ├── button │ │ │ ├── index.tsx │ │ │ └── button-icon.tsx │ │ ├── sidebar │ │ │ ├── index.ts │ │ │ ├── sidebar-header.tsx │ │ │ └── sidebar-placeholder.tsx │ │ ├── treeview │ │ │ ├── index.ts │ │ │ └── treeview-context.tsx │ │ ├── icon-button │ │ │ └── index.tsx │ │ ├── lib │ │ │ ├── index.ts │ │ │ └── use-git-edit-url.ts │ │ ├── contexts │ │ │ ├── index.ts │ │ │ ├── details.ts │ │ │ └── menu.ts │ │ └── breadcrumb.tsx │ ├── components │ │ ├── providers.tsx │ │ ├── code-highlight │ │ │ ├── code.ts │ │ │ └── tabs.tsx │ │ ├── command-prompt.tsx │ │ └── navbar.tsx │ ├── mdx │ │ ├── text.tsx │ │ ├── divider.tsx │ │ ├── blockquote.tsx │ │ └── code-filename.tsx │ ├── icons │ │ ├── vue.tsx │ │ ├── word-wrap.tsx │ │ ├── index.ts │ │ ├── arrow-right.tsx │ │ ├── check.tsx │ │ ├── moon.tsx │ │ ├── information-circle.tsx │ │ ├── x.tsx │ │ └── sun.tsx │ ├── types.ts │ └── resize-polyfill.ts ├── pages │ ├── docs │ │ ├── references │ │ │ └── _meta.json │ │ ├── migration │ │ │ ├── _meta.json │ │ │ └── styled-components.md │ │ ├── overview │ │ │ └── _meta.json │ │ ├── theming │ │ │ └── _meta.json │ │ ├── customization │ │ │ └── _meta.json │ │ ├── utilities │ │ │ └── _meta.json │ │ ├── guides │ │ │ └── _meta.json │ │ ├── _meta.json │ │ ├── concepts │ │ │ └── _meta.json │ │ └── installation │ │ │ └── _meta.json │ └── _meta.json ├── public │ ├── favicon.ico │ ├── community.png │ ├── og-image.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── mstile-150x150.png │ ├── apple-touch-icon.png │ ├── profiles │ │ ├── alex-s.png │ │ ├── anubra.png │ │ └── ivica-b.png │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── videos │ │ ├── patterns-as-jsx.png │ │ ├── using-recipes.png │ │ ├── what-is-panda.png │ │ ├── building-with-panda.png │ │ ├── center-circle-square.png │ │ ├── container-grid-wrap.png │ │ ├── stack-hstack-vstack.png │ │ ├── installation-and-setup.png │ │ ├── converting-recipes-to-jsx.png │ │ ├── introduction-to-patterns.png │ │ └── introduction-to-recipes.png │ ├── stately-presets-merging.png │ ├── browserconfig.xml │ └── site.webmanifest ├── styles │ ├── Mona-Sans.ttf │ ├── Mona-Sans.woff │ ├── Mona-Sans.woff2 │ └── fonts.ts ├── .gitignore ├── .prettierrc ├── postcss.config.cjs ├── README.md ├── next-env.d.ts ├── app │ └── learn │ │ └── page.tsx └── theme │ └── layer-styles.ts ├── sandbox ├── qwik-ts │ ├── public │ │ ├── robots.txt │ │ └── manifest.json │ ├── src │ │ └── global.css │ ├── postcss.config.cjs │ ├── vite.config.ts │ ├── panda.config.ts │ ├── .eslintignore │ ├── .prettierignore │ └── .gitignore ├── nuxt │ ├── .npmrc │ ├── assets │ │ └── main.css │ ├── public │ │ └── favicon.ico │ ├── tsconfig.json │ ├── app.vue │ ├── .gitignore │ ├── nuxt.config.ts │ ├── panda.config.ts │ ├── pages │ │ └── index.tsx │ ├── components │ │ └── SetupDemo.vue │ └── package.json ├── astro │ ├── src │ │ ├── env.d.ts │ │ ├── index.css │ │ ├── layouts │ │ │ └── Layout.astro │ │ └── components │ │ │ └── button.tsx │ ├── tsconfig.json │ ├── panda.config.ts │ ├── astro.config.mjs │ └── package.json ├── gatsby-ts │ ├── gatsby-browser.ts │ ├── src │ │ ├── styles │ │ │ └── index.css │ │ ├── images │ │ │ └── icon.png │ │ └── pages │ │ │ └── index.tsx │ ├── postcss.config.cjs │ ├── .eslintrc │ ├── .gitignore │ ├── gatsby-config.ts │ ├── tsconfig.json │ └── panda.config.ts ├── preact-ts │ ├── src │ │ ├── vite-env.d.ts │ │ ├── index.css │ │ ├── main.tsx │ │ └── app.tsx │ ├── postcss.config.cjs │ ├── vite.config.ts │ ├── tsconfig.node.json │ ├── panda.config.ts │ ├── .gitignore │ ├── index.html │ └── package.json ├── remix │ ├── app │ │ ├── index.css │ │ └── components │ │ │ └── Button.tsx │ ├── public │ │ └── favicon.ico │ ├── remix.env.d.ts │ ├── postcss.config.js │ ├── .eslintrc.js │ ├── server.js │ └── .gitignore ├── solid-ts │ ├── .gitignore │ ├── src │ │ ├── index.css │ │ ├── assets │ │ │ └── favicon.ico │ │ └── index.tsx │ ├── postcss.config.cjs │ ├── panda.config.ts │ ├── vite.config.ts │ ├── tsconfig.json │ ├── index.html │ └── package.json ├── storybook │ ├── index.css │ ├── postcss.config.cjs │ ├── panda.config.ts │ ├── .storybook │ │ ├── preview.js │ │ └── main.js │ └── stories │ │ ├── Button.stories.jsx │ │ └── Button.jsx ├── svelte │ ├── src │ │ ├── app.postcss │ │ ├── routes │ │ │ ├── +layout.svelte │ │ │ └── +page.svelte │ │ ├── app.d.ts │ │ └── app.html │ ├── static │ │ └── favicon.png │ ├── postcss.config.cjs │ ├── .eslintignore │ ├── vite.config.ts │ ├── .gitignore │ ├── tsconfig.json │ └── .eslintrc.cjs ├── vite-ts │ ├── src │ │ ├── index.css │ │ └── main.tsx │ ├── postcss.config.cjs │ ├── vite.config.ts │ ├── tsconfig.node.json │ ├── .gitignore │ └── index.html ├── next-js-app │ ├── .eslintrc.json │ ├── src │ │ └── app │ │ │ ├── globals.css │ │ │ ├── favicon.ico │ │ │ ├── page.tsx │ │ │ └── layout.tsx │ ├── postcss.config.cjs │ ├── next.config.js │ ├── panda.config.ts │ └── .gitignore └── next-js-pages │ ├── .eslintrc.json │ ├── src │ ├── styles │ │ └── globals.css │ └── pages │ │ ├── index.tsx │ │ ├── _document.tsx │ │ └── _app.tsx │ ├── postcss.config.cjs │ ├── next.config.js │ ├── panda.config.ts │ └── .gitignore ├── .eslintignore ├── packages ├── cli │ ├── index.ts │ ├── astro.mjs │ ├── bin.js │ ├── astro.d.ts │ ├── postcss.d.ts │ ├── src │ │ ├── presets.ts │ │ ├── cli-default.ts │ │ └── errors.ts │ ├── postcss.js │ └── tsconfig.json ├── core │ ├── index.ts │ ├── src │ │ ├── shared-hooks.ts │ │ ├── post-css-js │ │ │ └── index.ts │ │ ├── safe-parse.ts │ │ └── plugins │ │ │ └── merge-layers.ts │ ├── tsconfig.json │ └── __tests__ │ │ └── to-css.test.ts ├── node │ ├── index.ts │ ├── tsconfig.json │ └── src │ │ ├── cli-box.ts │ │ ├── parse-glob.ts │ │ └── exec-command.ts ├── config │ ├── index.ts │ ├── merge.d.ts │ ├── ts-path.d.ts │ ├── __tests__ │ │ └── samples │ │ │ ├── nested-files │ │ │ ├── src │ │ │ │ ├── index.ts │ │ │ │ └── theme │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── colors.ts │ │ │ │ │ └── tokens.ts │ │ │ ├── package.json │ │ │ └── panda.config.ts │ │ │ ├── with-tsconfig-paths │ │ │ ├── src │ │ │ │ └── theme │ │ │ │ │ └── tokens.ts │ │ │ ├── package.json │ │ │ ├── tsconfig.json │ │ │ └── panda.config.ts │ │ │ ├── cjs │ │ │ ├── package.json │ │ │ └── panda.config.cjs │ │ │ ├── cts │ │ │ ├── package.json │ │ │ └── panda.config.cts │ │ │ ├── js │ │ │ ├── package.json │ │ │ └── panda.config.js │ │ │ ├── mjs │ │ │ ├── package.json │ │ │ └── panda.config.mjs │ │ │ ├── mts │ │ │ ├── package.json │ │ │ └── panda.config.mts │ │ │ ├── common │ │ │ └── tokens.ts │ │ │ ├── ts │ │ │ ├── package.json │ │ │ └── panda.config.ts │ │ │ └── with-preset │ │ │ ├── package.json │ │ │ ├── src │ │ │ ├── semantic-tokens.ts │ │ │ ├── required-preset.ts │ │ │ └── ts-import-preset.ts │ │ │ └── panda.config.ts │ ├── tsconfig.json │ └── src │ │ ├── bundle.ts │ │ ├── index.ts │ │ └── find-config.ts ├── error │ ├── index.ts │ ├── tsconfig.json │ └── package.json ├── extractor │ ├── index.ts │ ├── tsconfig.json │ └── src │ │ ├── get-typeof-literal.ts │ │ └── jsx-spread-attribute.ts ├── fixture │ ├── index.ts │ ├── src │ │ └── index.ts │ └── tsconfig.json ├── generator │ ├── index.ts │ ├── src │ │ ├── index.ts │ │ ├── artifacts │ │ │ ├── generated │ │ │ │ └── parts.d.ts.json │ │ │ ├── qwik-jsx │ │ │ │ └── index.ts │ │ │ ├── react-jsx │ │ │ │ └── index.ts │ │ │ ├── solid-jsx │ │ │ │ └── index.ts │ │ │ ├── preact-jsx │ │ │ │ └── index.ts │ │ │ └── js │ │ │ │ └── helpers.ts │ │ └── engines │ │ │ ├── jsx.ts │ │ │ └── path.ts │ └── tsconfig.json ├── logger │ ├── index.ts │ ├── src │ │ ├── scope.ts │ │ ├── utils.ts │ │ ├── levels.ts │ │ └── index.ts │ └── tsconfig.json ├── parser │ ├── index.ts │ ├── src │ │ ├── index.ts │ │ └── project-types.ts │ └── tsconfig.json ├── shared │ ├── index.ts │ ├── src │ │ ├── compact.ts │ │ ├── condition.ts │ │ ├── typegen.ts │ │ ├── capitalize.ts │ │ ├── hypenate-property.ts │ │ ├── assert.ts │ │ ├── memo.ts │ │ ├── camelcase-property.ts │ │ ├── normalize-html.ts │ │ ├── css-important.ts │ │ ├── merge-props.ts │ │ ├── to-json.ts │ │ ├── esc.ts │ │ ├── astish.ts │ │ └── hash.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── __tests__ │ │ └── split.test.ts │ └── package.json ├── types │ ├── index.ts │ ├── src │ │ ├── parts.ts │ │ └── prop-type.ts │ ├── tsconfig.json │ └── scripts │ │ └── build.ts ├── is-valid-prop │ ├── index.ts │ └── tsconfig.json ├── studio │ ├── index.ts │ ├── src │ │ ├── env.d.ts │ │ ├── lib │ │ │ ├── truncate.tsx │ │ │ └── sizes-sort.ts │ │ ├── pages │ │ │ ├── index.astro │ │ │ ├── colors.astro │ │ │ ├── radii.astro │ │ │ ├── fonts.astro │ │ │ ├── text-styles.astro │ │ │ ├── layer-styles.astro │ │ │ ├── playground │ │ │ │ ├── contrast-checker.astro │ │ │ │ └── typography.astro │ │ │ ├── token-analyzer │ │ │ │ ├── index.astro │ │ │ │ ├── file.astro │ │ │ │ └── utility.astro │ │ │ ├── sizes.astro │ │ │ ├── spacing.astro │ │ │ ├── font-sizes.astro │ │ │ ├── font-weights.astro │ │ │ └── letter-spacings.astro │ │ ├── components │ │ │ ├── token-content.tsx │ │ │ ├── token-group.tsx │ │ │ ├── analyzer │ │ │ │ ├── external-icon.tsx │ │ │ │ └── sort-icon.tsx │ │ │ └── side-nav-item.astro │ │ ├── icons │ │ │ └── moon.tsx │ │ └── layouts │ │ │ └── Layout.astro │ ├── styled-system │ │ ├── css │ │ │ ├── index.mjs │ │ │ ├── index.d.ts │ │ │ ├── css.d.ts │ │ │ ├── cva.d.ts │ │ │ ├── cx.d.ts │ │ │ └── cx.mjs │ │ ├── static.css │ │ ├── jsx │ │ │ ├── factory.d.ts │ │ │ ├── is-valid-prop.d.ts │ │ │ ├── box.mjs │ │ │ ├── box.d.ts │ │ │ ├── flex.d.ts │ │ │ ├── grid.d.ts │ │ │ ├── link-box.mjs │ │ │ ├── wrap.d.ts │ │ │ ├── float.d.ts │ │ │ ├── stack.d.ts │ │ │ ├── container.mjs │ │ │ ├── center.d.ts │ │ │ ├── circle.d.ts │ │ │ ├── hstack.d.ts │ │ │ ├── spacer.d.ts │ │ │ ├── square.d.ts │ │ │ ├── vstack.d.ts │ │ │ ├── divider.d.ts │ │ │ ├── link-overlay.mjs │ │ │ ├── styled-link.mjs │ │ │ ├── link-box.d.ts │ │ │ ├── grid-item.d.ts │ │ │ ├── container.d.ts │ │ │ ├── styled-link.d.ts │ │ │ ├── circle.mjs │ │ │ ├── link-overlay.d.ts │ │ │ ├── spacer.mjs │ │ │ ├── square.mjs │ │ │ ├── center.mjs │ │ │ ├── aspect-ratio.d.ts │ │ │ ├── hstack.mjs │ │ │ ├── vstack.mjs │ │ │ ├── aspect-ratio.mjs │ │ │ ├── stack.mjs │ │ │ ├── divider.mjs │ │ │ ├── float.mjs │ │ │ ├── wrap.mjs │ │ │ ├── grid.mjs │ │ │ ├── flex.mjs │ │ │ └── grid-item.mjs │ │ ├── types │ │ │ ├── helpers.d.ts │ │ │ ├── parts.d.ts │ │ │ └── index.d.ts │ │ ├── chunks │ │ │ ├── src__components__token-content.css │ │ │ ├── ..__shared____tests____string-literal.test.css │ │ │ ├── src__components__color-item.css │ │ │ ├── src__components__token-group.css │ │ │ ├── src__components__analyzer__truncated-text.css │ │ │ ├── src__components__analyzer__section.css │ │ │ └── src__components__analyzer__text-with-count.css │ │ ├── tokens │ │ │ └── index.d.ts │ │ └── patterns │ │ │ ├── box.mjs │ │ │ ├── box.d.ts │ │ │ ├── link-box.d.ts │ │ │ ├── container.d.ts │ │ │ ├── circle.d.ts │ │ │ ├── square.d.ts │ │ │ ├── styled-link.d.ts │ │ │ ├── center.d.ts │ │ │ ├── link-overlay.d.ts │ │ │ ├── container.mjs │ │ │ ├── link-box.mjs │ │ │ ├── spacer.d.ts │ │ │ ├── center.mjs │ │ │ ├── hstack.d.ts │ │ │ ├── vstack.d.ts │ │ │ ├── spacer.mjs │ │ │ ├── aspect-ratio.d.ts │ │ │ ├── hstack.mjs │ │ │ ├── index.d.ts │ │ │ └── vstack.mjs │ ├── tsconfig.json │ └── astro.config.mjs ├── token-dictionary │ ├── index.ts │ ├── src │ │ └── index.ts │ ├── __tests__ │ │ └── checkbox.svg │ └── tsconfig.json ├── astro │ ├── index.ts │ ├── tsconfig.json │ └── tsup.config.ts ├── postcss │ ├── index.ts │ └── tsconfig.json ├── preset-base │ ├── index.ts │ ├── tsconfig.json │ └── src │ │ ├── utilities │ │ ├── svg.ts │ │ └── list.ts │ │ └── index.ts ├── preset-panda │ ├── index.ts │ ├── src │ │ ├── borders.ts │ │ ├── breakpoints.ts │ │ ├── index.ts │ │ └── shadows.ts │ └── tsconfig.json └── preset-atlaskit │ ├── index.ts │ ├── tsconfig.json │ └── src │ ├── breakpoints.ts │ ├── radii.ts │ └── spacing.ts ├── extension ├── shared │ ├── index.ts │ ├── src │ │ ├── index.ts │ │ └── flatten.ts │ └── tsconfig.json ├── vscode │ ├── index.ts │ ├── src │ │ └── server.ts │ ├── assets │ │ └── logo.png │ ├── tsconfig.json │ ├── .vscodeignore │ └── tsup.config.ts ├── language-server │ ├── index.ts │ ├── src │ │ ├── tokens │ │ │ ├── error.ts │ │ │ └── color2k-to-vscode-color.ts │ │ └── features │ │ │ └── index.ts │ ├── Roboto-Medium.ttf │ ├── tsconfig.json │ └── CHANGELOG.md ├── vsix-builder │ ├── src │ │ ├── index.ts │ │ ├── cli-default.ts │ │ └── vsce │ │ │ └── parse-semver.d.ts │ ├── bin.js │ ├── CHANGELOG.md │ └── tsconfig.json └── ts-plugin │ ├── index.ts │ └── tsconfig.json ├── playground ├── .eslintrc.json ├── src │ ├── styles │ │ └── globals.css │ ├── app │ │ ├── page.tsx │ │ └── [id] │ │ │ └── page.tsx │ ├── client │ │ └── prisma.ts │ ├── lib │ │ └── formatCode.ts │ └── components │ │ ├── providers.tsx │ │ └── Toolbar.tsx ├── postcss.config.js ├── public │ ├── favicon.ico │ ├── og-image.png │ ├── apple-touch-icon.png │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ └── site.webmanifest ├── prisma │ ├── migrations │ │ ├── migration_lock.toml │ │ └── 20230627150455_init │ │ │ └── migration.sql │ └── schema.prisma ├── module.shim.ts ├── .vscode │ └── settings.json ├── theme │ └── recipes │ │ └── index.ts ├── docker-compose.yml └── .gitignore ├── .github ├── assets │ └── banner.png └── ISSUE_TEMPLATE │ └── config.yml ├── pnpm-workspace.yaml ├── .changeset ├── mighty-pianos-know.md ├── shy-suns-look.md ├── purple-snakes-jump.md ├── config.json └── README.md ├── .vscode ├── settings.json ├── extensions.json ├── snippets.code-snippets └── tasks.json ├── .npmrc ├── .prettierignore ├── .prettierrc ├── tests-setup.ts ├── .gitignore └── renovate.json /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /.husky/_/.gitignore: -------------------------------------------------------------------------------- 1 | * -------------------------------------------------------------------------------- /website/src/env.d.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /sandbox/qwik-ts/public/robots.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | *.d.ts 2 | *.js 3 | *.cjs 4 | -------------------------------------------------------------------------------- /sandbox/nuxt/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true -------------------------------------------------------------------------------- /packages/cli/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src' 2 | -------------------------------------------------------------------------------- /packages/core/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src' 2 | -------------------------------------------------------------------------------- /packages/node/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src' 2 | -------------------------------------------------------------------------------- /extension/shared/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src' 2 | -------------------------------------------------------------------------------- /extension/vscode/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src' 2 | -------------------------------------------------------------------------------- /packages/config/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src' 2 | -------------------------------------------------------------------------------- /packages/error/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src' 2 | -------------------------------------------------------------------------------- /packages/extractor/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src' 2 | -------------------------------------------------------------------------------- /packages/fixture/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src' 2 | -------------------------------------------------------------------------------- /packages/generator/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src' 2 | -------------------------------------------------------------------------------- /packages/logger/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src' 2 | -------------------------------------------------------------------------------- /packages/parser/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src' 2 | -------------------------------------------------------------------------------- /packages/shared/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src' 2 | -------------------------------------------------------------------------------- /packages/types/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src' 2 | -------------------------------------------------------------------------------- /packages/is-valid-prop/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src' 2 | -------------------------------------------------------------------------------- /extension/language-server/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src' 2 | -------------------------------------------------------------------------------- /extension/shared/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './settings' 2 | -------------------------------------------------------------------------------- /packages/studio/index.ts: -------------------------------------------------------------------------------- 1 | export * from './scripts/studio' 2 | -------------------------------------------------------------------------------- /packages/token-dictionary/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src' 2 | -------------------------------------------------------------------------------- /website/src/nextra/tabs/index.ts: -------------------------------------------------------------------------------- 1 | export * from './tabs' 2 | -------------------------------------------------------------------------------- /packages/config/merge.d.ts: -------------------------------------------------------------------------------- 1 | export * from './src/merge-config.ts' 2 | -------------------------------------------------------------------------------- /website/src/nextra/button/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './button' 2 | -------------------------------------------------------------------------------- /website/src/nextra/sidebar/index.ts: -------------------------------------------------------------------------------- 1 | export * from './sidebar' 2 | -------------------------------------------------------------------------------- /website/src/nextra/treeview/index.ts: -------------------------------------------------------------------------------- 1 | export * from './treeview' 2 | -------------------------------------------------------------------------------- /extension/vscode/src/server.ts: -------------------------------------------------------------------------------- 1 | import '@pandacss/language-server' 2 | -------------------------------------------------------------------------------- /extension/vsix-builder/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './create-vsix' 2 | -------------------------------------------------------------------------------- /packages/studio/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /sandbox/astro/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /sandbox/gatsby-ts/gatsby-browser.ts: -------------------------------------------------------------------------------- 1 | import './src/styles/index.css' 2 | -------------------------------------------------------------------------------- /extension/ts-plugin/index.ts: -------------------------------------------------------------------------------- 1 | // @ts-expect-error 2 | export * from './src' 3 | -------------------------------------------------------------------------------- /playground/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /sandbox/preact-ts/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /sandbox/remix/app/index.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; -------------------------------------------------------------------------------- /sandbox/solid-ts/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | ## Panda 4 | panda 5 | -------------------------------------------------------------------------------- /website/src/nextra/icon-button/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './icon-button' 2 | -------------------------------------------------------------------------------- /packages/config/ts-path.d.ts: -------------------------------------------------------------------------------- 1 | export * from './src/resolve-ts-path-pattern.ts' 2 | -------------------------------------------------------------------------------- /sandbox/astro/src/index.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /sandbox/nuxt/assets/main.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /sandbox/preact-ts/src/index.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /sandbox/qwik-ts/src/global.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /sandbox/solid-ts/src/index.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /sandbox/storybook/index.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /sandbox/svelte/src/app.postcss: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /sandbox/vite-ts/src/index.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /packages/astro/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src' 2 | export { default } from './src' 3 | -------------------------------------------------------------------------------- /packages/cli/astro.mjs: -------------------------------------------------------------------------------- 1 | import astro from '@pandacss/astro' 2 | export default astro 3 | -------------------------------------------------------------------------------- /packages/cli/bin.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | require('./dist/cli-default.js') 4 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/nested-files/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './theme' 2 | -------------------------------------------------------------------------------- /packages/postcss/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src' 2 | export { default } from './src' 3 | -------------------------------------------------------------------------------- /playground/src/styles/globals.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /sandbox/next-js-app/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /sandbox/next-js-pages/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx lint-staged 5 | -------------------------------------------------------------------------------- /packages/preset-base/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src' 2 | export { default } from './src' 3 | -------------------------------------------------------------------------------- /packages/preset-panda/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src' 2 | export { default } from './src' 3 | -------------------------------------------------------------------------------- /sandbox/gatsby-ts/src/styles/index.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /sandbox/next-js-app/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /extension/vsix-builder/bin.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | require('./dist/cli-default.js') 4 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/nested-files/src/theme/index.ts: -------------------------------------------------------------------------------- 1 | export * from './tokens' 2 | -------------------------------------------------------------------------------- /packages/parser/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './project' 2 | export * from './parser-result' 3 | -------------------------------------------------------------------------------- /packages/preset-atlaskit/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src' 2 | export { default } from './src' 3 | -------------------------------------------------------------------------------- /sandbox/next-js-pages/src/styles/globals.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /website/pages/docs/references/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "cli": "CLI", 3 | "config": "Config" 4 | } 5 | -------------------------------------------------------------------------------- /.github/assets/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/.github/assets/banner.png -------------------------------------------------------------------------------- /packages/preset-panda/src/borders.ts: -------------------------------------------------------------------------------- 1 | export const borders = { 2 | none: { value: 'none' }, 3 | } 4 | -------------------------------------------------------------------------------- /website/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/website/public/favicon.ico -------------------------------------------------------------------------------- /packages/cli/astro.d.ts: -------------------------------------------------------------------------------- 1 | export * from '@pandacss/astro' 2 | export { default } from '@pandacss/astro' 3 | -------------------------------------------------------------------------------- /playground/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { '@pandacss/dev/postcss': {} }, 3 | } 4 | -------------------------------------------------------------------------------- /website/public/community.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/website/public/community.png -------------------------------------------------------------------------------- /website/public/og-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/website/public/og-image.png -------------------------------------------------------------------------------- /website/styles/Mona-Sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/website/styles/Mona-Sans.ttf -------------------------------------------------------------------------------- /packages/cli/postcss.d.ts: -------------------------------------------------------------------------------- 1 | export * from '@pandacss/postcss' 2 | export { default } from '@pandacss/postcss' 3 | -------------------------------------------------------------------------------- /packages/cli/src/presets.ts: -------------------------------------------------------------------------------- 1 | import presetTheme from '@pandacss/preset-panda' 2 | export default presetTheme 3 | -------------------------------------------------------------------------------- /playground/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/playground/public/favicon.ico -------------------------------------------------------------------------------- /playground/public/og-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/playground/public/og-image.png -------------------------------------------------------------------------------- /sandbox/nuxt/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/sandbox/nuxt/public/favicon.ico -------------------------------------------------------------------------------- /website/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .next 3 | ## Panda 4 | styled-system 5 | styled-system-static 6 | .next 7 | -------------------------------------------------------------------------------- /website/styles/Mona-Sans.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/website/styles/Mona-Sans.woff -------------------------------------------------------------------------------- /website/styles/Mona-Sans.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/website/styles/Mona-Sans.woff2 -------------------------------------------------------------------------------- /extension/vscode/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/extension/vscode/assets/logo.png -------------------------------------------------------------------------------- /sandbox/gatsby-ts/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require('@pandacss/dev/postcss')], 3 | } 4 | -------------------------------------------------------------------------------- /sandbox/remix/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/sandbox/remix/public/favicon.ico -------------------------------------------------------------------------------- /sandbox/storybook/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require('@pandacss/dev/postcss')], 3 | } 4 | -------------------------------------------------------------------------------- /sandbox/svelte/src/routes/+layout.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sandbox/svelte/static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/sandbox/svelte/static/favicon.png -------------------------------------------------------------------------------- /website/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/website/public/favicon-16x16.png -------------------------------------------------------------------------------- /website/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/website/public/favicon-32x32.png -------------------------------------------------------------------------------- /website/public/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/website/public/mstile-150x150.png -------------------------------------------------------------------------------- /packages/cli/postcss.js: -------------------------------------------------------------------------------- 1 | const plugin = require('@pandacss/postcss') 2 | 3 | module.exports = plugin.default ?? plugin 4 | -------------------------------------------------------------------------------- /sandbox/qwik-ts/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | '@pandacss/dev/postcss': {}, 4 | }, 5 | } -------------------------------------------------------------------------------- /sandbox/remix/remix.env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /website/public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/website/public/apple-touch-icon.png -------------------------------------------------------------------------------- /website/public/profiles/alex-s.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/website/public/profiles/alex-s.png -------------------------------------------------------------------------------- /website/public/profiles/anubra.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/website/public/profiles/anubra.png -------------------------------------------------------------------------------- /website/public/profiles/ivica-b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/website/public/profiles/ivica-b.png -------------------------------------------------------------------------------- /extension/language-server/src/tokens/error.ts: -------------------------------------------------------------------------------- 1 | export const onError = (...args: any[]) => { 2 | console.error(args) 3 | } 4 | -------------------------------------------------------------------------------- /packages/core/src/shared-hooks.ts: -------------------------------------------------------------------------------- 1 | import { createHooks } from 'hookable' 2 | 3 | export const sharedHooks = createHooks() 4 | -------------------------------------------------------------------------------- /packages/fixture/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './config' 2 | export * from './recipes' 3 | export * from './semantic-tokens' 4 | -------------------------------------------------------------------------------- /playground/public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/playground/public/apple-touch-icon.png -------------------------------------------------------------------------------- /sandbox/gatsby-ts/src/images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/sandbox/gatsby-ts/src/images/icon.png -------------------------------------------------------------------------------- /sandbox/next-js-app/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | '@pandacss/dev/postcss': {}, 4 | }, 5 | } -------------------------------------------------------------------------------- /sandbox/next-js-pages/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | '@pandacss/dev/postcss': {}, 4 | }, 5 | } -------------------------------------------------------------------------------- /sandbox/preact-ts/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | '@pandacss/dev/postcss': {}, 4 | }, 5 | } 6 | -------------------------------------------------------------------------------- /sandbox/solid-ts/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | '@pandacss/dev/postcss': {}, 4 | }, 5 | } 6 | -------------------------------------------------------------------------------- /website/pages/docs/migration/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "stitches": "Stitches", 3 | "styled-components": "Styled Components" 4 | } 5 | -------------------------------------------------------------------------------- /packages/generator/src/index.ts: -------------------------------------------------------------------------------- 1 | import * as messages from './messages' 2 | export * from './generator' 3 | export { messages } 4 | -------------------------------------------------------------------------------- /packages/studio/styled-system/css/index.mjs: -------------------------------------------------------------------------------- 1 | export * from './css.mjs' 2 | export * from './cx.mjs' 3 | export * from './cva.mjs' 4 | -------------------------------------------------------------------------------- /packages/token-dictionary/src/index.ts: -------------------------------------------------------------------------------- 1 | export { TokenDictionary } from './create-dictionary' 2 | export { Token } from './token' 3 | -------------------------------------------------------------------------------- /packages/types/src/parts.ts: -------------------------------------------------------------------------------- 1 | export type Part = { 2 | selector: string 3 | } 4 | 5 | export type Parts = Record 6 | -------------------------------------------------------------------------------- /sandbox/next-js-app/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/sandbox/next-js-app/src/app/favicon.ico -------------------------------------------------------------------------------- /sandbox/solid-ts/src/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/sandbox/solid-ts/src/assets/favicon.ico -------------------------------------------------------------------------------- /website/public/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/website/public/android-chrome-192x192.png -------------------------------------------------------------------------------- /website/public/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/website/public/android-chrome-512x512.png -------------------------------------------------------------------------------- /website/public/videos/patterns-as-jsx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/website/public/videos/patterns-as-jsx.png -------------------------------------------------------------------------------- /website/public/videos/using-recipes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/website/public/videos/using-recipes.png -------------------------------------------------------------------------------- /website/public/videos/what-is-panda.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/website/public/videos/what-is-panda.png -------------------------------------------------------------------------------- /extension/language-server/Roboto-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/extension/language-server/Roboto-Medium.ttf -------------------------------------------------------------------------------- /packages/studio/styled-system/static.css: -------------------------------------------------------------------------------- 1 | @layer utilities { 2 | .text_red\.400 { 3 | color: var(--colors-red-400); 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'packages/**' 3 | - 'sandbox/*' 4 | - 'playground' 5 | - 'website' 6 | - 'extension/**' 7 | -------------------------------------------------------------------------------- /sandbox/nuxt/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://nuxt.com/docs/guide/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json" 4 | } 5 | -------------------------------------------------------------------------------- /website/public/stately-presets-merging.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/website/public/stately-presets-merging.png -------------------------------------------------------------------------------- /packages/studio/styled-system/css/index.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | export * from './css' 3 | export * from './cx' 4 | export * from './cva' -------------------------------------------------------------------------------- /playground/public/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/playground/public/android-chrome-192x192.png -------------------------------------------------------------------------------- /playground/public/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/playground/public/android-chrome-512x512.png -------------------------------------------------------------------------------- /sandbox/nuxt/app.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /website/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "arrowParens": "avoid" 6 | } 7 | -------------------------------------------------------------------------------- /website/public/videos/building-with-panda.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/website/public/videos/building-with-panda.png -------------------------------------------------------------------------------- /website/public/videos/center-circle-square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/website/public/videos/center-circle-square.png -------------------------------------------------------------------------------- /website/public/videos/container-grid-wrap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/website/public/videos/container-grid-wrap.png -------------------------------------------------------------------------------- /website/public/videos/stack-hstack-vstack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/website/public/videos/stack-hstack-vstack.png -------------------------------------------------------------------------------- /packages/config/__tests__/samples/nested-files/src/theme/colors.ts: -------------------------------------------------------------------------------- 1 | export const colors = { 2 | 'another-color': { value: '#76e3ea' }, 3 | } 4 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/factory.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import { Panda } from '../types/jsx' 3 | export declare const panda: Panda -------------------------------------------------------------------------------- /sandbox/gatsby-ts/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "env": { 4 | "node": true, 5 | "browser": true 6 | }, 7 | "rules": {} 8 | } 9 | -------------------------------------------------------------------------------- /sandbox/gatsby-ts/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .cache/ 3 | public 4 | src/gatsby-types.d.ts 5 | ## Panda 6 | styled-system 7 | styled-system-static -------------------------------------------------------------------------------- /website/pages/docs/overview/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "getting-started": "Getting Started", 3 | "why-panda": "Why Panda?", 4 | "faq": "FAQs" 5 | } 6 | -------------------------------------------------------------------------------- /website/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {}, 4 | "@pandacss/dev/postcss": {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /website/public/videos/installation-and-setup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/website/public/videos/installation-and-setup.png -------------------------------------------------------------------------------- /packages/studio/styled-system/types/helpers.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | export type Pretty = T extends infer U ? { [K in keyof U]: U[K] } : never -------------------------------------------------------------------------------- /sandbox/remix/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {}, 4 | '@pandacss/dev/postcss': {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /sandbox/svelte/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | '@pandacss/dev/postcss': {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /sandbox/vite-ts/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | '@pandacss/dev/postcss': {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /website/public/videos/converting-recipes-to-jsx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/website/public/videos/converting-recipes-to-jsx.png -------------------------------------------------------------------------------- /website/public/videos/introduction-to-patterns.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/website/public/videos/introduction-to-patterns.png -------------------------------------------------------------------------------- /website/public/videos/introduction-to-recipes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BuilderIO/panda/main/website/public/videos/introduction-to-recipes.png -------------------------------------------------------------------------------- /playground/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import { Playground } from '../components/Playground' 2 | 3 | const Page = () => 4 | 5 | export default Page 6 | -------------------------------------------------------------------------------- /.changeset/mighty-pianos-know.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@pandacss/config': patch 3 | --- 4 | 5 | Fix module resolution issue when using panda from a browser environment 6 | -------------------------------------------------------------------------------- /extension/vsix-builder/src/cli-default.ts: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | import { main } from './cli-main' 3 | 4 | main().catch((err) => { 5 | console.error(err) 6 | }) 7 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/is-valid-prop.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | declare const isCssProperty: (value: string) => boolean; 3 | 4 | export { isCssProperty }; -------------------------------------------------------------------------------- /packages/cli/src/cli-default.ts: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | import { handleError } from './errors' 3 | import { main } from './cli-main' 4 | 5 | main().catch(handleError) 6 | -------------------------------------------------------------------------------- /packages/generator/src/artifacts/generated/parts.d.ts.json: -------------------------------------------------------------------------------- 1 | { 2 | "content": "export type Part = {\n selector: string\n}\n\nexport type Parts = Record\n" 3 | } -------------------------------------------------------------------------------- /packages/studio/styled-system/types/parts.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | export type Part = { 3 | selector: string 4 | } 5 | 6 | export type Parts = Record 7 | -------------------------------------------------------------------------------- /playground/prisma/migrations/migration_lock.toml: -------------------------------------------------------------------------------- 1 | # Please do not edit this file manually 2 | # It should be added in your version-control system (i.e. Git) 3 | provider = "mysql" -------------------------------------------------------------------------------- /website/pages/docs/theming/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "tokens": "Tokens", 3 | "usage": "Token Usage", 4 | "text-styles": "Text Styles", 5 | "layer-styles": "Layer Styles" 6 | } 7 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib", 3 | "eslint.workingDirectories": ["./packages/**", "./sandbox/**", "./sandbox/next-js"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/with-tsconfig-paths/src/theme/tokens.ts: -------------------------------------------------------------------------------- 1 | export const themeTokens = { 2 | colors: { 3 | 'some-color': { value: '#2f81f7' }, 4 | }, 5 | } 6 | -------------------------------------------------------------------------------- /packages/preset-panda/src/breakpoints.ts: -------------------------------------------------------------------------------- 1 | export const breakpoints = { 2 | sm: '640px', 3 | md: '768px', 4 | lg: '1024px', 5 | xl: '1280px', 6 | '2xl': '1536px', 7 | } 8 | -------------------------------------------------------------------------------- /packages/studio/styled-system/css/css.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { SystemStyleObject } from '../types' 3 | export declare function css(styles: SystemStyleObject): string -------------------------------------------------------------------------------- /playground/module.shim.ts: -------------------------------------------------------------------------------- 1 | // Empty implementation for Rollup alias 2 | // eslint-disable-next-line @typescript-eslint/no-empty-function 3 | export const createRequire = () => {}; 4 | -------------------------------------------------------------------------------- /sandbox/astro/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "astro/tsconfigs/base", 3 | "compilerOptions": { 4 | "jsx": "preserve", 5 | "jsxImportSource": "solid-js" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /sandbox/nuxt/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log* 3 | .nuxt 4 | .nitro 5 | .cache 6 | .output 7 | .env 8 | dist 9 | ## Panda 10 | styled-system 11 | styled-system-static 12 | -------------------------------------------------------------------------------- /.changeset/shy-suns-look.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@pandacss/generator': patch 3 | --- 4 | 5 | Fix issue where generated package json does not respect `outExtension` when `emitPackage` is `true` 6 | -------------------------------------------------------------------------------- /packages/studio/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "astro/tsconfigs/strict", 3 | "include": ["src", "index.ts"], 4 | "compilerOptions": { 5 | "jsx": "react-jsx" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /playground/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "../node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/lib", 3 | "typescript.enablePromptUseWorkspaceTsdk": true 4 | } -------------------------------------------------------------------------------- /sandbox/remix/.eslintrc.js: -------------------------------------------------------------------------------- 1 | /** @type {import('eslint').Linter.Config} */ 2 | module.exports = { 3 | extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"], 4 | }; 5 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/nested-files/src/theme/tokens.ts: -------------------------------------------------------------------------------- 1 | import { colors } from './colors' 2 | 3 | export const themeTokens = { 4 | colors: { 5 | ...colors, 6 | }, 7 | } 8 | -------------------------------------------------------------------------------- /packages/core/src/post-css-js/index.ts: -------------------------------------------------------------------------------- 1 | import { objectify } from './objectify' 2 | import { parser } from './parse' 3 | 4 | export const postCssJs = { 5 | parser, 6 | objectify, 7 | } 8 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/cjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "panda-config-test-cjs", 3 | "private": true, 4 | "devDependencies": { 5 | "@pandacss/dev": "workspace:^" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/cts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "panda-config-test-cts", 3 | "private": true, 4 | "devDependencies": { 5 | "@pandacss/dev": "workspace:^" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/js/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "panda-config-test-js", 3 | "private": true, 4 | "devDependencies": { 5 | "@pandacss/dev": "workspace:^" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/mjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "panda-config-test-mjs", 3 | "private": true, 4 | "devDependencies": { 5 | "@pandacss/dev": "workspace:^" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/mts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "panda-config-test-mts", 3 | "private": true, 4 | "devDependencies": { 5 | "@pandacss/dev": "workspace:^" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /sandbox/preact-ts/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { render } from 'preact' 2 | import { App } from './app' 3 | import './index.css' 4 | 5 | render(, document.getElementById('app') as HTMLElement) 6 | -------------------------------------------------------------------------------- /packages/logger/src/scope.ts: -------------------------------------------------------------------------------- 1 | export const createLogScope = (scope: string) => { 2 | const fn = (subScope: string) => `${scope}/${subScope}` 3 | fn.toString = () => scope 4 | return fn 5 | } 6 | -------------------------------------------------------------------------------- /playground/theme/recipes/index.ts: -------------------------------------------------------------------------------- 1 | import { splitter } from './splitter' 2 | import { segmentGroup } from './segment-group' 3 | 4 | export const recipes = { 5 | splitter, 6 | segmentGroup, 7 | } 8 | -------------------------------------------------------------------------------- /sandbox/next-js-app/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | swcMinify: true, 5 | } 6 | 7 | module.exports = nextConfig 8 | -------------------------------------------------------------------------------- /sandbox/next-js-pages/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | swcMinify: true, 5 | } 6 | 7 | module.exports = nextConfig 8 | -------------------------------------------------------------------------------- /website/pages/docs/customization/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "patterns": "Patterns", 3 | "conditions": "Conditions", 4 | "utilities": "Utilities", 5 | "presets": "Presets", 6 | "theme": "Theme" 7 | } 8 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | ignore-workspace-root-check=true 2 | shamefully-hoist=true 3 | strict-peer-dependencies=false 4 | auto-install-peers=true 5 | # 6 | link-workspace-packages=true 7 | prefer-workspace-packages=true 8 | -------------------------------------------------------------------------------- /packages/generator/src/artifacts/qwik-jsx/index.ts: -------------------------------------------------------------------------------- 1 | export { generateQwikJsxFactory } from './jsx' 2 | export { generateQwikJsxPattern } from './pattern' 3 | export { generateQwikJsxTypes } from './types' 4 | -------------------------------------------------------------------------------- /website/src/nextra/lib/index.ts: -------------------------------------------------------------------------------- 1 | export { getGitIssueUrl } from './get-git-issue-url' 2 | export { renderComponent, renderString } from './render' 3 | export { useGitEditUrl } from './use-git-edit-url' 4 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // See http://go.microsoft.com/fwlink/?LinkId=827846 3 | // for the documentation about the extensions.json format 4 | "recommendations": ["dbaeumer.vscode-eslint"] 5 | } 6 | -------------------------------------------------------------------------------- /extension/language-server/src/features/index.ts: -------------------------------------------------------------------------------- 1 | export * from './color-hints' 2 | export * from './completion' 3 | export * from './inlay-hints' 4 | export * from './hover' 5 | export * from './diagnostics' 6 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/common/tokens.ts: -------------------------------------------------------------------------------- 1 | export const tokens = { 2 | fontSizes: { 3 | 'some-size': { value: 'clamp(.75rem, 1.5vw, 1rem)' }, 4 | '100xl': { value: '220px' }, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "panda-config-test-with-tsconfig-paths", 3 | "private": true, 4 | "devDependencies": { 5 | "@pandacss/dev": "workspace:^" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/with-tsconfig-paths/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "panda-config-test-ts", 3 | "private": true, 4 | "devDependencies": { 5 | "@pandacss/dev": "workspace:^" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/generator/src/artifacts/react-jsx/index.ts: -------------------------------------------------------------------------------- 1 | export { generateReactJsxFactory } from './jsx' 2 | export { generateReactJsxPattern } from './pattern' 3 | export { generateReactJsxTypes } from './types' 4 | -------------------------------------------------------------------------------- /packages/generator/src/artifacts/solid-jsx/index.ts: -------------------------------------------------------------------------------- 1 | export { generateSolidJsxFactory } from './jsx' 2 | export { generateSolidJsxPattern } from './pattern' 3 | export { generateSolidJsxTypes } from './types' 4 | -------------------------------------------------------------------------------- /packages/studio/src/lib/truncate.tsx: -------------------------------------------------------------------------------- 1 | export const truncate = (str: string, length = 15) => { 2 | if (str.length > length) { 3 | return str.substring(0, length) + '...' 4 | } 5 | 6 | return str 7 | } 8 | -------------------------------------------------------------------------------- /sandbox/astro/panda.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@pandacss/dev' 2 | 3 | export default defineConfig({ 4 | preflight: true, 5 | include: ['./src/**/*.{astro,tsx}'], 6 | outdir: 'panda', 7 | }) 8 | -------------------------------------------------------------------------------- /extension/shared/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src", "index.ts"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /extension/vscode/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src", "index.ts"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/astro/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src", "index.ts"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/nested-files/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "panda-config-test-nested-files", 3 | "private": true, 4 | "devDependencies": { 5 | "@pandacss/dev": "workspace:^" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/with-preset/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "panda-config-test-nested-files", 3 | "private": true, 4 | "devDependencies": { 5 | "@pandacss/dev": "workspace:^" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/config/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src", "index.ts"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/core/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src", "index.ts"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/error/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src", "index.ts"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/fixture/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src", "index.ts"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/generator/src/artifacts/preact-jsx/index.ts: -------------------------------------------------------------------------------- 1 | export { generatePreactJsxFactory } from './jsx' 2 | export { generatePreactJsxPattern } from './pattern' 3 | export { generatePreactJsxTypes } from './types' 4 | -------------------------------------------------------------------------------- /packages/logger/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src", "index.ts"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/node/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src", "index.ts"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/parser/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src", "index.ts"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/postcss/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src", "index.ts"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/shared/src/compact.ts: -------------------------------------------------------------------------------- 1 | export function compact>(value: T) { 2 | return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value]) => value !== undefined)) as T 3 | } 4 | -------------------------------------------------------------------------------- /packages/shared/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src", "index.ts"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/shared/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | 3 | export default defineConfig({ 4 | entry: ['src/index.ts', 'src/shared.ts'], 5 | splitting: false, 6 | format: ['esm', 'cjs'], 7 | }) 8 | -------------------------------------------------------------------------------- /packages/types/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src", "index.ts"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /website/src/components/providers.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { ThemeProvider } from 'next-themes' 4 | 5 | export function Providers({ children }) { 6 | return {children} 7 | } 8 | -------------------------------------------------------------------------------- /packages/generator/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src", "index.ts"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/is-valid-prop/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src", "index.ts"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/preset-base/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src", "index.ts"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/preset-panda/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src", "index.ts"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/shared/src/condition.ts: -------------------------------------------------------------------------------- 1 | export const isBaseCondition = (v: string) => v === 'base' 2 | 3 | export function filterBaseConditions(c: string[]) { 4 | return c.slice().filter((v) => !isBaseCondition(v)) 5 | } 6 | -------------------------------------------------------------------------------- /packages/studio/src/pages/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Overview } from '../components/overview' 3 | import Layout from '../layouts/Layout.astro' 4 | --- 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /sandbox/vite-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /extension/language-server/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src", "index.ts"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /extension/vsix-builder/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @pandacss/vsix-builder 2 | 3 | ## 0.7.0 4 | 5 | ## 0.6.0 6 | 7 | ## 0.5.1 8 | 9 | ## 0.5.0 10 | 11 | ## 0.4.0 12 | 13 | ## 0.3.2 14 | 15 | ## 0.3.1 16 | 17 | ## 0.3.0 18 | -------------------------------------------------------------------------------- /packages/preset-atlaskit/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src", "index.ts"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/shared/src/typegen.ts: -------------------------------------------------------------------------------- 1 | export function unionType(values: IterableIterator | string[] | Set) { 2 | return Array.from(values) 3 | .map((value) => JSON.stringify(value)) 4 | .join(' | ') 5 | } 6 | -------------------------------------------------------------------------------- /packages/token-dictionary/__tests__/checkbox.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /sandbox/preact-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import preact from '@preact/preset-vite' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [preact()], 7 | }) 8 | -------------------------------------------------------------------------------- /sandbox/remix/server.js: -------------------------------------------------------------------------------- 1 | import { createRequestHandler } from "@remix-run/vercel"; 2 | import * as build from "@remix-run/dev/server-build"; 3 | 4 | export default createRequestHandler({ build, mode: process.env.NODE_ENV }); 5 | -------------------------------------------------------------------------------- /website/pages/docs/utilities/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "background": "Background", 3 | "typography": "Typography", 4 | "border": "Border", 5 | "display": "Display", 6 | "sizing": "Sizing", 7 | "layout": "Layout" 8 | } 9 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | coverage 4 | .next 5 | build 6 | *.hbs 7 | *.d.ts 8 | packages/cli/app/styled-system 9 | packages/generator/src/artifacts/generated 10 | website/pages/**/*.mdx 11 | .draft/**/*.mdx 12 | -------------------------------------------------------------------------------- /sandbox/solid-ts/src/index.tsx: -------------------------------------------------------------------------------- 1 | /* @refresh reload */ 2 | import './index.css' 3 | import { render } from 'solid-js/web' 4 | 5 | import App from './App' 6 | 7 | render(() => , document.getElementById('root') as HTMLElement) 8 | -------------------------------------------------------------------------------- /website/README.md: -------------------------------------------------------------------------------- 1 | # Nextra Example 2 | 3 | An Nextra example that contains: 4 | - SASS 5 | - Global styles 6 | - CSS Modules 7 | - Custom theme 8 | - Custom MDX component provider 9 | - I18n with default locale prefixed 10 | -------------------------------------------------------------------------------- /extension/vscode/.vscodeignore: -------------------------------------------------------------------------------- 1 | .vscode/** 2 | .vscode-test/** 3 | src/** 4 | .gitignore 5 | .yarnrc 6 | vsc-extension-quickstart.md 7 | **/tsconfig.json 8 | **/.eslintrc.json 9 | **/*.map 10 | **/*.ts 11 | node_modules 12 | .env 13 | -------------------------------------------------------------------------------- /sandbox/solid-ts/panda.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@pandacss/dev' 2 | 3 | export default defineConfig({ 4 | include: ['src/**/*.tsx'], 5 | outdir: 'panda', 6 | jsxFramework: 'solid', 7 | jsxFactory: 'panda', 8 | }) 9 | -------------------------------------------------------------------------------- /sandbox/storybook/panda.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@pandacss/dev' 2 | 3 | export default defineConfig({ 4 | preflight: true, 5 | include: ['./stories/**/*.jsx'], 6 | exclude: [], 7 | outdir: 'styled-system', 8 | }) 9 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "printWidth": 120, 4 | "bracketSpacing": true, 5 | "jsxSingleQuote": false, 6 | "proseWrap": "always", 7 | "semi": false, 8 | "tabWidth": 2, 9 | "trailingComma": "all" 10 | } 11 | -------------------------------------------------------------------------------- /packages/studio/styled-system/css/cva.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { RecipeCreatorFn } from '../types/recipe' 3 | 4 | export declare const cva: RecipeCreatorFn 5 | 6 | export type { RecipeVariantProps } from '../types/recipe' 7 | -------------------------------------------------------------------------------- /packages/studio/styled-system/css/cx.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | type Argument = string | boolean | null | undefined 3 | 4 | /** Conditionally join classNames into a single string */ 5 | export declare function cx(...args: Argument[]): string -------------------------------------------------------------------------------- /packages/studio/styled-system/types/index.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import './global' 3 | export type { ConditionalValue } from './conditions' 4 | export type { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types' 5 | -------------------------------------------------------------------------------- /sandbox/next-js-app/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import { css } from '../../styled-system/css'; 2 | 3 | export default function Home() { 4 | return ( 5 |
Hello 🐼!
6 | ) 7 | } 8 | -------------------------------------------------------------------------------- /extension/vsix-builder/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src", "index.ts", "../vscode/scripts/index.ts"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/with-tsconfig-paths/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "panda.config.ts"], 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "paths": { 6 | "@/*": ["./src/*"] 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/token-dictionary/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src", "index.ts", "__tests__/alias.test.ts"], 4 | "compilerOptions": { 5 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /sandbox/next-js-pages/src/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import { css } from '../../styled-system/css'; 2 | 3 | export default function Home() { 4 | return ( 5 |
Hello 🐼!
6 | ) 7 | } 8 | -------------------------------------------------------------------------------- /sandbox/svelte/.eslintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | 10 | # Ignore files for PNPM, NPM and YARN 11 | pnpm-lock.yaml 12 | package-lock.json 13 | yarn.lock 14 | -------------------------------------------------------------------------------- /packages/astro/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | 3 | export default defineConfig({ 4 | entry: ['./src/index.ts'], 5 | format: ['esm'], 6 | splitting: false, 7 | clean: true, 8 | external: ['@pandacss/dev/postcss'], 9 | }) 10 | -------------------------------------------------------------------------------- /packages/core/src/safe-parse.ts: -------------------------------------------------------------------------------- 1 | import postcss from 'postcss' 2 | 3 | export function safeParse(str: Parameters[0]) { 4 | try { 5 | return postcss.parse(str) 6 | } catch (error) { 7 | return postcss.root() 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /sandbox/nuxt/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | // https://nuxt.com/docs/api/configuration/nuxt-config 2 | export default defineNuxtConfig({ 3 | telemetry: false, 4 | postcss: { 5 | plugins: { '@pandacss/dev/postcss': {} }, 6 | }, 7 | css: ['~/assets/main.css'], 8 | }) 9 | -------------------------------------------------------------------------------- /sandbox/preact-ts/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /sandbox/vite-ts/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /website/src/nextra/sidebar/sidebar-header.tsx: -------------------------------------------------------------------------------- 1 | import { panda } from '@/styled-system/jsx' 2 | 3 | export const SidebarHeader = panda('div', { 4 | base: { 5 | px: 4, 6 | pt: 4, 7 | md: { 8 | display: 'none' 9 | } 10 | } 11 | }) 12 | -------------------------------------------------------------------------------- /tests-setup.ts: -------------------------------------------------------------------------------- 1 | import { Node } from 'ts-morph' 2 | import { expect } from 'vitest' 3 | 4 | expect.addSnapshotSerializer({ 5 | serialize(value) { 6 | return value.getKindName() 7 | }, 8 | test(val) { 9 | return Node.isNode(val) 10 | }, 11 | }) 12 | -------------------------------------------------------------------------------- /packages/studio/src/components/token-content.tsx: -------------------------------------------------------------------------------- 1 | import { type HTMLPandaProps, panda } from '../../styled-system/jsx' 2 | 3 | export function TokenContent(props: HTMLPandaProps<'div'>) { 4 | return 5 | } 6 | -------------------------------------------------------------------------------- /.vscode/snippets.code-snippets: -------------------------------------------------------------------------------- 1 | { 2 | "Changelog": { 3 | "scope": "markdown", 4 | "prefix": "clog", 5 | "body": ["## [$1]", "", "", "### Fixed", "", "", "### Added", "", "$2", "### Changed", "", "$3"], 6 | "description": "Add a changelog entry" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/studio/styled-system/chunks/src__components__token-content.css: -------------------------------------------------------------------------------- 1 | @layer utilities { 2 | .d_flex { 3 | display: flex; 4 | } 5 | 6 | .flex_column { 7 | flex-direction: column; 8 | } 9 | 10 | .gap_12 { 11 | gap: var(--spacing-12); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/preset-atlaskit/src/breakpoints.ts: -------------------------------------------------------------------------------- 1 | import type { Theme } from '@pandacss/types' 2 | 3 | export const breakpoints: Theme['breakpoints'] = { 4 | sm: '30rem', 5 | md: '48rem', 6 | lg: '64rem', 7 | xl: '80rem', 8 | '2xl': '110rem', 9 | '3xl': '135rem', 10 | } 11 | -------------------------------------------------------------------------------- /packages/studio/styled-system/tokens/index.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { Token } from './tokens' 3 | 4 | export declare const token: { 5 | (path: Token, fallback?: string): string 6 | var: (path: Token, fallback?: string) => string 7 | } 8 | 9 | export * from './tokens' -------------------------------------------------------------------------------- /website/pages/docs/guides/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "component-library": "Component Library", 3 | "multiple-themes": "Multiple Themes", 4 | "fonts": "Custom Fonts", 5 | "dynamic-styling": "Dynamic Styles", 6 | "static": "Static Generator", 7 | "virtual-color": "Virtual Color" 8 | } 9 | -------------------------------------------------------------------------------- /extension/vsix-builder/src/vsce/parse-semver.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'parse-semver' { 2 | interface Result { 3 | readonly name: string; 4 | readonly version: string; 5 | } 6 | module parseSemver {} 7 | function parseSemver(input: string): Result; 8 | export = parseSemver; 9 | } 10 | -------------------------------------------------------------------------------- /sandbox/astro/astro.config.mjs: -------------------------------------------------------------------------------- 1 | import solidJs from '@astrojs/solid-js' 2 | import { defineConfig } from 'astro/config' 3 | import pandacss from '@pandacss/dev/astro' 4 | 5 | // https://astro.build/config 6 | export default defineConfig({ 7 | integrations: [solidJs(), pandacss()], 8 | }) 9 | -------------------------------------------------------------------------------- /sandbox/svelte/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite' 2 | import { defineConfig } from 'vite' 3 | 4 | export default defineConfig({ 5 | plugins: [sveltekit()], 6 | server: { 7 | fs: { 8 | allow: ['styled-system'], 9 | }, 10 | }, 11 | }) 12 | -------------------------------------------------------------------------------- /extension/ts-plugin/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src", "index.ts"], 4 | "compilerOptions": { 5 | "module": "CommonJS", 6 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo", 7 | "verbatimModuleSyntax": false 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/extractor/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src", "index.ts"], 4 | "exclude": ["node_modules", "./__tests__/npm-bench", "./__tests__/samples"], 5 | "compilerOptions": { 6 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /website/src/mdx/text.tsx: -------------------------------------------------------------------------------- 1 | import { css } from '@/styled-system/css' 2 | 3 | const styles = css({ 4 | mt: { base: '6', _first: '0' }, 5 | lineHeight: '1.75rem' 6 | }) 7 | 8 | export const Text = (props: React.ComponentProps<'p'>) => ( 9 |

10 | ) 11 | -------------------------------------------------------------------------------- /website/src/nextra/sidebar/sidebar-placeholder.tsx: -------------------------------------------------------------------------------- 1 | import { panda } from '@/styled-system/jsx' 2 | 3 | export const SidebarPlaceholder = panda('div', { 4 | base: { 5 | h: 0, 6 | w: 64, 7 | flexShrink: 0, 8 | xl: { 9 | display: 'none' 10 | } 11 | } 12 | }) 13 | -------------------------------------------------------------------------------- /sandbox/preact-ts/panda.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@pandacss/dev' 2 | 3 | export default defineConfig({ 4 | preflight: true, 5 | include: ['./src/**/*.{tsx,jsx}', './pages/**/*.{jsx,tsx}'], 6 | exclude: [], 7 | outdir: 'styled-system', 8 | jsxFramework: 'preact', 9 | }) 10 | -------------------------------------------------------------------------------- /sandbox/solid-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import solidPlugin from 'vite-plugin-solid' 3 | 4 | export default defineConfig({ 5 | plugins: [solidPlugin()], 6 | server: { 7 | port: 3000, 8 | }, 9 | build: { 10 | target: 'esnext', 11 | }, 12 | }) 13 | -------------------------------------------------------------------------------- /website/src/nextra/contexts/index.ts: -------------------------------------------------------------------------------- 1 | export { 2 | useActiveAnchor, 3 | useSetActiveAnchor, 4 | ActiveAnchorProvider 5 | } from './active-anchor' 6 | export { useConfig, ConfigProvider } from './config' 7 | export { useDetails, DetailsProvider } from './details' 8 | export { useMenu } from './menu' 9 | -------------------------------------------------------------------------------- /extension/language-server/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @pandacss/language-server 2 | 3 | ## 0.7.0 4 | 5 | ## 0.6.0 6 | 7 | ## 0.5.1 8 | 9 | ## 0.5.0 10 | 11 | ## 0.4.0 12 | 13 | ## 0.3.2 14 | 15 | ## 0.3.1 16 | 17 | ## 0.3.0 18 | 19 | ### Patch Changes 20 | 21 | - 02f4daf7: Publish extension packages 22 | -------------------------------------------------------------------------------- /sandbox/nuxt/panda.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@pandacss/dev' 2 | 3 | export default defineConfig({ 4 | preflight: true, 5 | include: ['./pages/**/*.{vue,ts,tsx}', './components/**/*.{vue,ts,tsx}'], 6 | exclude: [], 7 | outdir: 'styled-system', 8 | jsxFramework: 'vue', 9 | }) 10 | -------------------------------------------------------------------------------- /sandbox/vite-ts/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')!).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /website/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | 5 | // NOTE: This file should not be edited 6 | // see https://nextjs.org/docs/basic-features/typescript for more information. 7 | -------------------------------------------------------------------------------- /packages/preset-base/src/utilities/svg.ts: -------------------------------------------------------------------------------- 1 | import type { UtilityConfig } from '@pandacss/types' 2 | 3 | export const svg: UtilityConfig = { 4 | fill: { 5 | className: 'fill', 6 | values: 'colors', 7 | }, 8 | stroke: { 9 | className: 'stroke', 10 | values: 'colors', 11 | }, 12 | } 13 | -------------------------------------------------------------------------------- /.changeset/purple-snakes-jump.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@pandacss/preset-base': patch 3 | '@pandacss/generator': patch 4 | '@pandacss/config': patch 5 | '@pandacss/parser': patch 6 | '@pandacss/studio': patch 7 | '@pandacss/types': patch 8 | '@pandacss/node': patch 9 | --- 10 | 11 | Fix parser issue with TS path mappings 12 | -------------------------------------------------------------------------------- /extension/vscode/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | 3 | export default defineConfig({ 4 | entry: ['src/index.ts', 'src/server.ts'], 5 | format: ['cjs'], 6 | external: ['vscode', 'esbuild'], 7 | minify: true, 8 | outDir: 'dist', 9 | clean: true, 10 | shims: true, 11 | }) 12 | -------------------------------------------------------------------------------- /sandbox/storybook/.storybook/preview.js: -------------------------------------------------------------------------------- 1 | import '../index.css' 2 | 3 | export const parameters = { 4 | actions: { argTypesRegex: '^on[A-Z].*' }, 5 | layout: 'fullscreen', 6 | controls: { 7 | matchers: { 8 | color: /(background|color)$/i, 9 | date: /Date$/, 10 | }, 11 | }, 12 | } 13 | -------------------------------------------------------------------------------- /website/app/learn/page.tsx: -------------------------------------------------------------------------------- 1 | import { SectionLearn } from '@/components/sections/learn' 2 | import { SectionVideos } from '@/components/sections/learn-video' 3 | 4 | export default function Page() { 5 | return ( 6 | <> 7 | 8 | 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /packages/studio/src/pages/colors.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Colors } from '../components/colors' 3 | import Layout from '../layouts/Layout.astro' 4 | import Sidebar from '../layouts/Sidebar.astro' 5 | --- 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /website/public/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /packages/studio/src/pages/radii.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Radii } from '../components/radii' 3 | import Layout from '../layouts/Layout.astro' 4 | import Sidebar from '../layouts/Sidebar.astro' 5 | --- 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /packages/studio/src/pages/fonts.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from '../layouts/Layout.astro' 3 | import Sidebar from '../layouts/Sidebar.astro' 4 | import { FontFamily } from '../components/font-family' 5 | --- 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /sandbox/svelte/src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface Platform {} 9 | } 10 | } 11 | 12 | export {} 13 | -------------------------------------------------------------------------------- /website/theme/layer-styles.ts: -------------------------------------------------------------------------------- 1 | import { defineLayerStyles } from '@pandacss/dev' 2 | 3 | export const layerStyles = defineLayerStyles({ 4 | offShadow: { 5 | value: { 6 | border: '3px solid var(--shadow-color, black)', 7 | boxShadow: '4px 4px 0px 0px var(--shadow-color, black)' 8 | } 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /packages/studio/src/components/token-group.tsx: -------------------------------------------------------------------------------- 1 | import type { HTMLPandaProps } from '../../styled-system/jsx' 2 | import { panda } from '../../styled-system/jsx' 3 | 4 | export function TokenGroup(props: HTMLPandaProps<'div'>) { 5 | return 6 | } 7 | -------------------------------------------------------------------------------- /sandbox/next-js-pages/src/pages/_document.tsx: -------------------------------------------------------------------------------- 1 | import { Html, Head, Main, NextScript } from 'next/document' 2 | 3 | export default function Document() { 4 | return ( 5 | 6 | 7 | 8 |

9 | 10 | 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /sandbox/qwik-ts/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/web-manifest-combined.json", 3 | "name": "qwik-project-name", 4 | "short_name": "Welcome to Qwik", 5 | "start_url": ".", 6 | "display": "standalone", 7 | "background_color": "#fff", 8 | "description": "A Qwik project app." 9 | } 10 | -------------------------------------------------------------------------------- /website/pages/docs/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "overview": "Overview", 3 | "installation": "Installation", 4 | "concepts": "Concepts", 5 | "migration": "Migration", 6 | "theming": "Theming", 7 | "customization": "Customization", 8 | "utilities": "Utilities", 9 | "guides": "Guides", 10 | "references": "References" 11 | } 12 | -------------------------------------------------------------------------------- /website/pages/docs/concepts/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "cascade-layers": "Cascade Layers", 3 | "writing-styles": "Writing Styles", 4 | "conditional-styles": "Conditional Styles", 5 | "responsive-design": "Responsive Design", 6 | "patterns": "Patterns", 7 | "recipes": "Recipes", 8 | "style-props": "JSX Style Props" 9 | } 10 | -------------------------------------------------------------------------------- /packages/shared/src/capitalize.ts: -------------------------------------------------------------------------------- 1 | export const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1) 2 | 3 | const camelCaseRegex = /([a-z])([A-Z])/g 4 | export const dashCase = (s: string) => s.replace(camelCaseRegex, '$1-$2').toLowerCase() 5 | export const uncapitalize = (s: string) => s.charAt(0).toLowerCase() + s.slice(1) 6 | -------------------------------------------------------------------------------- /packages/studio/styled-system/css/cx.mjs: -------------------------------------------------------------------------------- 1 | function cx() { 2 | let str = '', 3 | i = 0, 4 | arg 5 | 6 | for (; i < arguments.length; ) { 7 | if ((arg = arguments[i++]) && typeof arg === 'string') { 8 | str && (str += ' ') 9 | str += arg 10 | } 11 | } 12 | return str 13 | } 14 | 15 | export { cx } 16 | -------------------------------------------------------------------------------- /packages/logger/src/utils.ts: -------------------------------------------------------------------------------- 1 | import { logLevels } from './levels' 2 | 3 | export type Config = { 4 | level?: LogLevel 5 | filter?: string 6 | isDebug?: boolean 7 | } 8 | 9 | export type LogLevel = keyof typeof logLevels 10 | 11 | export type Entry = { 12 | level: LogLevel | null 13 | msg: string 14 | } & Record 15 | -------------------------------------------------------------------------------- /packages/studio/src/pages/text-styles.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { TextStyles } from '../components/text-styles' 3 | import Layout from '../layouts/Layout.astro' 4 | import Sidebar from '../layouts/Sidebar.astro' 5 | --- 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /playground/src/client/prisma.ts: -------------------------------------------------------------------------------- 1 | import { PrismaClient } from '@prisma/client' 2 | 3 | declare global { 4 | // eslint-disable-next-line no-var 5 | var prisma: PrismaClient | undefined 6 | } 7 | 8 | export const prisma = global.prisma || new PrismaClient() 9 | 10 | if (process.env.NODE_ENV !== 'production') global.prisma = prisma 11 | -------------------------------------------------------------------------------- /sandbox/gatsby-ts/gatsby-config.ts: -------------------------------------------------------------------------------- 1 | import type { GatsbyConfig } from 'gatsby' 2 | 3 | const config: GatsbyConfig = { 4 | siteMetadata: { 5 | title: 'My Gatsby Site', 6 | siteUrl: 'https://www.yourdomain.tld', 7 | }, 8 | graphqlTypegen: true, 9 | plugins: ['gatsby-plugin-postcss'], 10 | } 11 | 12 | export default config 13 | -------------------------------------------------------------------------------- /website/src/mdx/divider.tsx: -------------------------------------------------------------------------------- 1 | import { css } from '@/styled-system/css' 2 | 3 | const styles = css({ 4 | my: '8', 5 | h: '1px', 6 | bg: { base: 'rgb(229 229 229 / 0.7)', _dark: 'rgb(219 234 254 / 0.1)' } 7 | }) 8 | 9 | export const Divider = (props: React.ComponentProps<'hr'>) => ( 10 |
11 | ) 12 | -------------------------------------------------------------------------------- /packages/logger/src/levels.ts: -------------------------------------------------------------------------------- 1 | import colors from 'kleur' 2 | 3 | export const logLevels = { 4 | debug: { weight: 0, color: colors.magenta }, 5 | info: { weight: 1, color: colors.blue }, 6 | warn: { weight: 2, color: colors.yellow }, 7 | error: { weight: 3, color: colors.red }, 8 | silent: { weight: 4, color: colors.white }, 9 | } 10 | -------------------------------------------------------------------------------- /packages/preset-atlaskit/src/radii.ts: -------------------------------------------------------------------------------- 1 | import type { Tokens } from '@pandacss/types' 2 | 3 | export const radii: Tokens['radii'] = { 4 | '050': { value: '0.125rem' }, 5 | '100': { value: '0.25rem' }, 6 | '200': { value: '0.5rem' }, 7 | '300': { value: '0.75rem' }, 8 | '400': { value: '1rem' }, 9 | round: { value: '50%' }, 10 | } 11 | -------------------------------------------------------------------------------- /packages/studio/src/pages/layer-styles.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { LayerStyles } from '../components/layer-styles' 3 | import Layout from '../layouts/Layout.astro' 4 | import Sidebar from '../layouts/Sidebar.astro' 5 | --- 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /website/src/nextra/treeview/treeview-context.tsx: -------------------------------------------------------------------------------- 1 | import { createContext } from "react" 2 | 3 | export const FocusedItemContext = createContext(null) 4 | 5 | export const OnFocusedItemContext = createContext< 6 | null | ((item: string | null) => any) 7 | >(null) 8 | 9 | export const FolderLevelContext = createContext(0) 10 | -------------------------------------------------------------------------------- /extension/shared/src/flatten.ts: -------------------------------------------------------------------------------- 1 | import { walkObject } from '@pandacss/shared' 2 | 3 | type Dict = Record 4 | 5 | export function flatten(values: Record) { 6 | const result: Dict = {} 7 | 8 | walkObject(values, (token, paths) => { 9 | result[paths.join('.')] = token 10 | }) 11 | 12 | return result 13 | } 14 | -------------------------------------------------------------------------------- /packages/shared/src/hypenate-property.ts: -------------------------------------------------------------------------------- 1 | import { memo } from './memo' 2 | 3 | const wordRegex = /([A-Z])/g 4 | const msRegex = /^ms-/ 5 | 6 | export const hypenateProperty = memo((property: string) => { 7 | if (property.startsWith('--')) return property 8 | return property.replace(wordRegex, '-$1').replace(msRegex, '-ms-').toLowerCase() 9 | }) 10 | -------------------------------------------------------------------------------- /sandbox/nuxt/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import CompositionApiDemo from '../components/CompositionApiDemo.vue' 2 | import SetupDemo from '../components/SetupDemo.vue' 3 | 4 | export default defineComponent(() => { 5 | return () => ( 6 | <> 7 |
Hello World
8 | 9 | 10 | 11 | ) 12 | }) 13 | -------------------------------------------------------------------------------- /sandbox/storybook/stories/Button.stories.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { css } from '../styled-system/css' 3 | import { Button } from './Button' 4 | 5 | export default { 6 | title: 'Button', 7 | } 8 | 9 | export const Simple = () => ( 10 |
11 | 12 |
13 | ) 14 | -------------------------------------------------------------------------------- /website/src/nextra/contexts/details.ts: -------------------------------------------------------------------------------- 1 | import type { Dispatch, SetStateAction } from 'react' 2 | import { createContext, useContext } from 'react' 3 | 4 | const DetailsContext = createContext>>(v => v) 5 | 6 | export const useDetails = () => useContext(DetailsContext) 7 | 8 | export const DetailsProvider = DetailsContext.Provider 9 | -------------------------------------------------------------------------------- /packages/node/src/cli-box.ts: -------------------------------------------------------------------------------- 1 | import boxen from 'boxen' 2 | 3 | export const createBox = (options: { content: string; title?: string }) => 4 | boxen(options.content, { 5 | padding: { left: 3, right: 3, top: 1, bottom: 1 }, 6 | borderColor: 'magenta', 7 | borderStyle: 'round', 8 | title: options.title, 9 | titleAlignment: 'center', 10 | }) 11 | -------------------------------------------------------------------------------- /packages/preset-base/src/utilities/list.ts: -------------------------------------------------------------------------------- 1 | import type { UtilityConfig } from '@pandacss/types' 2 | 3 | export const list: UtilityConfig = { 4 | listStyleType: { 5 | className: 'list', 6 | }, 7 | listStylePosition: { 8 | className: 'list', 9 | }, 10 | listStyleImage: { 11 | className: 'list-img', 12 | values: 'assets', 13 | }, 14 | } 15 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/box.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | import { panda } from './factory.mjs' 3 | import { getBoxStyle } from '../patterns/box.mjs' 4 | 5 | export const Box = forwardRef(function Box(props, ref) { 6 | const styleProps = getBoxStyle() 7 | return createElement(panda.div, { ref, ...styleProps, ...props }) 8 | }) 9 | -------------------------------------------------------------------------------- /packages/studio/src/pages/playground/contrast-checker.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { ColorContrastChecker } from '../../components/color-constrast' 3 | import Layout from '../../layouts/Layout.astro' 4 | import Sidebar from '../../layouts/Sidebar.astro' 5 | --- 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /packages/studio/src/pages/playground/typography.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { TypographyPlayground } from '../../components/typography-playground' 3 | import Layout from '../../layouts/Layout.astro' 4 | import Sidebar from '../../layouts/Sidebar.astro' 5 | --- 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /packages/studio/src/pages/token-analyzer/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { TokenAnalyzer } from '../../components/token-analyzer' 3 | import Layout from '../../layouts/Layout.astro' 4 | import Sidebar from '../../layouts/Sidebar.astro' 5 | --- 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /playground/prisma/migrations/20230627150455_init/migration.sql: -------------------------------------------------------------------------------- 1 | -- CreateTable 2 | CREATE TABLE `Session` ( 3 | `id` VARCHAR(191) NOT NULL, 4 | `code` TEXT NOT NULL, 5 | `config` TEXT NOT NULL, 6 | `createdAt` DATETIME(3) NOT NULL DEFAULT CURRENT_TIMESTAMP(3), 7 | 8 | PRIMARY KEY (`id`) 9 | ) DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; 10 | -------------------------------------------------------------------------------- /packages/studio/src/lib/sizes-sort.ts: -------------------------------------------------------------------------------- 1 | import { toPx } from '@pandacss/shared' 2 | 3 | const num = (v: string | undefined) => parseFloat(toPx(v) ?? '-1') 4 | 5 | export function getSortedSizes(sizes: any[]) { 6 | return sizes.sort((a, b) => { 7 | if (!a.originalValue || !b.originalValue) return 0 8 | return num(a.originalValue) - num(b.originalValue) 9 | }) 10 | } 11 | -------------------------------------------------------------------------------- /packages/studio/src/pages/token-analyzer/file.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { FileDetails } from '../../components/analyzer/file-details' 3 | import Layout from '../../layouts/Layout.astro' 4 | import Sidebar from '../../layouts/Sidebar.astro' 5 | --- 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/box.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { FunctionComponent } from 'react' 3 | import type { BoxProperties } from '../patterns/box' 4 | import type { HTMLPandaProps } from '../types/jsx' 5 | 6 | export type BoxProps = BoxProperties & Omit, keyof BoxProperties > 7 | 8 | 9 | export declare const Box: FunctionComponent -------------------------------------------------------------------------------- /playground/prisma/schema.prisma: -------------------------------------------------------------------------------- 1 | generator client { 2 | provider = "prisma-client-js" 3 | } 4 | 5 | datasource db { 6 | provider = "mysql" 7 | url = env("DATABASE_URL") 8 | } 9 | 10 | model Session { 11 | id String @id @default(cuid()) 12 | code String @db.Text 13 | config String @db.Text 14 | createdAt DateTime @default(now()) 15 | } 16 | -------------------------------------------------------------------------------- /playground/src/lib/formatCode.ts: -------------------------------------------------------------------------------- 1 | import { format } from 'prettier' 2 | import postcss from 'prettier/parser-postcss' 3 | 4 | export function formatCode(code: string) { 5 | return format(code, { 6 | parser: 'css', 7 | singleQuote: true, 8 | trailingComma: 'all', 9 | arrowParens: 'always', 10 | semi: false, 11 | plugins: [postcss], 12 | }) 13 | } 14 | -------------------------------------------------------------------------------- /website/src/icons/vue.tsx: -------------------------------------------------------------------------------- 1 | export const VueLogo = () => ( 2 | 3 | 7 | 11 | 12 | ) 13 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: Ask a question 4 | url: https://github.com/chakra-ui/panda/discussions 5 | about: Ask questions and discuss topics with other community members 6 | - name: Chat with other community members 7 | url: https://discord.gg/VQrkpsgSx7 8 | about: The official Panda CSS Discord community 9 | -------------------------------------------------------------------------------- /packages/studio/styled-system/chunks/..__shared____tests____string-literal.test.css: -------------------------------------------------------------------------------- 1 | @layer utilities { 2 | .font_12px\/1\.5_Helvetica\,_Arial\,_sans-serif { 3 | font: 12px/1.5 Helvetica, Arial, sans-serif; 4 | } 5 | 6 | .text_red { 7 | color: red; 8 | } 9 | 10 | .\[\&\:hover\]\:text_blue { 11 | &:hover { 12 | color: blue; 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/studio/styled-system/chunks/src__components__color-item.css: -------------------------------------------------------------------------------- 1 | @layer utilities { 2 | .w_auto { 3 | width: auto; 4 | } 5 | 6 | .min-w_80px { 7 | min-width: 80px; 8 | } 9 | 10 | .h_40px { 11 | height: 40px; 12 | } 13 | 14 | .mb_2 { 15 | margin-bottom: var(--spacing-2); 16 | } 17 | 18 | .opacity_0\.7 { 19 | opacity: 0.7; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /playground/src/components/providers.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { ThemeProvider } from 'next-themes' 4 | import { PropsWithChildren } from 'react' 5 | 6 | export function Providers({ children }: PropsWithChildren) { 7 | return ( 8 | 9 | {children} 10 | 11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /packages/config/src/bundle.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from '@pandacss/types' 2 | import { bundleNRequire } from 'bundle-n-require' 3 | 4 | export async function bundle(filepath: string, cwd: string) { 5 | const { mod: config, dependencies } = await bundleNRequire(filepath, { cwd, interopDefault: true }) 6 | return { config: (config?.default ?? config) as T, dependencies } 7 | } 8 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/flex.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { FunctionComponent } from 'react' 3 | import type { FlexProperties } from '../patterns/flex' 4 | import type { HTMLPandaProps } from '../types/jsx' 5 | 6 | export type FlexProps = FlexProperties & Omit, keyof FlexProperties > 7 | 8 | 9 | export declare const Flex: FunctionComponent -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/grid.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { FunctionComponent } from 'react' 3 | import type { GridProperties } from '../patterns/grid' 4 | import type { HTMLPandaProps } from '../types/jsx' 5 | 6 | export type GridProps = GridProperties & Omit, keyof GridProperties > 7 | 8 | 9 | export declare const Grid: FunctionComponent -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/link-box.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | import { panda } from './factory.mjs' 3 | import { getLinkBoxStyle } from '../patterns/link-box.mjs' 4 | 5 | export const LinkBox = forwardRef(function LinkBox(props, ref) { 6 | const styleProps = getLinkBoxStyle() 7 | return createElement(panda.div, { ref, ...styleProps, ...props }) 8 | }) 9 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/wrap.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { FunctionComponent } from 'react' 3 | import type { WrapProperties } from '../patterns/wrap' 4 | import type { HTMLPandaProps } from '../types/jsx' 5 | 6 | export type WrapProps = WrapProperties & Omit, keyof WrapProperties > 7 | 8 | 9 | export declare const Wrap: FunctionComponent -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@2.1.1/schema.json", 3 | "changelog": "@changesets/cli/changelog", 4 | "commit": false, 5 | "fixed": [["@pandacss/**"]], 6 | "linked": [], 7 | "access": "restricted", 8 | "baseBranch": "main", 9 | "updateInternalDependencies": "patch", 10 | "ignore": ["sandbox-*", "playground", "website"] 11 | } 12 | -------------------------------------------------------------------------------- /packages/shared/src/assert.ts: -------------------------------------------------------------------------------- 1 | export const isString = (v: any): v is string => typeof v === 'string' 2 | 3 | type AnyFunction = (...args: any[]) => any 4 | export const isFunction = (v: any): v is AnyFunction => typeof v === 'function' 5 | 6 | export function isObject(value: any): value is Record { 7 | return typeof value === 'object' && value != null && !Array.isArray(value) 8 | } 9 | -------------------------------------------------------------------------------- /packages/studio/src/pages/token-analyzer/utility.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { UtilityDetails } from '../../components/analyzer/utility-details' 3 | import Layout from '../../layouts/Layout.astro' 4 | import Sidebar from '../../layouts/Sidebar.astro' 5 | --- 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/float.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { FunctionComponent } from 'react' 3 | import type { FloatProperties } from '../patterns/float' 4 | import type { HTMLPandaProps } from '../types/jsx' 5 | 6 | export type FloatProps = FloatProperties & Omit, keyof FloatProperties > 7 | 8 | 9 | export declare const Float: FunctionComponent -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/stack.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { FunctionComponent } from 'react' 3 | import type { StackProperties } from '../patterns/stack' 4 | import type { HTMLPandaProps } from '../types/jsx' 5 | 6 | export type StackProps = StackProperties & Omit, keyof StackProperties > 7 | 8 | 9 | export declare const Stack: FunctionComponent -------------------------------------------------------------------------------- /packages/studio/styled-system/patterns/box.mjs: -------------------------------------------------------------------------------- 1 | import { mapObject } from '../helpers.mjs' 2 | import { css } from '../css/index.mjs' 3 | 4 | const boxConfig = { 5 | transform(props) { 6 | return props 7 | }, 8 | } 9 | 10 | export const getBoxStyle = (styles = {}) => boxConfig.transform(styles, { map: mapObject }) 11 | 12 | export const box = (styles) => css(getBoxStyle(styles)) 13 | -------------------------------------------------------------------------------- /sandbox/svelte/src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |

using class binding css

8 |
15 | It works in Svelte, using inline styles 16 |
17 | -------------------------------------------------------------------------------- /website/src/types.ts: -------------------------------------------------------------------------------- 1 | import type { ReactNode } from 'react' 2 | import type { PageOpts } from 'nextra' 3 | import type { DocsThemeConfig } from './constants' 4 | 5 | export type Context = { 6 | pageOpts: PageOpts 7 | themeConfig: DocsThemeConfig 8 | } 9 | 10 | export type SearchResult = { 11 | children: ReactNode 12 | id: string 13 | prefix?: ReactNode 14 | route: string 15 | } 16 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/container.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | import { panda } from './factory.mjs' 3 | import { getContainerStyle } from '../patterns/container.mjs' 4 | 5 | export const Container = forwardRef(function Container(props, ref) { 6 | const styleProps = getContainerStyle() 7 | return createElement(panda.div, { ref, ...styleProps, ...props }) 8 | }) 9 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/center.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { FunctionComponent } from 'react' 3 | import type { CenterProperties } from '../patterns/center' 4 | import type { HTMLPandaProps } from '../types/jsx' 5 | 6 | export type CenterProps = CenterProperties & Omit, keyof CenterProperties > 7 | 8 | 9 | export declare const Center: FunctionComponent -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/circle.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { FunctionComponent } from 'react' 3 | import type { CircleProperties } from '../patterns/circle' 4 | import type { HTMLPandaProps } from '../types/jsx' 5 | 6 | export type CircleProps = CircleProperties & Omit, keyof CircleProperties > 7 | 8 | 9 | export declare const Circle: FunctionComponent -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/hstack.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { FunctionComponent } from 'react' 3 | import type { HstackProperties } from '../patterns/hstack' 4 | import type { HTMLPandaProps } from '../types/jsx' 5 | 6 | export type HstackProps = HstackProperties & Omit, keyof HstackProperties > 7 | 8 | 9 | export declare const HStack: FunctionComponent -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/spacer.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { FunctionComponent } from 'react' 3 | import type { SpacerProperties } from '../patterns/spacer' 4 | import type { HTMLPandaProps } from '../types/jsx' 5 | 6 | export type SpacerProps = SpacerProperties & Omit, keyof SpacerProperties > 7 | 8 | 9 | export declare const Spacer: FunctionComponent -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/square.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { FunctionComponent } from 'react' 3 | import type { SquareProperties } from '../patterns/square' 4 | import type { HTMLPandaProps } from '../types/jsx' 5 | 6 | export type SquareProps = SquareProperties & Omit, keyof SquareProperties > 7 | 8 | 9 | export declare const Square: FunctionComponent -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/vstack.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { FunctionComponent } from 'react' 3 | import type { VstackProperties } from '../patterns/vstack' 4 | import type { HTMLPandaProps } from '../types/jsx' 5 | 6 | export type VstackProps = VstackProperties & Omit, keyof VstackProperties > 7 | 8 | 9 | export declare const VStack: FunctionComponent -------------------------------------------------------------------------------- /playground/src/components/Toolbar.tsx: -------------------------------------------------------------------------------- 1 | import { HStack } from '@/styled-system/jsx' 2 | import { PropsWithChildren } from 'react' 3 | import { Logo } from './Logo' 4 | 5 | export const Toolbar = (props: PropsWithChildren) => ( 6 | 7 | 8 | {props.children} 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /website/src/components/code-highlight/code.ts: -------------------------------------------------------------------------------- 1 | import { css } from '@/styled-system/css' 2 | import { Code } from 'bright' 3 | import gruvBoxTheme from './gruvbox-theme.cjs' 4 | 5 | Code.theme = gruvBoxTheme 6 | 7 | export { Code } 8 | 9 | export const codeStyle = css({ 10 | padding: '4', 11 | fontFamily: 'mono', 12 | fontSize: 'md', 13 | lineHeight: '1.7', 14 | fontWeight: '500' 15 | }) 16 | -------------------------------------------------------------------------------- /packages/config/src/index.ts: -------------------------------------------------------------------------------- 1 | export { findConfigFile } from './find-config' 2 | export { getConfigDependencies, type GetDepsOptions } from './get-mod-deps' 3 | export { getResolvedConfig } from './get-resolved-config' 4 | export { bundleConfigFile, loadConfigFile, resolveConfigFile } from './load-config' 5 | export { mergeConfigs } from './merge-config' 6 | export { convertTsPathsToRegexes } from './ts-config-paths' 7 | -------------------------------------------------------------------------------- /packages/shared/src/memo.ts: -------------------------------------------------------------------------------- 1 | export const memo = any>(fn: T): T => { 2 | const cache = new Map() 3 | const get = (...args: any[]) => { 4 | const key = JSON.stringify(args) 5 | if (cache.has(key)) { 6 | return cache.get(key) 7 | } 8 | const result = fn(...args) 9 | cache.set(key, result) 10 | return result 11 | } 12 | return get as T 13 | } 14 | -------------------------------------------------------------------------------- /packages/studio/styled-system/chunks/src__components__token-group.css: -------------------------------------------------------------------------------- 1 | @layer utilities { 2 | .d_flex { 3 | display: flex; 4 | } 5 | 6 | .flex_column { 7 | flex-direction: column; 8 | } 9 | 10 | .gap_3 { 11 | gap: var(--spacing-3); 12 | } 13 | 14 | .w_full { 15 | width: var(--sizes-full); 16 | } 17 | 18 | .mt_5 { 19 | margin-top: var(--spacing-5); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/divider.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { FunctionComponent } from 'react' 3 | import type { DividerProperties } from '../patterns/divider' 4 | import type { HTMLPandaProps } from '../types/jsx' 5 | 6 | export type DividerProps = DividerProperties & Omit, keyof DividerProperties > 7 | 8 | 9 | export declare const Divider: FunctionComponent -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/link-overlay.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | import { panda } from './factory.mjs' 3 | import { getLinkOverlayStyle } from '../patterns/link-overlay.mjs' 4 | 5 | export const LinkOverlay = forwardRef(function LinkOverlay(props, ref) { 6 | const styleProps = getLinkOverlayStyle() 7 | return createElement(panda.a, { ref, ...styleProps, ...props }) 8 | }) 9 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/styled-link.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | import { panda } from './factory.mjs' 3 | import { getStyledLinkStyle } from '../patterns/styled-link.mjs' 4 | 5 | export const StyledLink = forwardRef(function StyledLink(props, ref) { 6 | const styleProps = getStyledLinkStyle() 7 | return createElement(panda.div, { ref, ...styleProps, ...props }) 8 | }) 9 | -------------------------------------------------------------------------------- /packages/core/__tests__/to-css.test.ts: -------------------------------------------------------------------------------- 1 | import { describe, expect, test } from 'vitest' 2 | import { toCss } from '../src/to-css' 3 | 4 | describe('to-css', () => { 5 | test('should convert', () => { 6 | expect(toCss({ whiteSpace: 'nowrap' }).css).toMatchInlineSnapshot('"white-space: nowrap"') 7 | expect(toCss({ '--welcome-x': '20' }).css).toMatchInlineSnapshot('"--welcome-x: 20"') 8 | }) 9 | }) 10 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/link-box.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { FunctionComponent } from 'react' 3 | import type { LinkBoxProperties } from '../patterns/link-box' 4 | import type { HTMLPandaProps } from '../types/jsx' 5 | 6 | export type LinkBoxProps = LinkBoxProperties & Omit, keyof LinkBoxProperties > 7 | 8 | 9 | export declare const LinkBox: FunctionComponent -------------------------------------------------------------------------------- /website/src/icons/word-wrap.tsx: -------------------------------------------------------------------------------- 1 | export function WordWrapIcon(props: React.ComponentProps<'svg'>) { 2 | return ( 3 | 4 | 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /packages/cli/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src", "index.ts", "app"], 4 | "exclude": ["node_modules"], 5 | "compilerOptions": { 6 | "jsx": "react-jsx", 7 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo", 8 | "paths": { 9 | "virtual:panda": ["./virtual-panda.d.ts"], 10 | "~react-pages": ["./react-pages.d.ts"] 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/grid-item.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { FunctionComponent } from 'react' 3 | import type { GridItemProperties } from '../patterns/grid-item' 4 | import type { HTMLPandaProps } from '../types/jsx' 5 | 6 | export type GridItemProps = GridItemProperties & Omit, keyof GridItemProperties > 7 | 8 | 9 | export declare const GridItem: FunctionComponent -------------------------------------------------------------------------------- /sandbox/svelte/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 |
%sveltekit.body%
11 | 12 | 13 | -------------------------------------------------------------------------------- /website/src/nextra/lib/use-git-edit-url.ts: -------------------------------------------------------------------------------- 1 | import { useConfig } from '../contexts' 2 | import gitUrlParse from 'git-url-parse' 3 | 4 | export function useGitEditUrl(filePath = ''): string { 5 | const config = useConfig() 6 | const repo = gitUrlParse(config.docsRepositoryBase || '') 7 | 8 | if (!repo) throw new Error('Invalid `docsRepositoryBase` URL!') 9 | 10 | return `${repo.href}/${filePath}` 11 | } 12 | -------------------------------------------------------------------------------- /packages/studio/styled-system/chunks/src__components__analyzer__truncated-text.css: -------------------------------------------------------------------------------- 1 | @layer utilities { 2 | .p_2 { 3 | padding: var(--spacing-2); 4 | } 5 | 6 | .bg_card { 7 | background-color: var(--colors-card); 8 | } 9 | 10 | .border_1px_solid_rgba\(0\,_0\,_0\,_0\.1\) { 11 | border: 1px solid rgba(0, 0, 0, 0.1); 12 | } 13 | 14 | .text_text { 15 | color: var(--colors-text); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /playground/docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '3.3' 2 | 3 | services: 4 | db: 5 | container_name: panda-mysql 6 | image: mariadb:10.8.2-focal 7 | restart: always 8 | ports: 9 | - 3310:3306 10 | environment: 11 | MARIADB_ROOT_PASSWORD: root 12 | MARIADB_DATABASE: panda 13 | volumes: 14 | - panda-mysql:/var/lib/mysql 15 | 16 | volumes: 17 | panda-mysql: 18 | driver: local 19 | -------------------------------------------------------------------------------- /sandbox/next-js-pages/src/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '@/styles/globals.css' 2 | import type { AppProps } from 'next/app' 3 | import { Inter } from 'next/font/google' 4 | 5 | const inter = Inter({ subsets: ['latin'] }) 6 | 7 | export default function App({ Component, pageProps }: AppProps) { 8 | return ( 9 |
10 | 11 |
12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /packages/preset-base/src/index.ts: -------------------------------------------------------------------------------- 1 | import type { Preset } from '@pandacss/types' 2 | 3 | import { conditions } from './conditions' 4 | import { utilities } from './utilities' 5 | import { patterns } from './patterns' 6 | 7 | const definePreset = (preset: T) => preset 8 | 9 | export const preset = definePreset({ 10 | conditions, 11 | utilities, 12 | patterns, 13 | }) 14 | 15 | export default preset 16 | -------------------------------------------------------------------------------- /packages/studio/astro.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'astro/config' 2 | import react from '@astrojs/react' 3 | import virtualPanda from './virtual-panda.mjs' 4 | 5 | // https://astro.build/config 6 | export default defineConfig({ 7 | outDir: process.env.ASTRO_OUT_DIR, 8 | integrations: [react(), virtualPanda()], 9 | vite: { 10 | ssr: { 11 | noExternal: ['@ark-ui/react'], 12 | }, 13 | }, 14 | }) 15 | -------------------------------------------------------------------------------- /packages/studio/src/components/analyzer/external-icon.tsx: -------------------------------------------------------------------------------- 1 | /** @see https://iconmonstr.com/share-11-svg/ */ 2 | export const ExternalIcon = () => { 3 | return ( 4 | 5 | 6 | 7 | ) 8 | } 9 | -------------------------------------------------------------------------------- /packages/studio/src/pages/sizes.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Sizes } from '../components/sizes' 3 | import Layout from '../layouts/Layout.astro' 4 | import Sidebar from '../layouts/Sidebar.astro' 5 | import context from '../lib/panda.context' 6 | 7 | const tokens = context.getCategory('sizes') 8 | --- 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/container.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { FunctionComponent } from 'react' 3 | import type { ContainerProperties } from '../patterns/container' 4 | import type { HTMLPandaProps } from '../types/jsx' 5 | 6 | export type ContainerProps = ContainerProperties & Omit, keyof ContainerProperties > 7 | 8 | 9 | export declare const Container: FunctionComponent -------------------------------------------------------------------------------- /sandbox/vite-ts/.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 | 26 | ## Panda 27 | styled-system 28 | -------------------------------------------------------------------------------- /website/src/nextra/contexts/menu.ts: -------------------------------------------------------------------------------- 1 | import { createContext, useContext } from 'react' 2 | 3 | interface Menu { 4 | menu: boolean 5 | setMenu: React.Dispatch> 6 | } 7 | 8 | const MenuContext = createContext({ 9 | menu: false, 10 | setMenu: () => false 11 | }) 12 | 13 | export const useMenu = () => useContext(MenuContext) 14 | 15 | export const MenuProvider = MenuContext.Provider 16 | -------------------------------------------------------------------------------- /sandbox/solid-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "strict": true, 4 | "target": "ESNext", 5 | "module": "ESNext", 6 | "moduleResolution": "node", 7 | "allowSyntheticDefaultImports": true, 8 | "esModuleInterop": true, 9 | "jsx": "preserve", 10 | "jsxImportSource": "solid-js", 11 | "types": ["vite/client"], 12 | "noEmit": true, 13 | "isolatedModules": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /website/pages/docs/installation/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "cli": "CLI", 3 | "postcss": "PostCSS", 4 | "astro": "Astro", 5 | "nextjs": "Next.js", 6 | "remix": "Remix", 7 | "gatsby": "Gatsby", 8 | "redwood": "Redwood", 9 | "qwik": "Qwik", 10 | "vite": "Vite", 11 | "vue": "Vue", 12 | "nuxt": "Nuxt", 13 | "preact": "Preact", 14 | "solidjs": "Solid.js", 15 | "svelte": "Svelte", 16 | "storybook": "Storybook" 17 | } 18 | -------------------------------------------------------------------------------- /packages/shared/__tests__/split.test.ts: -------------------------------------------------------------------------------- 1 | import { describe, expect, test } from 'vitest' 2 | import { splitDotPath } from '../src' 3 | 4 | describe('split', () => { 5 | test('color path', () => { 6 | expect(splitDotPath('colors.red.300')).toEqual(['colors', 'red', '300']) 7 | expect(splitDotPath('spacing.0.5')).toEqual(['spacing', '0.5']) 8 | expect(splitDotPath('spacing..5')).toEqual(['spacing', '.5']) 9 | }) 10 | }) 11 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/styled-link.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { FunctionComponent } from 'react' 3 | import type { StyledLinkProperties } from '../patterns/styled-link' 4 | import type { HTMLPandaProps } from '../types/jsx' 5 | 6 | export type StyledLinkProps = StyledLinkProperties & Omit, keyof StyledLinkProperties > 7 | 8 | 9 | export declare const StyledLink: FunctionComponent -------------------------------------------------------------------------------- /website/pages/docs/migration/styled-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Migrating from Styled Components 3 | description: Migrate your project from Styled Components to Panda. 4 | --- 5 | 6 | # Migrating from Styled Components 7 | 8 | This guide outlines the steps needed to migrate your project from Styled Components to Panda, and some design differences between the two libraries. 9 | 10 | > TODO: Help us improve this guide by contributing 11 | -------------------------------------------------------------------------------- /website/src/icons/index.ts: -------------------------------------------------------------------------------- 1 | export * from './arrow-right' 2 | export * from './check' 3 | export * from './copy' 4 | export * from './discord' 5 | export * from './expand' 6 | export * from './github' 7 | export * from './globe' 8 | export * from './information-circle' 9 | export * from './menu' 10 | export * from './moon' 11 | export * from './spinner' 12 | export * from './sun' 13 | export * from './word-wrap' 14 | export * from './x' 15 | -------------------------------------------------------------------------------- /packages/studio/src/pages/spacing.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Sizes } from '../components/sizes' 3 | import Layout from '../layouts/Layout.astro' 4 | import Sidebar from '../layouts/Sidebar.astro' 5 | import context from '../lib/panda.context' 6 | 7 | const tokens = context.getCategory('spacing') 8 | --- 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/circle.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | import { panda } from './factory.mjs' 3 | import { getCircleStyle } from '../patterns/circle.mjs' 4 | 5 | export const Circle = forwardRef(function Circle(props, ref) { 6 | const { size, ...restProps } = props 7 | const styleProps = getCircleStyle({ size }) 8 | return createElement(panda.div, { ref, ...styleProps, ...restProps }) 9 | }) 10 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/link-overlay.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { FunctionComponent } from 'react' 3 | import type { LinkOverlayProperties } from '../patterns/link-overlay' 4 | import type { HTMLPandaProps } from '../types/jsx' 5 | 6 | export type LinkOverlayProps = LinkOverlayProperties & Omit, keyof LinkOverlayProperties > 7 | 8 | 9 | export declare const LinkOverlay: FunctionComponent -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/spacer.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | import { panda } from './factory.mjs' 3 | import { getSpacerStyle } from '../patterns/spacer.mjs' 4 | 5 | export const Spacer = forwardRef(function Spacer(props, ref) { 6 | const { size, ...restProps } = props 7 | const styleProps = getSpacerStyle({ size }) 8 | return createElement(panda.div, { ref, ...styleProps, ...restProps }) 9 | }) 10 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/square.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | import { panda } from './factory.mjs' 3 | import { getSquareStyle } from '../patterns/square.mjs' 4 | 5 | export const Square = forwardRef(function Square(props, ref) { 6 | const { size, ...restProps } = props 7 | const styleProps = getSquareStyle({ size }) 8 | return createElement(panda.div, { ref, ...styleProps, ...restProps }) 9 | }) 10 | -------------------------------------------------------------------------------- /sandbox/vite-ts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /website/src/resize-polyfill.ts: -------------------------------------------------------------------------------- 1 | import { IS_BROWSER } from './constants' 2 | 3 | if (IS_BROWSER) { 4 | let resizeTimer: any 5 | 6 | const addResizingClass = () => { 7 | document.body.classList.add('resizing') 8 | clearTimeout(resizeTimer) 9 | resizeTimer = setTimeout(() => { 10 | document.body.classList.remove('resizing') 11 | }, 200) 12 | } 13 | 14 | window.addEventListener('resize', addResizingClass) 15 | } 16 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/center.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | import { panda } from './factory.mjs' 3 | import { getCenterStyle } from '../patterns/center.mjs' 4 | 5 | export const Center = forwardRef(function Center(props, ref) { 6 | const { inline, ...restProps } = props 7 | const styleProps = getCenterStyle({ inline }) 8 | return createElement(panda.div, { ref, ...styleProps, ...restProps }) 9 | }) 10 | -------------------------------------------------------------------------------- /sandbox/preact-ts/.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 | ## Panda 26 | styled-system 27 | design-system-static 28 | -------------------------------------------------------------------------------- /sandbox/preact-ts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Preact + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /sandbox/storybook/stories/Button.jsx: -------------------------------------------------------------------------------- 1 | import { css } from '../styled-system/css' 2 | 3 | export const Button = ({ children }) => { 4 | return ( 5 | 17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/cts/panda.config.cts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@pandacss/dev' 2 | import { tokens } from '../common/tokens' 3 | 4 | export default defineConfig({ 5 | preflight: true, 6 | presets: ['@pandacss/dev/presets'], 7 | include: ['./src/**/*.{ts,tsx,jsx}'], 8 | exclude: [], 9 | hash: false, 10 | jsxFramework: 'react', 11 | theme: { 12 | extend: { 13 | tokens: tokens, 14 | }, 15 | }, 16 | }) 17 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/js/panda.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@pandacss/dev' 2 | import { tokens } from '../common/tokens' 3 | 4 | export default defineConfig({ 5 | preflight: true, 6 | presets: ['@pandacss/dev/presets'], 7 | include: ['./src/**/*.{ts,tsx,jsx}'], 8 | exclude: [], 9 | hash: false, 10 | jsxFramework: 'react', 11 | theme: { 12 | extend: { 13 | tokens: tokens, 14 | }, 15 | }, 16 | }) 17 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/mjs/panda.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@pandacss/dev' 2 | import { tokens } from '../common/tokens' 3 | 4 | export default defineConfig({ 5 | preflight: true, 6 | presets: ['@pandacss/dev/presets'], 7 | include: ['./src/**/*.{ts,tsx,jsx}'], 8 | exclude: [], 9 | hash: false, 10 | jsxFramework: 'react', 11 | theme: { 12 | extend: { 13 | tokens: tokens, 14 | }, 15 | }, 16 | }) 17 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/mts/panda.config.mts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@pandacss/dev' 2 | import { tokens } from '../common/tokens' 3 | 4 | export default defineConfig({ 5 | preflight: true, 6 | presets: ['@pandacss/dev/presets'], 7 | include: ['./src/**/*.{ts,tsx,jsx}'], 8 | exclude: [], 9 | hash: false, 10 | jsxFramework: 'react', 11 | theme: { 12 | extend: { 13 | tokens: tokens, 14 | }, 15 | }, 16 | }) 17 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/ts/panda.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@pandacss/dev' 2 | import { tokens } from '../common/tokens' 3 | 4 | export default defineConfig({ 5 | preflight: true, 6 | presets: ['@pandacss/dev/presets'], 7 | include: ['./src/**/*.{ts,tsx,jsx}'], 8 | exclude: [], 9 | hash: false, 10 | jsxFramework: 'react', 11 | theme: { 12 | extend: { 13 | tokens: tokens, 14 | }, 15 | }, 16 | }) 17 | -------------------------------------------------------------------------------- /sandbox/next-js-app/panda.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "@pandacss/dev" 2 | 3 | export default defineConfig({ 4 | // Whether to use css reset 5 | preflight: true, 6 | 7 | // Where to look for your css declarations 8 | include: ["./src/**/*.{js,jsx,ts,tsx}", "./pages/**/*.{js,jsx,ts,tsx}"], 9 | 10 | // Files to exclude 11 | exclude: [], 12 | 13 | // The output directory for your css system 14 | outdir: "styled-system", 15 | }) 16 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/aspect-ratio.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { FunctionComponent } from 'react' 3 | import type { AspectRatioProperties } from '../patterns/aspect-ratio' 4 | import type { HTMLPandaProps } from '../types/jsx' 5 | 6 | export type AspectRatioProps = AspectRatioProperties & Omit, keyof AspectRatioProperties | 'aspectRatio'> 7 | 8 | 9 | export declare const AspectRatio: FunctionComponent -------------------------------------------------------------------------------- /sandbox/gatsby-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "lib": ["dom", "esnext"], 5 | "jsx": "react", 6 | "module": "esnext", 7 | "moduleResolution": "node", 8 | "esModuleInterop": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "strict": true, 11 | "skipLibCheck": true 12 | }, 13 | "include": ["./src/**/*", "./gatsby-node.ts", "./gatsby-config.ts", "./plugins/**/*"] 14 | } 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Dependency directory 7 | **/node_modules/** 8 | node_modules 9 | 10 | dist 11 | dist-ssr 12 | out 13 | build 14 | **/buil 15 | tsconfig.tsbuildinfo 16 | .DS_Store 17 | __generated__ 18 | *.env 19 | .idea 20 | *.vsix 21 | 22 | ## Panda 23 | styled-system 24 | styled-system-static 25 | panda 26 | panda-static 27 | 28 | !packages/studio/styled-system 29 | packages/studio/src/lib/analysis.json 30 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/nested-files/panda.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@pandacss/dev' 2 | import { themeTokens } from './src' 3 | 4 | export default defineConfig({ 5 | preflight: true, 6 | presets: ['@pandacss/dev/presets'], 7 | include: ['./src/**/*.{ts,tsx,jsx}'], 8 | exclude: [], 9 | hash: false, 10 | jsxFramework: 'react', 11 | theme: { 12 | extend: { 13 | tokens: themeTokens, 14 | }, 15 | }, 16 | }) 17 | -------------------------------------------------------------------------------- /packages/logger/src/index.ts: -------------------------------------------------------------------------------- 1 | import colors from 'kleur' 2 | import { createLogger } from './create-logger' 3 | 4 | export const quote = (...str: string[]) => colors.cyan(`\`${str.join('')}\``) 5 | 6 | const debug = process.env.PANDA_DEBUG 7 | export const logger = createLogger({ 8 | filter: typeof process !== 'undefined' ? debug : undefined, 9 | isDebug: Boolean(debug), 10 | }) 11 | 12 | export { createLogScope } from './scope' 13 | export { colors } 14 | -------------------------------------------------------------------------------- /packages/shared/src/camelcase-property.ts: -------------------------------------------------------------------------------- 1 | import { memo } from './memo' 2 | 3 | const regex = /-(\w|$)/g 4 | 5 | const callback = (_dashChar: string, char: string) => char.toUpperCase() 6 | 7 | export const camelCaseProperty = memo((property: string) => { 8 | if (property.startsWith('--')) return property 9 | let str = property.toLowerCase() 10 | str = str.startsWith('-ms-') ? str.substring(1) : str 11 | return str.replace(regex, callback) 12 | }) 13 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/hstack.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | import { panda } from './factory.mjs' 3 | import { getHstackStyle } from '../patterns/hstack.mjs' 4 | 5 | export const HStack = forwardRef(function HStack(props, ref) { 6 | const { justify, gap, ...restProps } = props 7 | const styleProps = getHstackStyle({ justify, gap }) 8 | return createElement(panda.div, { ref, ...styleProps, ...restProps }) 9 | }) 10 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/vstack.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | import { panda } from './factory.mjs' 3 | import { getVstackStyle } from '../patterns/vstack.mjs' 4 | 5 | export const VStack = forwardRef(function VStack(props, ref) { 6 | const { justify, gap, ...restProps } = props 7 | const styleProps = getVstackStyle({ justify, gap }) 8 | return createElement(panda.div, { ref, ...styleProps, ...restProps }) 9 | }) 10 | -------------------------------------------------------------------------------- /sandbox/next-js-pages/panda.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@pandacss/dev' 2 | 3 | export default defineConfig({ 4 | // Whether to use css reset 5 | preflight: true, 6 | 7 | // Where to look for your css declarations 8 | include: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{js,jsx,ts,tsx}'], 9 | 10 | // Files to exclude 11 | exclude: [], 12 | 13 | // The output directory for your css system 14 | outdir: 'styled-system', 15 | }) 16 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/cjs/panda.config.cjs: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('@pandacss/dev') 2 | const { tokens } = require('../common/tokens') 3 | 4 | module.exports = defineConfig({ 5 | preflight: true, 6 | presets: ['@pandacss/dev/presets'], 7 | include: ['./src/**/*.{ts,tsx,jsx}'], 8 | exclude: [], 9 | hash: false, 10 | jsxFramework: 'react', 11 | theme: { 12 | extend: { 13 | tokens: tokens, 14 | }, 15 | }, 16 | }) 17 | -------------------------------------------------------------------------------- /packages/studio/src/icons/moon.tsx: -------------------------------------------------------------------------------- 1 | import type { ComponentProps } from 'react' 2 | 3 | export const MoonIcon = (props: ComponentProps<'svg'>) => ( 4 | 15 | ) 16 | -------------------------------------------------------------------------------- /sandbox/nuxt/components/SetupDemo.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 18 | -------------------------------------------------------------------------------- /website/src/nextra/breadcrumb.tsx: -------------------------------------------------------------------------------- 1 | import { css } from '@/styled-system/css' 2 | import type { Item } from 'nextra/normalize-pages' 3 | 4 | const styles = css({ 5 | fontWeight: 'semibold', 6 | color: 'blue.500', 7 | mb: '6' 8 | }) 9 | 10 | type Props = { 11 | activePath: Item[] 12 | } 13 | 14 | export const Breadcrumb = ({ activePath }: Props) => { 15 | const currentPath = activePath[1] 16 | return

{currentPath.title}

17 | } 18 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/with-preset/src/semantic-tokens.ts: -------------------------------------------------------------------------------- 1 | import { defineSemanticTokens } from '@pandacss/dev' 2 | 3 | export const semanticTokens = defineSemanticTokens({ 4 | colors: { 5 | background: { 6 | value: { base: 'hsl(0 0% 100%)', _dark: 'hsl(224 71% 4%)' }, 7 | }, 8 | foreground: { 9 | value: { 10 | base: 'hsl(222.2 47.4% 11.2%)', 11 | _dark: 'hsl(213 31% 91%)', 12 | }, 13 | }, 14 | }, 15 | }) 16 | -------------------------------------------------------------------------------- /sandbox/astro/src/layouts/Layout.astro: -------------------------------------------------------------------------------- 1 | --- 2 | export interface Props { 3 | title: string 4 | } 5 | 6 | const { title } = Astro.props 7 | --- 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | {title} 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /sandbox/gatsby-ts/panda.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@pandacss/dev' 2 | 3 | export default defineConfig({ 4 | // Whether to use css reset 5 | preflight: true, 6 | 7 | // Where to look for your css declarations 8 | include: ['./src/components/**/*.{js,jsx,ts,tsx}', './src/pages/**/*.{js,jsx,ts,tsx}'], 9 | 10 | // Files to exclude 11 | exclude: [], 12 | 13 | // The output directory for your css system 14 | outdir: 'styled-system', 15 | }) 16 | -------------------------------------------------------------------------------- /website/src/components/command-prompt.tsx: -------------------------------------------------------------------------------- 1 | import { HStack, panda } from '@/styled-system/jsx' 2 | 3 | export const CommandPrompt = (props: { value: string }) => { 4 | const { value } = props 5 | return ( 6 | 12 | $ 13 | {value} 14 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/with-tsconfig-paths/panda.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@pandacss/dev' 2 | import { themeTokens } from '@/theme/tokens' 3 | 4 | export default defineConfig({ 5 | preflight: true, 6 | presets: ['@pandacss/dev/presets'], 7 | include: ['./src/**/*.{ts,tsx,jsx}'], 8 | exclude: [], 9 | hash: false, 10 | jsxFramework: 'react', 11 | theme: { 12 | extend: { 13 | tokens: themeTokens, 14 | }, 15 | }, 16 | }) 17 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/aspect-ratio.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | import { panda } from './factory.mjs' 3 | import { getAspectRatioStyle } from '../patterns/aspect-ratio.mjs' 4 | 5 | export const AspectRatio = forwardRef(function AspectRatio(props, ref) { 6 | const { ratio, ...restProps } = props 7 | const styleProps = getAspectRatioStyle({ ratio }) 8 | return createElement(panda.div, { ref, ...styleProps, ...restProps }) 9 | }) 10 | -------------------------------------------------------------------------------- /playground/src/app/[id]/page.tsx: -------------------------------------------------------------------------------- 1 | import { Playground } from '@/src/components/Playground' 2 | import { prisma } from '../../client/prisma' 3 | 4 | const Page = async (props: any) => { 5 | const { 6 | params: { id }, 7 | } = props 8 | 9 | const initialState = await prisma.session.findFirst({ 10 | where: { id }, 11 | select: { code: true, config: true }, 12 | }) 13 | 14 | return 15 | } 16 | 17 | export default Page 18 | -------------------------------------------------------------------------------- /packages/parser/src/project-types.ts: -------------------------------------------------------------------------------- 1 | import { type ProjectOptions as TsProjectOptions } from 'ts-morph' 2 | import { type ParserOptions } from './parser' 3 | import type { ConfigTsOptions, PandaHookable, Runtime } from '@pandacss/types' 4 | 5 | export type ProjectOptions = Partial & { 6 | readFile: Runtime['fs']['readFileSync'] 7 | getFiles: () => string[] 8 | hooks: PandaHookable 9 | parserOptions: ParserOptions 10 | tsOptions?: ConfigTsOptions 11 | } 12 | -------------------------------------------------------------------------------- /packages/shared/src/normalize-html.ts: -------------------------------------------------------------------------------- 1 | const htmlProps = ['htmlSize', 'htmlTranslate', 'htmlWidth', 'htmlHeight'] 2 | 3 | function convert(key: string) { 4 | return htmlProps.includes(key) ? key.replace('html', '').toLowerCase() : key 5 | } 6 | 7 | export function normalizeHTMLProps(props: Record) { 8 | return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value])) 9 | } 10 | 11 | normalizeHTMLProps.keys = /* @__PURE__ */ htmlProps 12 | -------------------------------------------------------------------------------- /packages/studio/src/pages/font-sizes.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { FontTokens } from '../components/font-tokens' 3 | import Layout from '../layouts/Layout.astro' 4 | import Sidebar from '../layouts/Sidebar.astro' 5 | 6 | import context from '../lib/panda.context' 7 | 8 | const fontSizes = context.getCategory('fontSizes') 9 | --- 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/stack.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | import { panda } from './factory.mjs' 3 | import { getStackStyle } from '../patterns/stack.mjs' 4 | 5 | export const Stack = forwardRef(function Stack(props, ref) { 6 | const { align, justify, direction, gap, ...restProps } = props 7 | const styleProps = getStackStyle({ align, justify, direction, gap }) 8 | return createElement(panda.div, { ref, ...styleProps, ...restProps }) 9 | }) 10 | -------------------------------------------------------------------------------- /sandbox/remix/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Dependency directory 7 | **/node_modules/** 8 | node_modules 9 | 10 | lib 11 | dist 12 | dist-ssr 13 | out 14 | build 15 | **/buil 16 | tsconfig.tsbuildinfo 17 | .DS_Store 18 | __generated__ 19 | *.env 20 | .idea 21 | *.vsix 22 | 23 | ## Remix 24 | .cache 25 | .env 26 | .vercel 27 | .output 28 | 29 | /build/ 30 | /public/build 31 | /api/index.js 32 | /api/index.js.map 33 | 34 | ## Panda 35 | styled-system 36 | -------------------------------------------------------------------------------- /website/src/icons/arrow-right.tsx: -------------------------------------------------------------------------------- 1 | export function ArrowRightIcon({ 2 | pathClassName, 3 | ...props 4 | }: React.ComponentProps<'svg'> & { pathClassName?: string }) { 5 | return ( 6 | 7 | 14 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /sandbox/preact-ts/src/app.tsx: -------------------------------------------------------------------------------- 1 | import { Stack, styled } from '../styled-system/jsx' 2 | 3 | const Mark = styled('mark') 4 | 5 | export function App() { 6 | return ( 7 | <> 8 | 9 | Vite + Preact 10 | 11 | Welcome 12 | 13 | 14 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /sandbox/qwik-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import { qwikVite } from '@builder.io/qwik/optimizer'; 3 | import { qwikCity } from '@builder.io/qwik-city/vite'; 4 | import tsconfigPaths from 'vite-tsconfig-paths'; 5 | 6 | export default defineConfig(() => { 7 | return { 8 | plugins: [qwikCity(), qwikVite(), tsconfigPaths()], 9 | preview: { 10 | headers: { 11 | 'Cache-Control': 'public, max-age=600', 12 | }, 13 | }, 14 | }; 15 | }); 16 | -------------------------------------------------------------------------------- /website/src/mdx/blockquote.tsx: -------------------------------------------------------------------------------- 1 | import { css } from '@/styled-system/css' 2 | 3 | const styles = css({ 4 | mt: { base: '6', _first: '0' }, 5 | borderColor: { base: 'gray.300', _dark: 'gray.400' }, 6 | fontStyle: 'italic', 7 | color: { base: 'gray.700', _dark: 'gray.400' }, 8 | borderInlineStartWidth: '2', 9 | paddingStart: '6' 10 | }) 11 | 12 | export function Blockquote(props: React.ComponentProps<'blockquote'>) { 13 | return
14 | } 15 | -------------------------------------------------------------------------------- /packages/shared/src/css-important.ts: -------------------------------------------------------------------------------- 1 | const importantRegex = /!(important)?$/ 2 | 3 | export function isImportant(value: string) { 4 | return typeof value === 'string' ? importantRegex.test(value) : false 5 | } 6 | 7 | export function withoutImportant(value: string) { 8 | return typeof value === 'string' ? value.replace(importantRegex, '').trim() : value 9 | } 10 | 11 | export function withoutSpace(str: string) { 12 | return typeof str === 'string' ? str.replaceAll(' ', '_') : str 13 | } 14 | -------------------------------------------------------------------------------- /packages/studio/src/pages/font-weights.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { FontTokens } from '../components/font-tokens' 3 | import Layout from '../layouts/Layout.astro' 4 | import Sidebar from '../layouts/Sidebar.astro' 5 | 6 | import context from '../lib/panda.context' 7 | 8 | const fontWeights = context.getCategory('fontWeights') 9 | --- 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/divider.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | import { panda } from './factory.mjs' 3 | import { getDividerStyle } from '../patterns/divider.mjs' 4 | 5 | export const Divider = forwardRef(function Divider(props, ref) { 6 | const { orientation, thickness, color, ...restProps } = props 7 | const styleProps = getDividerStyle({ orientation, thickness, color }) 8 | return createElement(panda.div, { ref, ...styleProps, ...restProps }) 9 | }) 10 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/float.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | import { panda } from './factory.mjs' 3 | import { getFloatStyle } from '../patterns/float.mjs' 4 | 5 | export const Float = forwardRef(function Float(props, ref) { 6 | const { offsetX, offsetY, offset, placement, ...restProps } = props 7 | const styleProps = getFloatStyle({ offsetX, offsetY, offset, placement }) 8 | return createElement(panda.div, { ref, ...styleProps, ...restProps }) 9 | }) 10 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/wrap.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | import { panda } from './factory.mjs' 3 | import { getWrapStyle } from '../patterns/wrap.mjs' 4 | 5 | export const Wrap = forwardRef(function Wrap(props, ref) { 6 | const { gap, rowGap, columnGap, align, justify, ...restProps } = props 7 | const styleProps = getWrapStyle({ gap, rowGap, columnGap, align, justify }) 8 | return createElement(panda.div, { ref, ...styleProps, ...restProps }) 9 | }) 10 | -------------------------------------------------------------------------------- /playground/public/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Panda Playground", 3 | "short_name": "Panda Playground", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /packages/generator/src/engines/jsx.ts: -------------------------------------------------------------------------------- 1 | import { capitalize } from '@pandacss/shared' 2 | import type { UserConfig } from '@pandacss/types' 3 | 4 | export const getJsxEngine = (config: UserConfig) => { 5 | const { jsxFactory, jsxFramework } = config 6 | return { 7 | factoryName: jsxFactory!, 8 | upperName: capitalize(jsxFactory!), 9 | typeName: `HTML${capitalize(jsxFactory!)}Props`, 10 | componentName: `${capitalize(jsxFactory!)}Component`, 11 | framework: jsxFramework, 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /website/src/icons/check.tsx: -------------------------------------------------------------------------------- 1 | export function CheckIcon(props: React.ComponentProps<'svg'>) { 2 | return ( 3 | 10 | 15 | 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /packages/preset-atlaskit/src/spacing.ts: -------------------------------------------------------------------------------- 1 | export const spacing = { 2 | '025': { value: '0.125rem' }, 3 | '050': { value: '0.25rem' }, 4 | '075': { value: '0.375rem' }, 5 | '100': { value: '0.5rem' }, 6 | '150': { value: '0.75rem' }, 7 | '200': { value: '1rem' }, 8 | '250': { value: '1.25rem' }, 9 | '300': { value: '1.5rem' }, 10 | '400': { value: '2rem' }, 11 | '500': { value: '2.5rem' }, 12 | '600': { value: '3rem' }, 13 | '800': { value: '4rem' }, 14 | '1000': { value: '5rem' }, 15 | } 16 | -------------------------------------------------------------------------------- /packages/preset-panda/src/index.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from '@pandacss/types' 2 | import { breakpoints } from './breakpoints' 3 | import { keyframes } from './keyframes' 4 | import { tokens } from './tokens' 5 | import { textStyles } from './typography' 6 | 7 | const defineConfig = (config: T) => config 8 | 9 | export const preset = defineConfig({ 10 | theme: { 11 | keyframes, 12 | breakpoints, 13 | tokens, 14 | textStyles, 15 | }, 16 | }) 17 | 18 | export default preset 19 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/grid.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | import { panda } from './factory.mjs' 3 | import { getGridStyle } from '../patterns/grid.mjs' 4 | 5 | export const Grid = forwardRef(function Grid(props, ref) { 6 | const { gap, columnGap, rowGap, columns, minChildWidth, ...restProps } = props 7 | const styleProps = getGridStyle({ gap, columnGap, rowGap, columns, minChildWidth }) 8 | return createElement(panda.div, { ref, ...styleProps, ...restProps }) 9 | }) 10 | -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | // See https://go.microsoft.com/fwlink/?LinkId=733558 2 | // for the documentation about the tasks.json format 3 | { 4 | "version": "2.0.0", 5 | "tasks": [ 6 | { 7 | "type": "npm", 8 | "script": "extension:watch", 9 | "problemMatcher": "$tsc-watch", 10 | "isBackground": true, 11 | "presentation": { 12 | "reveal": "never" 13 | }, 14 | "group": { 15 | "kind": "build", 16 | "isDefault": true 17 | } 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /packages/shared/src/merge-props.ts: -------------------------------------------------------------------------------- 1 | import { isObject } from './assert' 2 | 3 | export function mergeProps>(...sources: T[]): T { 4 | const result = {} as Record 5 | for (const source of sources) { 6 | for (const [key, value] of Object.entries(source)) { 7 | if (isObject(value)) { 8 | result[key] = mergeProps(result[key] || {}, value) 9 | } else { 10 | result[key] = value 11 | } 12 | } 13 | } 14 | return result as T 15 | } 16 | -------------------------------------------------------------------------------- /packages/shared/src/to-json.ts: -------------------------------------------------------------------------------- 1 | type MapToRecord> = { 2 | [P in keyof K]: K[P] extends Map ? Record : never 3 | } 4 | 5 | export function mapToJson>(map: T): MapToRecord { 6 | const obj: Record = {} 7 | map.forEach((value, key) => { 8 | if (value instanceof Map) { 9 | obj[key] = Object.fromEntries(value) 10 | } else { 11 | obj[key] = value 12 | } 13 | }) 14 | return obj as any 15 | } 16 | -------------------------------------------------------------------------------- /packages/studio/styled-system/patterns/box.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { SystemStyleObject, ConditionalValue } from '../types' 3 | import type { PropertyValue } from '../types/prop-type' 4 | import type { Properties } from '../types/csstype' 5 | import type { Tokens } from '../tokens' 6 | 7 | export type BoxProperties = { 8 | 9 | } 10 | 11 | 12 | type BoxOptions = BoxProperties & Omit 13 | 14 | 15 | export declare function box(options?: BoxOptions): string 16 | -------------------------------------------------------------------------------- /sandbox/qwik-ts/panda.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@pandacss/dev' 2 | 3 | export default defineConfig({ 4 | // Whether to use css reset 5 | preflight: true, 6 | 7 | // Where to look for your css declarations 8 | include: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{js,jsx,ts,tsx}'], 9 | 10 | // Files to exclude 11 | exclude: [], 12 | 13 | // The output directory for your css system 14 | outdir: 'styled-system', 15 | 16 | // The jsx framework to use 17 | jsxFramework: 'qwik', 18 | }) 19 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/flex.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | import { panda } from './factory.mjs' 3 | import { getFlexStyle } from '../patterns/flex.mjs' 4 | 5 | export const Flex = forwardRef(function Flex(props, ref) { 6 | const { align, justify, direction, wrap, basis, grow, shrink, ...restProps } = props 7 | const styleProps = getFlexStyle({ align, justify, direction, wrap, basis, grow, shrink }) 8 | return createElement(panda.div, { ref, ...styleProps, ...restProps }) 9 | }) 10 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 | "dependencyDashboard": false, 4 | "extends": ["config:base", ":semanticCommitTypeAll(chore)", "schedule:earlyMondays"], 5 | "rebaseWhen": "conflicted", 6 | "timezone": "UTC", 7 | "packageRules": [ 8 | { 9 | "matchUpdateTypes": ["minor", "patch", "pin", "digest"], 10 | "automerge": true 11 | }, 12 | { 13 | "groupName": "astro", 14 | "matchPackagePatterns": ["astro*"] 15 | } 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /packages/shared/src/esc.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-control-regex */ 2 | const rcssescape = /([\0-\x1f\x7f]|^-?\d)|^-$|^-|[^\x80-\uFFFF\w-]/g 3 | const fcssescape = function (ch: string, asCodePoint: string) { 4 | if (!asCodePoint) return '\\' + ch 5 | if (ch === '\0') return '\uFFFD' 6 | if (ch === '-' && ch.length === 1) return '\\-' 7 | return ch.slice(0, -1) + '\\' + ch.charCodeAt(ch.length - 1).toString(16) + '' 8 | } 9 | export const esc = (sel: string) => { 10 | return (sel + '').replace(rcssescape, fcssescape) 11 | } 12 | -------------------------------------------------------------------------------- /sandbox/next-js-app/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import './globals.css' 2 | import { Inter } from 'next/font/google' 3 | 4 | const inter = Inter({ subsets: ['latin'] }) 5 | 6 | export const metadata = { 7 | title: 'Create Next App', 8 | description: 'Generated by create next app', 9 | } 10 | 11 | export default function RootLayout({ 12 | children, 13 | }: { 14 | children: React.ReactNode 15 | }) { 16 | return ( 17 | 18 | {children} 19 | 20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /packages/studio/styled-system/chunks/src__components__analyzer__section.css: -------------------------------------------------------------------------------- 1 | @layer utilities { 2 | .w_full { 3 | width: var(--sizes-full); 4 | } 5 | 6 | .rounded_md { 7 | border-radius: var(--radii-md); 8 | } 9 | 10 | .d_flex { 11 | display: flex; 12 | } 13 | 14 | .flex_column { 15 | flex-direction: column; 16 | } 17 | 18 | .gap_4 { 19 | gap: var(--spacing-4); 20 | } 21 | 22 | .p_4 { 23 | padding: var(--spacing-4); 24 | } 25 | 26 | .w_100\% { 27 | width: 100%; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /packages/studio/src/layouts/Layout.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import '../../styled-system/styles.css' 3 | import Head from '../components/head.astro' 4 | import context from '../lib/panda.context' 5 | --- 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Panda Studio 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /website/pages/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "index": { 3 | "title": "Home", 4 | "display": "hidden", 5 | "theme": { 6 | "layout": "raw" 7 | } 8 | }, 9 | "docs": { 10 | "title": "Documentation", 11 | "type": "page", 12 | "href": "/docs" 13 | }, 14 | "playground": { 15 | "title": "Playground", 16 | "type": "page", 17 | "href": "https://play.panda-css.com/", 18 | "newWindow": true 19 | }, 20 | "learn": { 21 | "title": "Learn", 22 | "type": "page", 23 | "href": "/learn" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/config/src/find-config.ts: -------------------------------------------------------------------------------- 1 | import findUp from 'escalade/sync' 2 | import { resolve } from 'path' 3 | 4 | const configs = ['.ts', '.js', '.mjs', '.cjs'] 5 | const pandaConfigRegex = new RegExp(`panda.config(${configs.join('|')})$`) 6 | 7 | const isPandaConfig = (file: string) => pandaConfigRegex.test(file) 8 | 9 | export function findConfigFile({ cwd, file }: { cwd: string; file?: string }) { 10 | if (file) return resolve(cwd, file) 11 | return findUp(cwd, (_dir, paths) => { 12 | return paths.find(isPandaConfig) 13 | }) 14 | } 15 | -------------------------------------------------------------------------------- /packages/generator/src/artifacts/js/helpers.ts: -------------------------------------------------------------------------------- 1 | import { outdent } from 'outdent' 2 | import helperMjs from '../generated/helpers.mjs.json' assert { type: 'json' } 3 | 4 | export function generateHelpers() { 5 | return { 6 | js: outdent` 7 | ${helperMjs.content} 8 | 9 | export function __spreadValues(a, b){ 10 | return { ...a, ...b } 11 | } 12 | 13 | export function __objRest(source, exclude){ 14 | return Object.fromEntries(Object.entries(source).filter(([key]) => !exclude.includes(key))) 15 | } 16 | `, 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/shared/src/astish.ts: -------------------------------------------------------------------------------- 1 | const newRule = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g 2 | const ruleClean = /\/\*[^]*?\*\/|\s\s+|\n/g 3 | 4 | export const astish = (val: string, tree: any[] = [{}]): Record => { 5 | const block = newRule.exec((val ?? '').replace(ruleClean, '')) 6 | if (!block) return tree[0] 7 | if (block[4]) tree.shift() 8 | else if (block[3]) tree.unshift((tree[0][block[3]] = tree[0][block[3]] || {})) 9 | else tree[0][block[1]] = block[2] 10 | return astish(val, tree) 11 | } 12 | -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/grid-item.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | import { panda } from './factory.mjs' 3 | import { getGridItemStyle } from '../patterns/grid-item.mjs' 4 | 5 | export const GridItem = forwardRef(function GridItem(props, ref) { 6 | const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...restProps } = props 7 | const styleProps = getGridItemStyle({ colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd }) 8 | return createElement(panda.div, { ref, ...styleProps, ...restProps }) 9 | }) 10 | -------------------------------------------------------------------------------- /packages/studio/styled-system/patterns/link-box.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { SystemStyleObject, ConditionalValue } from '../types' 3 | import type { PropertyValue } from '../types/prop-type' 4 | import type { Properties } from '../types/csstype' 5 | import type { Tokens } from '../tokens' 6 | 7 | export type LinkBoxProperties = { 8 | 9 | } 10 | 11 | 12 | type LinkBoxOptions = LinkBoxProperties & Omit 13 | 14 | 15 | export declare function linkBox(options?: LinkBoxOptions): string 16 | -------------------------------------------------------------------------------- /website/public/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Panda CSS", 3 | "short_name": "Panda", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /sandbox/gatsby-ts/src/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import type { HeadFC, PageProps } from 'gatsby' 3 | import { css } from '../../styled-system/css' 4 | 5 | const IndexPage: React.FC = () => { 6 | return ( 7 |
14 | Hello 🐼! 15 |
16 | ) 17 | } 18 | 19 | export default IndexPage 20 | 21 | export const Head: HeadFC = () => Home Page 22 | -------------------------------------------------------------------------------- /sandbox/nuxt/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sandbox-nuxt", 3 | "private": true, 4 | "scripts": { 5 | "build": "nuxt build", 6 | "dev": "nuxt dev", 7 | "generate": "nuxt generate", 8 | "preview": "nuxt preview", 9 | "css": "PANDA_DEBUG=ast:* panda", 10 | "css:gen": "PANDA_DEBUG=* panda codegen", 11 | "css:dev": "PANDA_DEBUG=file:* panda --watch", 12 | "postinstall": "nuxt prepare" 13 | }, 14 | "devDependencies": { 15 | "postcss": "8.4.25", 16 | "nuxt": "^3.6.2", 17 | "@pandacss/dev": "workspace:*" 18 | } 19 | } -------------------------------------------------------------------------------- /extension/language-server/src/tokens/color2k-to-vscode-color.ts: -------------------------------------------------------------------------------- 1 | import { type ColorPresentationParams } from 'vscode-languageserver' 2 | import { parseToRgba } from 'color2k' 3 | 4 | export const color2kToVsCodeColor = (value: string) => { 5 | try { 6 | const [red, green, blue, alpha] = parseToRgba(value) 7 | 8 | const color = { 9 | red: red / 255, 10 | green: green / 255, 11 | blue: blue / 255, 12 | alpha, 13 | } 14 | return color as ColorPresentationParams['color'] 15 | } catch (e) { 16 | return 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/studio/styled-system/patterns/container.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { SystemStyleObject, ConditionalValue } from '../types' 3 | import type { PropertyValue } from '../types/prop-type' 4 | import type { Properties } from '../types/csstype' 5 | import type { Tokens } from '../tokens' 6 | 7 | export type ContainerProperties = { 8 | 9 | } 10 | 11 | 12 | type ContainerOptions = ContainerProperties & Omit 13 | 14 | 15 | export declare function container(options?: ContainerOptions): string 16 | -------------------------------------------------------------------------------- /website/styles/fonts.ts: -------------------------------------------------------------------------------- 1 | import { Fira_Code } from 'next/font/google' 2 | import localFont from 'next/font/local' 3 | import { cx } from '../styled-system/css' 4 | 5 | export const MonaSans = localFont({ 6 | src: '../styles/Mona-Sans.woff2', 7 | display: 'swap', 8 | variable: '--font-mona-sans' 9 | }) 10 | 11 | export const FiraCode = Fira_Code({ 12 | weight: ['400', '500', '700'], 13 | display: 'swap', 14 | subsets: ['latin'], 15 | variable: '--font-fira-code' 16 | }) 17 | 18 | export const fontClassName = cx(MonaSans.variable, FiraCode.variable) 19 | -------------------------------------------------------------------------------- /packages/node/src/parse-glob.ts: -------------------------------------------------------------------------------- 1 | import globParent from 'glob-parent' 2 | 3 | export function parseGlob(pattern: string) { 4 | let glob = pattern 5 | const base = globParent(pattern) 6 | 7 | if (base !== '.') { 8 | glob = pattern.substring(base.length) 9 | if (glob.charAt(0) === '/') { 10 | glob = glob.substring(1) 11 | } 12 | } 13 | 14 | if (glob.substring(0, 2) === './') { 15 | glob = glob.substring(2) 16 | } 17 | if (glob.charAt(0) === '/') { 18 | glob = glob.substring(1) 19 | } 20 | 21 | return { base, glob } 22 | } 23 | -------------------------------------------------------------------------------- /packages/studio/styled-system/patterns/circle.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { SystemStyleObject, ConditionalValue } from '../types' 3 | import type { PropertyValue } from '../types/prop-type' 4 | import type { Properties } from '../types/csstype' 5 | import type { Tokens } from '../tokens' 6 | 7 | export type CircleProperties = { 8 | size?: PropertyValue<'width'> 9 | } 10 | 11 | 12 | type CircleOptions = CircleProperties & Omit 13 | 14 | 15 | export declare function circle(options?: CircleOptions): string 16 | -------------------------------------------------------------------------------- /packages/studio/styled-system/patterns/square.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { SystemStyleObject, ConditionalValue } from '../types' 3 | import type { PropertyValue } from '../types/prop-type' 4 | import type { Properties } from '../types/csstype' 5 | import type { Tokens } from '../tokens' 6 | 7 | export type SquareProperties = { 8 | size?: PropertyValue<'width'> 9 | } 10 | 11 | 12 | type SquareOptions = SquareProperties & Omit 13 | 14 | 15 | export declare function square(options?: SquareOptions): string 16 | -------------------------------------------------------------------------------- /packages/studio/styled-system/patterns/styled-link.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { SystemStyleObject, ConditionalValue } from '../types' 3 | import type { PropertyValue } from '../types/prop-type' 4 | import type { Properties } from '../types/csstype' 5 | import type { Tokens } from '../tokens' 6 | 7 | export type StyledLinkProperties = { 8 | 9 | } 10 | 11 | 12 | type StyledLinkOptions = StyledLinkProperties & Omit 13 | 14 | 15 | export declare function styledLink(options?: StyledLinkOptions): string 16 | -------------------------------------------------------------------------------- /packages/studio/styled-system/patterns/center.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { SystemStyleObject, ConditionalValue } from '../types' 3 | import type { PropertyValue } from '../types/prop-type' 4 | import type { Properties } from '../types/csstype' 5 | import type { Tokens } from '../tokens' 6 | 7 | export type CenterProperties = { 8 | inline?: ConditionalValue 9 | } 10 | 11 | 12 | type CenterOptions = CenterProperties & Omit 13 | 14 | 15 | export declare function center(options?: CenterOptions): string 16 | -------------------------------------------------------------------------------- /website/src/icons/moon.tsx: -------------------------------------------------------------------------------- 1 | export function MoonIcon(props: React.ComponentProps<'svg'>) { 2 | return ( 3 | 11 | 18 | 19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /packages/core/src/plugins/merge-layers.ts: -------------------------------------------------------------------------------- 1 | import type { AtRule, TransformCallback } from 'postcss' 2 | 3 | export default function mergeLayers(): TransformCallback { 4 | return (root) => { 5 | const layers = new Map() 6 | root.walkAtRules('layer', (rule) => { 7 | const prev = layers.get(rule.params) 8 | if (prev) { 9 | rule.remove() 10 | prev.append(rule.nodes) 11 | } else { 12 | layers.set(rule.params, rule) 13 | } 14 | }) 15 | } 16 | } 17 | 18 | mergeLayers.postcssPlugin = 'panda-merge-layers' 19 | -------------------------------------------------------------------------------- /packages/studio/styled-system/patterns/link-overlay.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { SystemStyleObject, ConditionalValue } from '../types' 3 | import type { PropertyValue } from '../types/prop-type' 4 | import type { Properties } from '../types/csstype' 5 | import type { Tokens } from '../tokens' 6 | 7 | export type LinkOverlayProperties = { 8 | 9 | } 10 | 11 | 12 | type LinkOverlayOptions = LinkOverlayProperties & Omit 13 | 14 | 15 | export declare function linkOverlay(options?: LinkOverlayOptions): string 16 | -------------------------------------------------------------------------------- /packages/shared/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pandacss/shared", 3 | "version": "0.7.0", 4 | "description": "Shared utilities for css panda", 5 | "main": "dist/index.js", 6 | "module": "dist/index.mjs", 7 | "types": "dist/index.d.ts", 8 | "author": "Segun Adebayo ", 9 | "sideEffects": false, 10 | "publishConfig": { 11 | "access": "public" 12 | }, 13 | "scripts": { 14 | "build": "tsup --dts", 15 | "build-fast": "tsup --no-dts", 16 | "dev": "pnpm build-fast --watch" 17 | }, 18 | "files": [ 19 | "dist" 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /packages/studio/styled-system/patterns/container.mjs: -------------------------------------------------------------------------------- 1 | import { mapObject } from '../helpers.mjs' 2 | import { css } from '../css/index.mjs' 3 | 4 | const containerConfig = { 5 | transform(props) { 6 | return { 7 | position: 'relative', 8 | maxWidth: '8xl', 9 | mx: 'auto', 10 | px: { base: '4', md: '6', lg: '8' }, 11 | ...props, 12 | } 13 | }, 14 | } 15 | 16 | export const getContainerStyle = (styles = {}) => containerConfig.transform(styles, { map: mapObject }) 17 | 18 | export const container = (styles) => css(getContainerStyle(styles)) 19 | -------------------------------------------------------------------------------- /packages/studio/styled-system/patterns/link-box.mjs: -------------------------------------------------------------------------------- 1 | import { mapObject } from '../helpers.mjs' 2 | import { css } from '../css/index.mjs' 3 | 4 | const linkBoxConfig = { 5 | transform(props) { 6 | return { 7 | position: 'relative', 8 | '& :where(a, abbr)': { 9 | position: 'relative', 10 | zIndex: '1', 11 | }, 12 | ...props, 13 | } 14 | }, 15 | } 16 | 17 | export const getLinkBoxStyle = (styles = {}) => linkBoxConfig.transform(styles, { map: mapObject }) 18 | 19 | export const linkBox = (styles) => css(getLinkBoxStyle(styles)) 20 | -------------------------------------------------------------------------------- /packages/studio/styled-system/patterns/spacer.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { SystemStyleObject, ConditionalValue } from '../types' 3 | import type { PropertyValue } from '../types/prop-type' 4 | import type { Properties } from '../types/csstype' 5 | import type { Tokens } from '../tokens' 6 | 7 | export type SpacerProperties = { 8 | size?: ConditionalValue 9 | } 10 | 11 | 12 | type SpacerOptions = SpacerProperties & Omit 13 | 14 | 15 | export declare function spacer(options?: SpacerOptions): string 16 | -------------------------------------------------------------------------------- /website/src/mdx/code-filename.tsx: -------------------------------------------------------------------------------- 1 | import { css } from '@/styled-system/css' 2 | 3 | const filenameStyles = css({ 4 | position: 'absolute', 5 | top: '0', 6 | zIndex: '1', 7 | width: 'full', 8 | truncate: true, 9 | roundedTop: 'xl', 10 | bg: { base: 'gray.200', _dark: 'gray.700' }, 11 | py: '2', 12 | px: '4', 13 | textStyle: 'sm', 14 | color: { base: 'gray.700', _dark: 'gray.300' } 15 | }) 16 | 17 | export function CodeFilename(props: { filename: string }) { 18 | const { filename } = props 19 | return
{filename}
20 | } 21 | -------------------------------------------------------------------------------- /packages/shared/src/hash.ts: -------------------------------------------------------------------------------- 1 | function toChar(code: number) { 2 | return String.fromCharCode(code + (code > 25 ? 39 : 97)) 3 | } 4 | 5 | function toName(code: number) { 6 | let name = '' 7 | let x: number 8 | for (x = Math.abs(code); x > 52; x = (x / 52) | 0) name = toChar(x % 52) + name 9 | return toChar(x % 52) + name 10 | } 11 | 12 | function toPhash(h: number, x: string) { 13 | let i = x.length 14 | while (i) h = (h * 33) ^ x.charCodeAt(--i) 15 | return h 16 | } 17 | 18 | export function toHash(value: string) { 19 | return toName(toPhash(5381, value) >>> 0) 20 | } 21 | -------------------------------------------------------------------------------- /sandbox/astro/src/components/button.tsx: -------------------------------------------------------------------------------- 1 | import { css } from '../../panda/css' 2 | 3 | export function Button({ children }) { 4 | return ( 5 |
6 | 19 |
20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /sandbox/solid-ts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Solid App 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /sandbox/preact-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sandbox-preact-ts", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview", 10 | "css": "PANDA_DEBUG=* panda", 11 | "css:dev": "PANDA_DEBUG=* panda -w" 12 | }, 13 | "dependencies": { 14 | "preact": "^10.16.0" 15 | }, 16 | "devDependencies": { 17 | "@pandacss/dev": "workspace:*", 18 | "@preact/preset-vite": "2.5.0", 19 | "typescript": "5.1.6", 20 | "vite": "4.4.2" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /sandbox/qwik-ts/.eslintignore: -------------------------------------------------------------------------------- 1 | **/*.log 2 | **/.DS_Store 3 | *. 4 | .vscode/settings.json 5 | .history 6 | .yarn 7 | bazel-* 8 | bazel-bin 9 | bazel-out 10 | bazel-qwik 11 | bazel-testlogs 12 | dist 13 | dist-dev 14 | lib 15 | lib-types 16 | etc 17 | external 18 | node_modules 19 | temp 20 | tsc-out 21 | tsdoc-metadata.json 22 | target 23 | output 24 | rollup.config.js 25 | build 26 | .cache 27 | .vscode 28 | .rollup.cache 29 | dist 30 | tsconfig.tsbuildinfo 31 | vite.config.ts 32 | *.spec.tsx 33 | *.spec.ts 34 | .netlify 35 | pnpm-lock.yaml 36 | package-lock.json 37 | yarn.lock 38 | server 39 | -------------------------------------------------------------------------------- /sandbox/qwik-ts/.prettierignore: -------------------------------------------------------------------------------- 1 | **/*.log 2 | **/.DS_Store 3 | *. 4 | .vscode/settings.json 5 | .history 6 | .yarn 7 | bazel-* 8 | bazel-bin 9 | bazel-out 10 | bazel-qwik 11 | bazel-testlogs 12 | dist 13 | dist-dev 14 | lib 15 | lib-types 16 | etc 17 | external 18 | node_modules 19 | temp 20 | tsc-out 21 | tsdoc-metadata.json 22 | target 23 | output 24 | rollup.config.js 25 | build 26 | .cache 27 | .vscode 28 | .rollup.cache 29 | dist 30 | tsconfig.tsbuildinfo 31 | vite.config.ts 32 | *.spec.tsx 33 | *.spec.ts 34 | .netlify 35 | pnpm-lock.yaml 36 | package-lock.json 37 | yarn.lock 38 | server 39 | -------------------------------------------------------------------------------- /sandbox/svelte/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | vite.config.js.timestamp-* 10 | vite.config.ts.timestamp-* 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | 16 | # Logs 17 | logs 18 | *.log 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | pnpm-debug.log* 23 | lerna-debug.log* 24 | 25 | # Editor directories and files 26 | .vscode/* 27 | !.vscode/extensions.json 28 | .idea 29 | .DS_Store 30 | *.suo 31 | *.ntvs* 32 | *.njsproj 33 | *.sln 34 | *.sw? 35 | 36 | ## Panda 37 | src/styled-system 38 | -------------------------------------------------------------------------------- /website/src/components/code-highlight/tabs.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { css } from '@/styled-system/css' 4 | import { TabContent, TabList, Tabs, TabTrigger } from '@ark-ui/react' 5 | 6 | export function TabsList({ titles }: { titles: string[] }) { 7 | return ( 8 | 9 | {titles.map(title => ( 10 | 11 | {title} 12 | 13 | ))} 14 | 15 | ) 16 | } 17 | 18 | export { Tabs as CodeTabs, TabContent as TabsContent } 19 | -------------------------------------------------------------------------------- /website/src/icons/information-circle.tsx: -------------------------------------------------------------------------------- 1 | export function InformationCircleIcon(props: React.ComponentProps<'svg'>) { 2 | return ( 3 | 11 | 16 | 17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/with-preset/src/required-preset.ts: -------------------------------------------------------------------------------- 1 | import { definePreset, defineSemanticTokens } from '@pandacss/dev' 2 | 3 | export const requiredPreset = definePreset({ 4 | theme: { 5 | extend: { 6 | semanticTokens: defineSemanticTokens({ 7 | colors: { 8 | muted: { 9 | value: { base: '{colors.gray.500}', _dark: '{colors.gray.400}' }, 10 | }, 11 | subtle: { 12 | value: { base: '{colors.gray.400}', _dark: '{colors.gray.500}' }, 13 | }, 14 | }, 15 | }), 16 | }, 17 | }, 18 | }) 19 | -------------------------------------------------------------------------------- /packages/studio/src/components/analyzer/sort-icon.tsx: -------------------------------------------------------------------------------- 1 | export const SortIcon = () => { 2 | return ( 3 | 4 | 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /packages/studio/styled-system/patterns/center.mjs: -------------------------------------------------------------------------------- 1 | import { mapObject } from '../helpers.mjs' 2 | import { css } from '../css/index.mjs' 3 | 4 | const centerConfig = { 5 | transform(props) { 6 | const { inline, ...rest } = props 7 | return { 8 | display: inline ? 'inline-flex' : 'flex', 9 | alignItems: 'center', 10 | justifyContent: 'center', 11 | ...rest, 12 | } 13 | }, 14 | } 15 | 16 | export const getCenterStyle = (styles = {}) => centerConfig.transform(styles, { map: mapObject }) 17 | 18 | export const center = (styles) => css(getCenterStyle(styles)) 19 | -------------------------------------------------------------------------------- /sandbox/storybook/.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'], 3 | addons: [ 4 | '@storybook/addon-links', 5 | '@storybook/addon-essentials', 6 | '@storybook/addon-interactions', 7 | { 8 | name: '@storybook/addon-styling', 9 | options: { postCss: true }, 10 | }, 11 | ], 12 | framework: { 13 | name: '@storybook/react-webpack5', 14 | options: {}, 15 | }, 16 | core: { 17 | builder: '@storybook/builder-webpack5', 18 | disableTelemetry: true, 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /packages/studio/src/pages/letter-spacings.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { FontTokens } from '../components/font-tokens' 3 | import Layout from '../layouts/Layout.astro' 4 | import Sidebar from '../layouts/Sidebar.astro' 5 | 6 | import context from '../lib/panda.context' 7 | 8 | const tokens = context.getCategory('letterSpacings') 9 | --- 10 | 11 | 12 | 13 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /sandbox/astro/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sandbox-astro", 3 | "type": "module", 4 | "version": "0.0.1", 5 | "private": true, 6 | "scripts": { 7 | "dev": "astro dev", 8 | "start": "astro dev", 9 | "build": "astro build", 10 | "preview": "astro preview", 11 | "astro": "astro", 12 | "css": "DEBUG=ast:* panda --clean", 13 | "css:dev": "panda -w" 14 | }, 15 | "dependencies": { 16 | "@astrojs/solid-js": "2.2.0", 17 | "astro": "2.8.4", 18 | "solid-js": "1.7.7" 19 | }, 20 | "devDependencies": { 21 | "@pandacss/dev": "workspace:*" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /sandbox/svelte/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "checkJs": true, 5 | "esModuleInterop": true, 6 | "forceConsistentCasingInFileNames": true, 7 | "resolveJsonModule": true, 8 | "skipLibCheck": true, 9 | "sourceMap": true, 10 | "strict": true 11 | } 12 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias 13 | // 14 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes 15 | // from the referenced tsconfig.json - TypeScript does not merge them in 16 | } 17 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/with-preset/src/ts-import-preset.ts: -------------------------------------------------------------------------------- 1 | import { definePreset, defineSemanticTokens } from '@pandacss/dev' 2 | 3 | export const tsImportPreset = definePreset({ 4 | theme: { 5 | extend: { 6 | semanticTokens: defineSemanticTokens({ 7 | colors: { 8 | placeholder: { 9 | value: { base: '{colors.gray.600}', _dark: '{colors.gray.400}' }, 10 | }, 11 | inverted: { 12 | default: { value: { base: 'white', _dark: '{colors.black}' } }, 13 | }, 14 | }, 15 | }), 16 | }, 17 | }, 18 | }) 19 | -------------------------------------------------------------------------------- /packages/studio/styled-system/chunks/src__components__analyzer__text-with-count.css: -------------------------------------------------------------------------------- 1 | @layer utilities { 2 | .d_inline-flex { 3 | display: inline-flex; 4 | } 5 | 6 | .items_center { 7 | align-items: center; 8 | } 9 | 10 | .fs_75\% { 11 | font-size: 75%; 12 | } 13 | 14 | .leading_0 { 15 | line-height: 0; 16 | } 17 | 18 | .pos_relative { 19 | position: relative; 20 | } 21 | 22 | .top_-0\.35em { 23 | top: -0.35em; 24 | } 25 | 26 | .opacity_0\.5 { 27 | opacity: 0.5; 28 | } 29 | 30 | .ml_1 { 31 | margin-left: var(--spacing-1); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /sandbox/solid-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sandbox-solid", 3 | "version": "0.0.0", 4 | "description": "", 5 | "private": true, 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "serve": "vite preview", 10 | "css": "PANDA_DEBUG=* panda", 11 | "css:dev": "PANDA_DEBUG=* panda -w" 12 | }, 13 | "license": "MIT", 14 | "devDependencies": { 15 | "@pandacss/dev": "workspace:*", 16 | "typescript": "^5.1.6", 17 | "vite": "^4.4.2", 18 | "vite-plugin-solid": "^2.7.0" 19 | }, 20 | "dependencies": { 21 | "solid-js": "^1.7.7" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/extractor/src/get-typeof-literal.ts: -------------------------------------------------------------------------------- 1 | import type { LiteralKind } from './box-factory' 2 | import type { PrimitiveType } from './types' 3 | 4 | export const getTypeOfLiteral = (value: PrimitiveType | PrimitiveType[]): LiteralKind => { 5 | if (Array.isArray(value)) return 'array' 6 | if (typeof value === 'string') return 'string' 7 | if (typeof value === 'number') return 'number' 8 | if (typeof value === 'boolean') return 'boolean' 9 | if (value === null) return 'null' 10 | if (value === undefined) return 'undefined' 11 | throw new Error(`Unexpected literal type: ${value as any}`) 12 | } 13 | -------------------------------------------------------------------------------- /packages/node/src/exec-command.ts: -------------------------------------------------------------------------------- 1 | import { logger } from '@pandacss/logger' 2 | import { spawnSync } from 'child_process' 3 | import getPackageManager from 'preferred-pm' 4 | 5 | export async function execCommand(cmd: string, cwd: string) { 6 | const manager = await getPackageManager(cwd) 7 | const pm = manager?.name ?? 'npm' 8 | const args = cmd.split(' ') 9 | 10 | if (pm === 'npm') { 11 | args.unshift('run') 12 | } 13 | 14 | const check = spawnSync(pm, args, { cwd, stdio: 'pipe' }) 15 | 16 | if (check.status !== 0) { 17 | logger.error('exec', check.stderr.toString()) 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/studio/src/components/side-nav-item.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { panda } from '../../styled-system/jsx' 3 | 4 | interface Props { 5 | href: string 6 | } 7 | 8 | const { href } = Astro.props 9 | const isActive = Astro.url.pathname.startsWith(href) 10 | --- 11 | 12 |
  • 13 | 23 | 24 | 25 |
    • 26 | -------------------------------------------------------------------------------- /packages/studio/styled-system/patterns/hstack.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { SystemStyleObject, ConditionalValue } from '../types' 3 | import type { PropertyValue } from '../types/prop-type' 4 | import type { Properties } from '../types/csstype' 5 | import type { Tokens } from '../tokens' 6 | 7 | export type HstackProperties = { 8 | justify?: PropertyValue<'justifyContent'> 9 | gap?: PropertyValue<'gap'> 10 | } 11 | 12 | 13 | type HstackOptions = HstackProperties & Omit 14 | 15 | 16 | export declare function hstack(options?: HstackOptions): string 17 | -------------------------------------------------------------------------------- /packages/studio/styled-system/patterns/vstack.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { SystemStyleObject, ConditionalValue } from '../types' 3 | import type { PropertyValue } from '../types/prop-type' 4 | import type { Properties } from '../types/csstype' 5 | import type { Tokens } from '../tokens' 6 | 7 | export type VstackProperties = { 8 | justify?: PropertyValue<'justifyContent'> 9 | gap?: PropertyValue<'gap'> 10 | } 11 | 12 | 13 | type VstackOptions = VstackProperties & Omit 14 | 15 | 16 | export declare function vstack(options?: VstackOptions): string 17 | -------------------------------------------------------------------------------- /sandbox/qwik-ts/.gitignore: -------------------------------------------------------------------------------- 1 | # Build 2 | /dist 3 | /lib 4 | /lib-types 5 | /server 6 | 7 | # Development 8 | node_modules 9 | *.local 10 | 11 | # Cache 12 | .cache 13 | .mf 14 | .rollup.cache 15 | tsconfig.tsbuildinfo 16 | 17 | # Logs 18 | logs 19 | *.log 20 | npm-debug.log* 21 | yarn-debug.log* 22 | yarn-error.log* 23 | pnpm-debug.log* 24 | lerna-debug.log* 25 | 26 | # Editor 27 | .vscode/* 28 | !.vscode/extensions.json 29 | .idea 30 | .DS_Store 31 | *.suo 32 | *.ntvs* 33 | *.njsproj 34 | *.sln 35 | *.sw? 36 | 37 | # Yarn 38 | .yarn/* 39 | !.yarn/releases 40 | ## Panda 41 | styled-system 42 | styled-system-static -------------------------------------------------------------------------------- /packages/config/__tests__/samples/with-preset/panda.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@pandacss/dev' 2 | import { tsImportPreset } from './src/ts-import-preset' 3 | 4 | export default defineConfig({ 5 | preflight: true, 6 | presets: ['@pandacss/dev/presets', tsImportPreset, require('./src/required-preset')], 7 | include: ['./src/**/*.{ts,tsx,jsx}'], 8 | exclude: [], 9 | hash: false, 10 | jsxFramework: 'react', 11 | theme: { 12 | extend: { 13 | tokens: { 14 | colors: { 15 | 'color-primary': { value: '#000' }, 16 | }, 17 | }, 18 | }, 19 | }, 20 | }) 21 | -------------------------------------------------------------------------------- /packages/generator/src/engines/path.ts: -------------------------------------------------------------------------------- 1 | import type { UserConfig } from '@pandacss/types' 2 | 3 | export const getPathEngine = ({ cwd, emitPackage, outdir }: UserConfig) => { 4 | const get = (file?: string) => 5 | [cwd, emitPackage ? 'node_modules' : undefined, outdir, file].filter(Boolean) as string[] 6 | return { 7 | get, 8 | root: get(), 9 | css: get('css'), 10 | token: get('tokens'), 11 | types: get('types'), 12 | recipe: get('recipes'), 13 | pattern: get('patterns'), 14 | chunk: get('chunks'), 15 | outCss: get('styles.css'), 16 | jsx: get('jsx'), 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/preset-panda/src/shadows.ts: -------------------------------------------------------------------------------- 1 | export const shadows = { 2 | xs: { value: '0 1px 2px 0 rgb(0 0 0 / 0.05)' }, 3 | sm: { value: ['0 1px 3px 0 rgb(0 0 0 / 0.1)', '0 1px 2px -1px rgb(0 0 0 / 0.1)'] }, 4 | md: { value: ['0 4px 6px -1px rgb(0 0 0 / 0.1)', '0 2px 4px -2px rgb(0 0 0 / 0.1)'] }, 5 | lg: { value: ['0 10px 15px -3px rgb(0 0 0 / 0.1)', '0 4px 6px -4px rgb(0 0 0 / 0.1)'] }, 6 | xl: { value: ['0 20px 25px -5px rgb(0 0 0 / 0.1)', '0 8px 10px -6px rgb(0 0 0 / 0.1)'] }, 7 | '2xl': { value: '0 25px 50px -12px rgb(0 0 0 / 0.25)' }, 8 | inner: { value: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)' }, 9 | } 10 | -------------------------------------------------------------------------------- /packages/studio/styled-system/patterns/spacer.mjs: -------------------------------------------------------------------------------- 1 | import { mapObject } from '../helpers.mjs' 2 | import { css } from '../css/index.mjs' 3 | 4 | const spacerConfig = { 5 | transform(props, { map }) { 6 | const { size, ...rest } = props 7 | return { 8 | alignSelf: 'stretch', 9 | justifySelf: 'stretch', 10 | flex: map(size, (v) => (v == null ? '1' : `0 0 ${v}`)), 11 | ...rest, 12 | } 13 | }, 14 | } 15 | 16 | export const getSpacerStyle = (styles = {}) => spacerConfig.transform(styles, { map: mapObject }) 17 | 18 | export const spacer = (styles) => css(getSpacerStyle(styles)) 19 | -------------------------------------------------------------------------------- /sandbox/next-js-app/.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 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | 38 | ## Panda 39 | styled-system 40 | -------------------------------------------------------------------------------- /sandbox/next-js-pages/.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 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | 38 | ## Panda 39 | styled-system 40 | -------------------------------------------------------------------------------- /packages/studio/styled-system/patterns/aspect-ratio.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { SystemStyleObject, ConditionalValue } from '../types' 3 | import type { PropertyValue } from '../types/prop-type' 4 | import type { Properties } from '../types/csstype' 5 | import type { Tokens } from '../tokens' 6 | 7 | export type AspectRatioProperties = { 8 | ratio?: ConditionalValue 9 | } 10 | 11 | 12 | type AspectRatioOptions = AspectRatioProperties & Omit 13 | 14 | 15 | export declare function aspectRatio(options?: AspectRatioOptions): string 16 | -------------------------------------------------------------------------------- /sandbox/remix/app/components/Button.tsx: -------------------------------------------------------------------------------- 1 | import { css, cx } from 'styled-system/css' 2 | import type { ButtonVariantProps } from 'styled-system/recipes' 3 | import { button } from 'styled-system/recipes' 4 | import type { SystemStyleObject } from 'styled-system/types' 5 | import type { ReactNode } from 'react' 6 | 7 | interface ButtonProps extends ButtonVariantProps { 8 | children: ReactNode 9 | css: SystemStyleObject 10 | } 11 | 12 | export function Button({ children, variant, size, css: cssProp }: ButtonProps) { 13 | return 14 | } 15 | -------------------------------------------------------------------------------- /packages/types/scripts/build.ts: -------------------------------------------------------------------------------- 1 | import { mkdirSync, readdirSync, readFileSync, writeFileSync } from 'fs' 2 | 3 | const toExt = (ext: string) => (file: string) => file.replace(/\.ts$/, ext) 4 | const toDts = toExt('.d.ts') 5 | 6 | const files = readdirSync('src') 7 | 8 | const getOrCreateDir = (dir: string) => { 9 | try { 10 | mkdirSync(dir) 11 | } catch (e) { 12 | // ignore 13 | } 14 | } 15 | 16 | files.forEach((file) => { 17 | const destFile = file.endsWith('.d.ts') ? `dist/${file}` : `dist/${toDts(file)}` 18 | getOrCreateDir('dist') 19 | writeFileSync(destFile, readFileSync(`src/${file}`)) 20 | }) 21 | -------------------------------------------------------------------------------- /packages/types/src/prop-type.ts: -------------------------------------------------------------------------------- 1 | import type { ConditionalValue } from './conditions' 2 | import type { CssProperties } from './system-types' 3 | 4 | /* ----------------------------------------------------------------------------- 5 | * Shadowed export (in CLI): DO NOT REMOVE 6 | * -----------------------------------------------------------------------------*/ 7 | 8 | export type PropertyTypes = {} 9 | 10 | export type PropertyValue = K extends keyof PropertyTypes 11 | ? ConditionalValue 12 | : K extends keyof CssProperties 13 | ? ConditionalValue 14 | : never 15 | -------------------------------------------------------------------------------- /playground/.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 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | ## Panda 38 | styled-system 39 | styled-system-static 40 | -------------------------------------------------------------------------------- /website/src/components/navbar.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | import { Box, Container, panda } from '@/styled-system/jsx' 3 | import { DesktopNavBar } from './navbar.desktop' 4 | import { MobileNavBar } from './navbar.mobile' 5 | 6 | export const Navbar = () => { 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /website/src/icons/x.tsx: -------------------------------------------------------------------------------- 1 | export function XIcon(props: React.ComponentProps<'svg'>) { 2 | return ( 3 | 11 | 16 | 17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /website/src/nextra/button/button-icon.tsx: -------------------------------------------------------------------------------- 1 | import { panda, type HTMLPandaProps } from '@/styled-system/jsx' 2 | import { cloneElement, isValidElement } from 'react' 3 | 4 | export const ButtonIcon = (props: HTMLPandaProps<'span'>) => { 5 | const { children, ...rest } = props 6 | 7 | const _children = isValidElement(children) 8 | ? cloneElement(children, { 9 | // @ts-expect-error typings are wrong 10 | 'aria-hidden': true, 11 | focusable: false 12 | }) 13 | : children 14 | 15 | return ( 16 | 17 | {_children} 18 | 19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /packages/extractor/src/jsx-spread-attribute.ts: -------------------------------------------------------------------------------- 1 | import type { JsxSpreadAttribute, Node } from 'ts-morph' 2 | import { maybeBoxNode } from './maybe-box-node' 3 | import type { BoxContext, MatchFnPropArgs, MatchPropArgs } from './types' 4 | import { unwrapExpression } from './utils' 5 | 6 | type MatchProp = (prop: MatchFnPropArgs | MatchPropArgs) => boolean 7 | 8 | export const extractJsxSpreadAttributeValues = (node: JsxSpreadAttribute, ctx: BoxContext, matchProp: MatchProp) => { 9 | const expr = unwrapExpression(node.getExpression()) 10 | const stack: Node[] = [] 11 | return maybeBoxNode(expr, stack, ctx, matchProp) 12 | } 13 | -------------------------------------------------------------------------------- /sandbox/svelte/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: '@typescript-eslint/parser', 4 | extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'], 5 | plugins: ['svelte3', '@typescript-eslint'], 6 | ignorePatterns: ['*.cjs'], 7 | overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }], 8 | settings: { 9 | 'svelte3/typescript': () => require('typescript'), 10 | }, 11 | parserOptions: { 12 | sourceType: 'module', 13 | ecmaVersion: 2020, 14 | }, 15 | env: { 16 | browser: true, 17 | es2017: true, 18 | node: true, 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /website/src/icons/sun.tsx: -------------------------------------------------------------------------------- 1 | export function SunIcon(props: React.ComponentProps<'svg'>) { 2 | return ( 3 | 11 | 18 | 19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /packages/cli/src/errors.ts: -------------------------------------------------------------------------------- 1 | import { isMainThread, parentPort } from 'worker_threads' 2 | import colors from 'kleur' 3 | 4 | export function handleError(error: any) { 5 | if (error.loc) { 6 | console.error(colors.bold(colors.red(`Error parsing: ${error.loc.file}:${error.loc.line}:${error.loc.column}`))) 7 | } 8 | if (error.frame) { 9 | console.error(colors.red(error.message)) 10 | console.error(colors.dim(error.frame)) 11 | } else { 12 | console.error(colors.red(error.message)) 13 | } 14 | process.exitCode = 1 15 | if (!isMainThread && parentPort) { 16 | parentPort.postMessage('error') 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/studio/styled-system/patterns/hstack.mjs: -------------------------------------------------------------------------------- 1 | import { mapObject } from '../helpers.mjs' 2 | import { css } from '../css/index.mjs' 3 | 4 | const hstackConfig = { 5 | transform(props) { 6 | const { justify, gap = '10px', ...rest } = props 7 | return { 8 | display: 'flex', 9 | alignItems: 'center', 10 | justifyContent: justify, 11 | gap, 12 | flexDirection: 'row', 13 | ...rest, 14 | } 15 | }, 16 | } 17 | 18 | export const getHstackStyle = (styles = {}) => hstackConfig.transform(styles, { map: mapObject }) 19 | 20 | export const hstack = (styles) => css(getHstackStyle(styles)) 21 | -------------------------------------------------------------------------------- /packages/studio/styled-system/patterns/index.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | export * from './box' 3 | export * from './flex' 4 | export * from './stack' 5 | export * from './vstack' 6 | export * from './hstack' 7 | export * from './spacer' 8 | export * from './square' 9 | export * from './circle' 10 | export * from './center' 11 | export * from './link-box' 12 | export * from './link-overlay' 13 | export * from './aspect-ratio' 14 | export * from './grid' 15 | export * from './grid-item' 16 | export * from './wrap' 17 | export * from './container' 18 | export * from './divider' 19 | export * from './float' 20 | export * from './styled-link' -------------------------------------------------------------------------------- /packages/studio/styled-system/patterns/vstack.mjs: -------------------------------------------------------------------------------- 1 | import { mapObject } from '../helpers.mjs' 2 | import { css } from '../css/index.mjs' 3 | 4 | const vstackConfig = { 5 | transform(props) { 6 | const { justify, gap = '10px', ...rest } = props 7 | return { 8 | display: 'flex', 9 | alignItems: 'center', 10 | justifyContent: justify, 11 | gap, 12 | flexDirection: 'column', 13 | ...rest, 14 | } 15 | }, 16 | } 17 | 18 | export const getVstackStyle = (styles = {}) => vstackConfig.transform(styles, { map: mapObject }) 19 | 20 | export const vstack = (styles) => css(getVstackStyle(styles)) 21 | -------------------------------------------------------------------------------- /packages/error/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pandacss/error", 3 | "version": "0.7.0", 4 | "description": "Common error messages for css panda", 5 | "main": "dist/index.js", 6 | "module": "dist/index.mjs", 7 | "types": "dist/index.d.ts", 8 | "author": "Segun Adebayo ", 9 | "sideEffects": false, 10 | "publishConfig": { 11 | "access": "public" 12 | }, 13 | "scripts": { 14 | "build": "tsup src/index.ts --format=esm,cjs --dts", 15 | "build-fast": "tsup src/index.ts --format=esm,cjs --no-dts", 16 | "dev": "pnpm build-fast --watch" 17 | }, 18 | "files": [ 19 | "dist" 20 | ] 21 | } 22 | --------------------------------------------------------------------------------