├── .changeset ├── README.md ├── config.json └── old-hornets-mix.md ├── .eslintrc ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.yml │ ├── config.yml │ ├── documentation_request.yml │ └── feature_request.yml ├── assets │ └── banner.png ├── composite-actions │ └── install │ │ └── action.yml ├── pull_request_template.md └── workflows │ ├── quality.yml │ └── release.yml ├── .gitignore ├── .husky ├── _ │ ├── .gitignore │ └── husky.sh └── pre-commit ├── .ncurc.json ├── .npmrc ├── .prettierignore ├── .prettierrc ├── .vscode ├── extensions.json ├── settings.json └── snippets.code-snippets ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── assets ├── logo-black.png ├── logo-black.svg ├── logo-main.png ├── logo-main.svg ├── logo-on-black.png └── logo-on-yellow.png ├── idea.excalidraw ├── package.json ├── packages ├── astro-plugin-studio │ ├── CHANGELOG.md │ ├── package.json │ ├── src │ │ └── index.ts │ └── tsconfig.json ├── cli │ ├── CHANGELOG.md │ ├── README.md │ ├── __tests__ │ │ ├── .gitignore │ │ ├── cli.test.ts │ │ └── samples │ │ │ └── .gitkeep │ ├── bin.js │ ├── package.json │ ├── postcss.d.ts │ ├── postcss.js │ ├── src │ │ ├── cli-default.ts │ │ ├── cli-main.ts │ │ ├── errors.ts │ │ ├── index.ts │ │ ├── interactive.ts │ │ ├── presets.ts │ │ └── types.ts │ └── tsconfig.json ├── config │ ├── CHANGELOG.md │ ├── __tests__ │ │ ├── bundle-config.test.ts │ │ ├── is-panda-config.test.ts │ │ ├── merge-config.test.ts │ │ ├── merge-hooks.test.ts │ │ ├── merge-presets.test.ts │ │ ├── samples │ │ │ ├── cjs │ │ │ │ ├── package.json │ │ │ │ └── panda.config.cjs │ │ │ ├── common │ │ │ │ └── tokens.ts │ │ │ ├── cts │ │ │ │ ├── package.json │ │ │ │ └── panda.config.cts │ │ │ ├── js │ │ │ │ ├── package.json │ │ │ │ └── panda.config.js │ │ │ ├── mjs │ │ │ │ ├── package.json │ │ │ │ └── panda.config.mjs │ │ │ ├── mts │ │ │ │ ├── package.json │ │ │ │ └── panda.config.mts │ │ │ ├── nested-files │ │ │ │ ├── package.json │ │ │ │ ├── panda.config.ts │ │ │ │ └── src │ │ │ │ │ ├── index.ts │ │ │ │ │ └── theme │ │ │ │ │ ├── colors.ts │ │ │ │ │ ├── index.ts │ │ │ │ │ └── tokens.ts │ │ │ ├── ts-import-map-one-source │ │ │ │ ├── .gitignore │ │ │ │ ├── outdir │ │ │ │ │ ├── .gitignore │ │ │ │ │ └── package.json │ │ │ │ ├── package.json │ │ │ │ ├── panda.config.ts │ │ │ │ ├── test-ts-import-map.js │ │ │ │ └── ts-import-map.js │ │ │ ├── ts-import-map │ │ │ │ ├── .gitignore │ │ │ │ ├── package.json │ │ │ │ ├── panda.config.ts │ │ │ │ ├── test-ts-import-map.js │ │ │ │ ├── ts-import-map-outdir │ │ │ │ │ ├── .gitignore │ │ │ │ │ └── package.json │ │ │ │ └── ts-import-map.js │ │ │ ├── ts │ │ │ │ ├── package.json │ │ │ │ └── panda.config.ts │ │ │ ├── with-preset │ │ │ │ ├── package.json │ │ │ │ ├── panda.config.ts │ │ │ │ └── src │ │ │ │ │ ├── required-preset.ts │ │ │ │ │ ├── semantic-tokens.ts │ │ │ │ │ └── ts-import-preset.ts │ │ │ └── with-tsconfig-paths │ │ │ │ ├── package.json │ │ │ │ ├── panda.config.ts │ │ │ │ ├── src │ │ │ │ └── theme │ │ │ │ │ └── tokens.ts │ │ │ │ └── tsconfig.json │ │ └── validate-config.test.ts │ ├── diff.d.ts │ ├── merge.d.ts │ ├── package.json │ ├── src │ │ ├── bundle-config.ts │ │ ├── bundled-preset.ts │ │ ├── config-deps.ts │ │ ├── create-matcher.ts │ │ ├── diff-config.ts │ │ ├── find-config.ts │ │ ├── get-mod-deps.ts │ │ ├── get-resolved-config.ts │ │ ├── index.ts │ │ ├── is-panda-config.ts │ │ ├── load-config.ts │ │ ├── merge-config.ts │ │ ├── merge-hooks.ts │ │ ├── resolve-config.ts │ │ ├── resolve-ts-path-pattern.ts │ │ ├── ts-config-paths.ts │ │ ├── types.ts │ │ ├── validate-config.ts │ │ └── validation │ │ │ ├── utils.ts │ │ │ ├── validate-artifact.ts │ │ │ ├── validate-breakpoints.ts │ │ │ ├── validate-condition.ts │ │ │ ├── validate-patterns.ts │ │ │ ├── validate-recipes.ts │ │ │ ├── validate-token-references.ts │ │ │ └── validate-tokens.ts │ ├── ts-path.d.ts │ ├── tsconfig.build.json │ ├── tsconfig.json │ └── tsup.config.ts ├── core │ ├── CHANGELOG.md │ ├── __tests__ │ │ ├── atomic-recipe.test.ts │ │ ├── atomic-rule.test.ts │ │ ├── breakpoints.test.ts │ │ ├── classname.test.ts │ │ ├── color-mix.test.ts │ │ ├── complex-rule.test.ts │ │ ├── composition.test.ts │ │ ├── conditions.test.ts │ │ ├── create-anatomy.ts │ │ ├── custom-utility.test.ts │ │ ├── file-matcher.test.ts │ │ ├── fixture.ts │ │ ├── global-css.test.ts │ │ ├── global-fontface.test.ts │ │ ├── global-position-try.test.ts │ │ ├── global-vars.test.ts │ │ ├── import-map.test.ts │ │ ├── prefix.test.ts │ │ ├── recipe-nesting.test.ts │ │ ├── recipe.test.ts │ │ ├── rule-processor.test.ts │ │ ├── selectors.test.ts │ │ ├── serialize.test.ts │ │ ├── slot-recipe.test.ts │ │ ├── sort-at-rule.test.ts │ │ ├── sort-css.test.ts │ │ ├── sort-mq.test.ts │ │ ├── sort-style-rules.test.ts │ │ ├── static-css.test.ts │ │ ├── stringify.test.ts │ │ ├── style-decoder.test.ts │ │ ├── style-encoder.test.ts │ │ ├── template-literal.test.ts │ │ └── utility.test.ts │ ├── package.json │ ├── src │ │ ├── breakpoints.ts │ │ ├── color-mix.ts │ │ ├── conditions.ts │ │ ├── context.ts │ │ ├── file-matcher.ts │ │ ├── file.ts │ │ ├── global-fontface.ts │ │ ├── global-position-try.ts │ │ ├── global-vars.ts │ │ ├── hooks-api.ts │ │ ├── import-map.ts │ │ ├── index.ts │ │ ├── jsx.ts │ │ ├── layers.ts │ │ ├── messages.ts │ │ ├── optimize.ts │ │ ├── parse-condition.ts │ │ ├── path.ts │ │ ├── patterns.ts │ │ ├── plugins │ │ │ ├── optimize-lightningcss.ts │ │ │ ├── optimize-postcss.ts │ │ │ ├── prettify.ts │ │ │ ├── sort-css.ts │ │ │ └── sort-mq.ts │ │ ├── recipes.ts │ │ ├── rule-processor.ts │ │ ├── safe-parse.ts │ │ ├── selector.ts │ │ ├── serialize.ts │ │ ├── sort-at-rules.ts │ │ ├── sort-style-rules.ts │ │ ├── static-css.ts │ │ ├── stringify.ts │ │ ├── style-decoder.ts │ │ ├── style-encoder.ts │ │ ├── stylesheet.ts │ │ ├── types.ts │ │ ├── unitless.ts │ │ └── utility.ts │ ├── tsconfig.json │ └── tsup.config.ts ├── extractor │ ├── CHANGELOG.md │ ├── __tests__ │ │ ├── create-project.ts │ │ ├── declarations-files.test.ts │ │ ├── extract-speed.bench.ts │ │ ├── extract.test.ts │ │ ├── samples │ │ │ ├── BigThemeSampleInlined.ts │ │ │ ├── ExtractSample.tsx │ │ │ └── theme.ts │ │ └── unbox.test.ts │ ├── package.json │ ├── src │ │ ├── box-factory.ts │ │ ├── box.ts │ │ ├── call-expression.ts │ │ ├── evaluate-node.ts │ │ ├── extract.ts │ │ ├── find-identifier-value-declaration.ts │ │ ├── get-node-range.ts │ │ ├── get-object-literal-expression-prop-pairs.ts │ │ ├── get-property-name.ts │ │ ├── get-typeof-literal.ts │ │ ├── index.ts │ │ ├── jsx-attribute.ts │ │ ├── jsx-element-props.ts │ │ ├── jsx-spread-attribute.ts │ │ ├── maybe-box-node.ts │ │ ├── object-like-to-map.ts │ │ ├── to-box-node.ts │ │ ├── types.ts │ │ ├── unbox.ts │ │ └── utils.ts │ └── tsconfig.json ├── fixture │ ├── CHANGELOG.md │ ├── package.json │ ├── src │ │ ├── config.ts │ │ ├── create-context.ts │ │ ├── index.ts │ │ ├── layers.ts │ │ ├── recipes.ts │ │ ├── semantic-tokens.ts │ │ └── slot-recipes.ts │ └── tsconfig.json ├── generator │ ├── CHANGELOG.md │ ├── __tests__ │ │ ├── cleanup-selector.test.ts │ │ ├── css-fn.test.ts │ │ ├── generate-css-fn.test.ts │ │ ├── generate-keyframes.test.ts │ │ ├── generate-pattern.test.ts │ │ ├── generate-prop-types.test.ts │ │ ├── generate-recipe.test.ts │ │ ├── generate-reset.test.ts │ │ ├── generate-style-props.test.ts │ │ ├── generate-themes.test.ts │ │ ├── generate-token-dts.test.ts │ │ ├── generate-token-js.test.ts │ │ ├── generate-token.test.ts │ │ └── setup-artifacts.test.ts │ ├── package.json │ ├── src │ │ ├── artifacts │ │ │ ├── css │ │ │ │ ├── global-css.ts │ │ │ │ ├── keyframe-css.ts │ │ │ │ ├── parser-css.ts │ │ │ │ ├── reset-css.ts │ │ │ │ ├── static-css.ts │ │ │ │ └── token-css.ts │ │ │ ├── generated │ │ │ │ ├── astish.mjs.json │ │ │ │ ├── composition.d.ts.json │ │ │ │ ├── csstype.d.ts.json │ │ │ │ ├── helpers.mjs.json │ │ │ │ ├── is-valid-prop.mjs.json │ │ │ │ ├── normalize-html.mjs.json │ │ │ │ ├── parts.d.ts.json │ │ │ │ ├── pattern.d.ts.json │ │ │ │ ├── recipe.d.ts.json │ │ │ │ ├── selectors.d.ts.json │ │ │ │ ├── static-css.d.ts.json │ │ │ │ └── system-types.d.ts.json │ │ │ ├── index.ts │ │ │ ├── js │ │ │ │ ├── conditions.string-literal.ts │ │ │ │ ├── conditions.ts │ │ │ │ ├── css-fn.string-literal.ts │ │ │ │ ├── css-fn.ts │ │ │ │ ├── cva.ts │ │ │ │ ├── cx.ts │ │ │ │ ├── helpers.ts │ │ │ │ ├── is-valid-prop.ts │ │ │ │ ├── jsx-helper.ts │ │ │ │ ├── pattern.ts │ │ │ │ ├── recipe.ts │ │ │ │ ├── sva.ts │ │ │ │ ├── themes.ts │ │ │ │ └── token.ts │ │ │ ├── jsx.ts │ │ │ ├── preact-jsx │ │ │ │ ├── index.ts │ │ │ │ ├── jsx.string-literal.ts │ │ │ │ ├── jsx.ts │ │ │ │ ├── pattern.ts │ │ │ │ ├── types.string-literal.ts │ │ │ │ └── types.ts │ │ │ ├── qwik-jsx │ │ │ │ ├── index.ts │ │ │ │ ├── jsx.string-literal.ts │ │ │ │ ├── jsx.ts │ │ │ │ ├── pattern.ts │ │ │ │ ├── types.string-literal.ts │ │ │ │ └── types.ts │ │ │ ├── react-jsx │ │ │ │ ├── index.ts │ │ │ │ ├── jsx.string-literal.ts │ │ │ │ ├── jsx.ts │ │ │ │ ├── pattern.ts │ │ │ │ ├── types.string-literal.ts │ │ │ │ └── types.ts │ │ │ ├── setup-artifacts.ts │ │ │ ├── solid-jsx │ │ │ │ ├── index.ts │ │ │ │ ├── jsx.string-literal.ts │ │ │ │ ├── jsx.ts │ │ │ │ ├── pattern.ts │ │ │ │ ├── types.string-literal.ts │ │ │ │ └── types.ts │ │ │ ├── types │ │ │ │ ├── generated.ts │ │ │ │ ├── main.ts │ │ │ │ ├── prop-types.ts │ │ │ │ ├── style-props.ts │ │ │ │ └── token-types.ts │ │ │ └── vue-jsx │ │ │ │ ├── jsx.string-literal.ts │ │ │ │ ├── jsx.ts │ │ │ │ ├── pattern.ts │ │ │ │ ├── types.string-literal.ts │ │ │ │ └── types.ts │ │ ├── generator.ts │ │ └── index.ts │ └── tsconfig.json ├── is-valid-prop │ ├── CHANGELOG.md │ ├── package.json │ ├── scripts │ │ ├── mdn-data.d.ts │ │ ├── postbuild.ts │ │ ├── prepare.ts │ │ └── svg.ts │ ├── src │ │ └── index.ts │ └── tsconfig.json ├── logger │ ├── CHANGELOG.md │ ├── package.json │ ├── src │ │ ├── create-logger.ts │ │ ├── index.ts │ │ └── levels.ts │ └── tsconfig.json ├── node │ ├── CHANGELOG.md │ ├── README.md │ ├── __tests__ │ │ ├── diff-engine.test.ts │ │ └── glob-dirname.test.ts │ ├── package.json │ ├── src │ │ ├── analyze.ts │ │ ├── build-info.ts │ │ ├── builder.ts │ │ ├── cli-box.ts │ │ ├── codegen.ts │ │ ├── config.ts │ │ ├── cpu-profile.ts │ │ ├── create-context.ts │ │ ├── cssgen.ts │ │ ├── debug.ts │ │ ├── diff-engine.ts │ │ ├── generate.ts │ │ ├── git-ignore.ts │ │ ├── glob-dirname.ts │ │ ├── index.ts │ │ ├── load-tsconfig.ts │ │ ├── logstream.ts │ │ ├── node-runtime.ts │ │ ├── output-engine.ts │ │ ├── parse-dependency.ts │ │ ├── parse-glob.ts │ │ └── setup-config.ts │ ├── tsconfig.build.json │ └── tsconfig.json ├── parser │ ├── CHANGELOG.md │ ├── __tests__ │ │ ├── ast-dynamic.test.ts │ │ ├── css-2.test.ts │ │ ├── css-prop.test.ts │ │ ├── css-raw.test.ts │ │ ├── css.test.ts │ │ ├── cva.test.ts │ │ ├── fixture.ts │ │ ├── import-map.test.ts │ │ ├── import.test.ts │ │ ├── jsx-pattern.test.ts │ │ ├── jsx-recipe.test.ts │ │ ├── jsx.test.ts │ │ ├── namespace.test.ts │ │ ├── output.test.ts │ │ ├── patterns.test.ts │ │ ├── preset-patterns.test.ts │ │ ├── static-css.test.ts │ │ ├── string-literal.test.ts │ │ ├── styled.test.ts │ │ ├── sva.test.ts │ │ ├── svelte.test.ts │ │ ├── ts-eval.bench.ts │ │ └── vue.test.ts │ ├── package.json │ ├── src │ │ ├── classify.ts │ │ ├── get-import-declarations.ts │ │ ├── get-module-specifier-value.ts │ │ ├── index.ts │ │ ├── parser-result.ts │ │ ├── parser.ts │ │ ├── project.ts │ │ ├── svelte-to-tsx.ts │ │ └── vue-to-tsx.ts │ └── tsconfig.json ├── postcss │ ├── CHANGELOG.md │ ├── __tests__ │ │ ├── postcss.test.ts │ │ └── samples │ │ │ └── panda.config.cjs │ ├── package.json │ ├── src │ │ └── index.ts │ └── tsconfig.json ├── preset-atlaskit │ ├── CHANGELOG.md │ ├── package.json │ ├── src │ │ ├── breakpoints.ts │ │ ├── colors │ │ │ ├── core.ts │ │ │ ├── neutral.ts │ │ │ └── semantic.ts │ │ ├── index.ts │ │ ├── motion.ts │ │ ├── radii.ts │ │ ├── shadows.ts │ │ ├── sizes.ts │ │ ├── spacing.ts │ │ └── typography.ts │ └── tsconfig.json ├── preset-base │ ├── CHANGELOG.md │ ├── __tests__ │ │ └── utility.test.ts │ ├── package.json │ ├── src │ │ ├── color-mix-transform.ts │ │ ├── conditions.ts │ │ ├── global-css.ts │ │ ├── global-vars.ts │ │ ├── index.ts │ │ ├── patterns.ts │ │ └── utilities │ │ │ ├── background.ts │ │ │ ├── border.ts │ │ │ ├── container.ts │ │ │ ├── cursor.ts │ │ │ ├── display.ts │ │ │ ├── divide.ts │ │ │ ├── effects.ts │ │ │ ├── flex-and-grid.ts │ │ │ ├── gradient.ts │ │ │ ├── helpers.ts │ │ │ ├── index.ts │ │ │ ├── interactivity.ts │ │ │ ├── layout.ts │ │ │ ├── list.ts │ │ │ ├── outline.ts │ │ │ ├── polyfill.ts │ │ │ ├── sizing.ts │ │ │ ├── spacing.ts │ │ │ ├── svg.ts │ │ │ ├── tables.ts │ │ │ ├── transforms.ts │ │ │ ├── transitions.ts │ │ │ └── typography.ts │ └── tsconfig.json ├── preset-open-props │ ├── CHANGELOG.md │ ├── __tests__ │ │ ├── borders.test.ts │ │ ├── fonts.test.ts │ │ ├── gradients.test.ts │ │ ├── keyframes.test.ts │ │ ├── shadows.test.ts │ │ └── tokens.test.ts │ ├── package.json │ ├── src │ │ ├── assets.ts │ │ ├── borders.ts │ │ ├── breakpoints.ts │ │ ├── colors.ts │ │ ├── gradients.ts │ │ ├── index.ts │ │ ├── keyframes.ts │ │ ├── shadows.ts │ │ ├── sizes.ts │ │ ├── tokens.ts │ │ ├── typography.ts │ │ ├── utilities.ts │ │ ├── utils.ts │ │ └── zIndex.ts │ └── tsconfig.json ├── preset-panda │ ├── CHANGELOG.md │ ├── package.json │ ├── src │ │ ├── aspect-ratios.ts │ │ ├── borders.ts │ │ ├── breakpoints.ts │ │ ├── colors.ts │ │ ├── containers.ts │ │ ├── index.ts │ │ ├── keyframes.ts │ │ ├── shadows.ts │ │ ├── sizes.ts │ │ ├── spacing.ts │ │ ├── tokens.ts │ │ └── typography.ts │ └── tsconfig.json ├── reporter │ ├── CHANGELOG.md │ ├── __tests__ │ │ └── reporter.test.ts │ ├── package.json │ ├── src │ │ ├── index.ts │ │ ├── report-format.ts │ │ ├── reporter-recipe.ts │ │ ├── reporter-token.ts │ │ ├── reporter.ts │ │ └── wordwrapjs.d.ts │ └── tsconfig.json ├── shared │ ├── CHANGELOG.md │ ├── __tests__ │ │ ├── arbitrary-value.test.ts │ │ ├── astish.test.ts │ │ ├── cache-map.test.ts │ │ ├── css-var.test.ts │ │ ├── deep-set.test.ts │ │ ├── esc.test.ts │ │ ├── merge-props.test.ts │ │ ├── property-priority.test.ts │ │ ├── slots.test.ts │ │ ├── split-props.test.ts │ │ ├── split.test.ts │ │ ├── string-literal.test.ts │ │ ├── traverse.test.ts │ │ └── walk-object.test.ts │ ├── package.json │ ├── scripts │ │ └── postbuild.ts │ ├── src │ │ ├── arbitrary-value.ts │ │ ├── assert.ts │ │ ├── assign.ts │ │ ├── astish.ts │ │ ├── cache-map.ts │ │ ├── calc.ts │ │ ├── camelcase-property.ts │ │ ├── capitalize.ts │ │ ├── classname.ts │ │ ├── compact.ts │ │ ├── condition.ts │ │ ├── css-var.ts │ │ ├── deep-set.ts │ │ ├── entries.ts │ │ ├── error.ts │ │ ├── esc.ts │ │ ├── flatten.ts │ │ ├── get-or-create-set.ts │ │ ├── hash.ts │ │ ├── hypenate-property.ts │ │ ├── important.ts │ │ ├── index.ts │ │ ├── is-css-function.ts │ │ ├── is-css-unit.ts │ │ ├── is-css-var.ts │ │ ├── memo.ts │ │ ├── merge-props.ts │ │ ├── merge-with.ts │ │ ├── normalize-html.ts │ │ ├── normalize-style-object.ts │ │ ├── omit.ts │ │ ├── panda-config-name.ts │ │ ├── pattern-fns.ts │ │ ├── regex.ts │ │ ├── serialize.ts │ │ ├── shared.ts │ │ ├── shorthand-properties.ts │ │ ├── slot.ts │ │ ├── split-props.ts │ │ ├── split.ts │ │ ├── to-json.ts │ │ ├── traverse.ts │ │ ├── typegen.ts │ │ ├── uniq.ts │ │ ├── unit-conversion.ts │ │ └── walk-object.ts │ ├── tsconfig.json │ └── tsup.config.ts ├── studio │ ├── CHANGELOG.md │ ├── __tests__ │ │ ├── components │ │ │ └── colors.test.tsx │ │ └── fixtures │ │ │ └── semantic-tokens-park-ui.json │ ├── astro.config.mjs │ ├── package.json │ ├── panda.config.ts │ ├── public │ │ └── favicon.svg │ ├── scripts │ │ └── studio.ts │ ├── src │ │ ├── components │ │ │ ├── color-constrast.tsx │ │ │ ├── color-wrapper.tsx │ │ │ ├── colors.tsx │ │ │ ├── empty-state.tsx │ │ │ ├── font-family.tsx │ │ │ ├── font-tokens.tsx │ │ │ ├── head.astro │ │ │ ├── icons.tsx │ │ │ ├── input.tsx │ │ │ ├── layer-styles.tsx │ │ │ ├── overview.tsx │ │ │ ├── radii.tsx │ │ │ ├── semantic-color.tsx │ │ │ ├── side-nav-item.astro │ │ │ ├── side-nav.astro │ │ │ ├── sizes.tsx │ │ │ ├── sticky-top.tsx │ │ │ ├── test-score.tsx │ │ │ ├── text-styles.tsx │ │ │ ├── theme-toggle.astro │ │ │ ├── token-content.tsx │ │ │ ├── token-group.tsx │ │ │ └── typography-playground.tsx │ │ ├── env.d.ts │ │ ├── icons │ │ │ ├── logo.tsx │ │ │ ├── moon.tsx │ │ │ ├── sun.tsx │ │ │ └── yums.tsx │ │ ├── layouts │ │ │ ├── Layout.astro │ │ │ └── Sidebar.astro │ │ ├── lib │ │ │ ├── color-contrast-checker.ts │ │ │ ├── color.ts │ │ │ ├── constants.ts │ │ │ ├── group-in.ts │ │ │ ├── panda-context.ts │ │ │ ├── pick.ts │ │ │ ├── sizes-sort.ts │ │ │ ├── truncate.ts │ │ │ ├── url.ts │ │ │ ├── use-color-docs.ts │ │ │ └── virtual-panda.d.ts │ │ └── pages │ │ │ ├── colors.astro │ │ │ ├── font-sizes.astro │ │ │ ├── font-weights.astro │ │ │ ├── fonts.astro │ │ │ ├── index.astro │ │ │ ├── layer-styles.astro │ │ │ ├── letter-spacings.astro │ │ │ ├── line-heights.astro │ │ │ ├── playground │ │ │ ├── contrast-checker.astro │ │ │ └── typography.astro │ │ │ ├── radii.astro │ │ │ ├── sizes.astro │ │ │ ├── spacing.astro │ │ │ └── text-styles.astro │ ├── styled-system │ │ ├── css │ │ │ ├── conditions.mjs │ │ │ ├── css.d.ts │ │ │ ├── css.mjs │ │ │ ├── cva.d.ts │ │ │ ├── cva.mjs │ │ │ ├── cx.d.ts │ │ │ ├── cx.mjs │ │ │ ├── index.d.ts │ │ │ ├── index.mjs │ │ │ ├── sva.d.ts │ │ │ └── sva.mjs │ │ ├── helpers.mjs │ │ ├── jsx │ │ │ ├── aspect-ratio.d.ts │ │ │ ├── aspect-ratio.mjs │ │ │ ├── bleed.d.ts │ │ │ ├── bleed.mjs │ │ │ ├── box.d.ts │ │ │ ├── box.mjs │ │ │ ├── center.d.ts │ │ │ ├── center.mjs │ │ │ ├── circle.d.ts │ │ │ ├── circle.mjs │ │ │ ├── container.d.ts │ │ │ ├── container.mjs │ │ │ ├── cq.d.ts │ │ │ ├── cq.mjs │ │ │ ├── divider.d.ts │ │ │ ├── divider.mjs │ │ │ ├── factory-helper.mjs │ │ │ ├── factory.d.ts │ │ │ ├── factory.mjs │ │ │ ├── flex.d.ts │ │ │ ├── flex.mjs │ │ │ ├── float.d.ts │ │ │ ├── float.mjs │ │ │ ├── grid-item.d.ts │ │ │ ├── grid-item.mjs │ │ │ ├── grid.d.ts │ │ │ ├── grid.mjs │ │ │ ├── hstack.d.ts │ │ │ ├── hstack.mjs │ │ │ ├── index.d.ts │ │ │ ├── index.mjs │ │ │ ├── is-valid-prop.d.ts │ │ │ ├── is-valid-prop.mjs │ │ │ ├── link-box.d.ts │ │ │ ├── link-box.mjs │ │ │ ├── link-overlay.d.ts │ │ │ ├── link-overlay.mjs │ │ │ ├── spacer.d.ts │ │ │ ├── spacer.mjs │ │ │ ├── square.d.ts │ │ │ ├── square.mjs │ │ │ ├── stack.d.ts │ │ │ ├── stack.mjs │ │ │ ├── visually-hidden.d.ts │ │ │ ├── visually-hidden.mjs │ │ │ ├── vstack.d.ts │ │ │ ├── vstack.mjs │ │ │ ├── wrap.d.ts │ │ │ └── wrap.mjs │ │ ├── patterns │ │ │ ├── aspect-ratio.d.ts │ │ │ ├── aspect-ratio.mjs │ │ │ ├── bleed.d.ts │ │ │ ├── bleed.mjs │ │ │ ├── box.d.ts │ │ │ ├── box.mjs │ │ │ ├── center.d.ts │ │ │ ├── center.mjs │ │ │ ├── circle.d.ts │ │ │ ├── circle.mjs │ │ │ ├── container.d.ts │ │ │ ├── container.mjs │ │ │ ├── cq.d.ts │ │ │ ├── cq.mjs │ │ │ ├── divider.d.ts │ │ │ ├── divider.mjs │ │ │ ├── flex.d.ts │ │ │ ├── flex.mjs │ │ │ ├── float.d.ts │ │ │ ├── float.mjs │ │ │ ├── grid-item.d.ts │ │ │ ├── grid-item.mjs │ │ │ ├── grid.d.ts │ │ │ ├── grid.mjs │ │ │ ├── hstack.d.ts │ │ │ ├── hstack.mjs │ │ │ ├── index.d.ts │ │ │ ├── index.mjs │ │ │ ├── link-box.d.ts │ │ │ ├── link-box.mjs │ │ │ ├── link-overlay.d.ts │ │ │ ├── link-overlay.mjs │ │ │ ├── spacer.d.ts │ │ │ ├── spacer.mjs │ │ │ ├── square.d.ts │ │ │ ├── square.mjs │ │ │ ├── stack.d.ts │ │ │ ├── stack.mjs │ │ │ ├── visually-hidden.d.ts │ │ │ ├── visually-hidden.mjs │ │ │ ├── vstack.d.ts │ │ │ ├── vstack.mjs │ │ │ ├── wrap.d.ts │ │ │ └── wrap.mjs │ │ ├── styles.css │ │ ├── tokens │ │ │ ├── index.d.ts │ │ │ ├── index.mjs │ │ │ └── tokens.d.ts │ │ └── types │ │ │ ├── composition.d.ts │ │ │ ├── conditions.d.ts │ │ │ ├── csstype.d.ts │ │ │ ├── global.d.ts │ │ │ ├── index.d.ts │ │ │ ├── jsx.d.ts │ │ │ ├── parts.d.ts │ │ │ ├── pattern.d.ts │ │ │ ├── prop-type.d.ts │ │ │ ├── recipe.d.ts │ │ │ ├── selectors.d.ts │ │ │ ├── static-css.d.ts │ │ │ ├── style-props.d.ts │ │ │ └── system-types.d.ts │ └── tsconfig.json ├── token-dictionary │ ├── CHANGELOG.md │ ├── __tests__ │ │ ├── alias.test.ts │ │ ├── checkbox.svg │ │ ├── color-mix.test.ts │ │ ├── color-palette.test.ts │ │ ├── colors.test.ts │ │ ├── default.test.ts │ │ ├── expand-references.test.ts │ │ ├── format-by-category.test.ts │ │ ├── format-flat.test.ts │ │ ├── format-getter.test.ts │ │ ├── format-token-name.test.ts │ │ ├── format-vars.test.ts │ │ ├── middleware.test.ts │ │ ├── semantic-token.test.ts │ │ ├── spacing.test.ts │ │ ├── tokens.test.ts │ │ ├── transform-asset.test.ts │ │ ├── transform-border.test.ts │ │ ├── transform-gradient.test.ts │ │ └── transform-shadow.test.ts │ ├── package.json │ ├── src │ │ ├── dictionary.ts │ │ ├── expand-token-references.ts │ │ ├── index.ts │ │ ├── is-composite.ts │ │ ├── middleware.ts │ │ ├── mini-svg-uri.ts │ │ ├── token.ts │ │ ├── transform.ts │ │ └── utils.ts │ └── tsconfig.json └── types │ ├── CHANGELOG.md │ ├── package.json │ ├── scripts │ ├── build.ts │ ├── postbuild.ts │ ├── save-csstype-comments.ts │ └── watch.ts │ ├── src │ ├── artifact.ts │ ├── composition.ts │ ├── conditions.ts │ ├── config.ts │ ├── csstype.d.ts │ ├── hooks-api.ts │ ├── hooks.ts │ ├── index.ts │ ├── logger.ts │ ├── parser.ts │ ├── parts.ts │ ├── pattern.ts │ ├── prop-type.ts │ ├── recipe.ts │ ├── reporter.ts │ ├── runtime.ts │ ├── selectors.ts │ ├── shared.ts │ ├── static-css.ts │ ├── style-props.ts │ ├── style-rules.ts │ ├── system-types.ts │ ├── theme.ts │ ├── tokens.ts │ └── utility.ts │ └── tsconfig.json ├── playground ├── .eslintignore ├── .eslintrc.json ├── .gitignore ├── .vscode │ └── settings.json ├── module.shim.ts ├── next.config.js ├── package.json ├── panda.config.ts ├── postcss.config.js ├── prisma │ └── schema.prisma ├── public │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── apple-touch-icon.png │ ├── favicon.ico │ ├── og-image.png │ └── site.webmanifest ├── scripts │ ├── bundle-types.mts │ └── panda-types.ts ├── seo.config.ts ├── src │ ├── app │ │ ├── [id] │ │ │ ├── [id2] │ │ │ │ └── page.tsx │ │ │ └── page.tsx │ │ ├── cdn │ │ │ ├── _route.ts │ │ │ └── dev-runtime.ts │ │ ├── layout.tsx │ │ └── page.tsx │ ├── client │ │ └── prisma.ts │ ├── components │ │ ├── ASTViewer-row.tsx │ │ ├── ASTViewer.tsx │ │ ├── ArtifactsPanel.tsx │ │ ├── ColorModeSwitch.tsx │ │ ├── Editor.tsx │ │ ├── Examples │ │ │ ├── data.ts │ │ │ ├── index.tsx │ │ │ └── utils.ts │ │ ├── GeneratedCss.tsx │ │ ├── LayoutControl.tsx │ │ ├── Logo.tsx │ │ ├── Playground.tsx │ │ ├── PlaygroundContent.tsx │ │ ├── Preview │ │ │ ├── BreakpointControl.tsx │ │ │ ├── index.tsx │ │ │ └── responsive-border.ts │ │ ├── ToastProvider.tsx │ │ ├── Toolbar.tsx │ │ ├── icons.tsx │ │ └── providers.tsx │ ├── dts │ │ ├── @pandacss_dev.d.ts │ │ ├── @pandacss_types.d.ts │ │ └── react.d.ts │ ├── hooks │ │ ├── useConfig.ts │ │ ├── useEditor.ts │ │ ├── usePanda.ts │ │ ├── usePandaContext.ts │ │ ├── usePlayground.ts │ │ ├── usePreview.ts │ │ └── useResponsiveView.ts │ ├── lib │ │ ├── auto-import.ts │ │ ├── config │ │ │ ├── compile.ts │ │ │ ├── compile.worker.ts │ │ │ ├── eval-config.ts │ │ │ ├── get-imports.ts │ │ │ └── resolve-config.ts │ │ ├── gruvbox-theme.ts │ │ ├── parse-state.ts │ │ └── typings-source-resolver.ts │ ├── pages │ │ └── api │ │ │ └── share.ts │ └── styles │ │ └── globals.css ├── theme │ └── recipes │ │ ├── button.ts │ │ ├── index.ts │ │ ├── menu.ts │ │ ├── segment-group.ts │ │ ├── splitter.ts │ │ └── toast.ts └── tsconfig.json ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── release-process.md ├── renovate.json ├── sandbox ├── astro │ ├── README.md │ ├── astro.config.mjs │ ├── package.json │ ├── panda.config.ts │ ├── panda.css │ ├── postcss.config.cjs │ ├── src │ │ ├── components │ │ │ ├── Card.astro │ │ │ └── button.tsx │ │ ├── env.d.ts │ │ ├── layouts │ │ │ └── Layout.astro │ │ └── pages │ │ │ └── index.astro │ └── tsconfig.json ├── codegen │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── CHANGELOG.md │ ├── README.md │ ├── __tests__ │ │ ├── css.test.ts │ │ ├── cva.test.ts │ │ ├── frameworks │ │ │ ├── preact.styled-factory.test.tsx │ │ │ ├── qwik.styled-factory.test.tsx │ │ │ ├── solid.styled-factory.test.tsx │ │ │ └── vue.styled-factory.test.tsx │ │ ├── recipe.test.ts │ │ ├── scenarios │ │ │ ├── format-names.test.tsx │ │ │ ├── jsx-minimal.test.tsx │ │ │ ├── jsx-none.test.tsx │ │ │ ├── strict-property-values.test.ts │ │ │ ├── strict-tokens.test.ts │ │ │ └── strict.test.ts │ │ ├── slot-recipe.test.ts │ │ ├── styled-factory.test.tsx │ │ └── sva.test.ts │ ├── cli.ts │ ├── index.html │ ├── package.json │ ├── panda.config.ts │ ├── panda.format-names.config.ts │ ├── panda.jsx-minimal.config.ts │ ├── panda.jsx-none.config.ts │ ├── panda.preact.config.ts │ ├── panda.qwik.config.ts │ ├── panda.react.config.ts │ ├── panda.solid.config.ts │ ├── panda.strict-property-values.config.ts │ ├── panda.strict-tokens.config.ts │ ├── panda.strict.config.ts │ ├── panda.vue.config.ts │ ├── postcss.config.cjs │ ├── preset.ts │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── vite.config.ts │ └── vitest.config.ts ├── component-lib │ ├── README.md │ └── nuxt-lib-source │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── README.md │ │ ├── package.json │ │ └── packages │ │ ├── css-lib │ │ ├── package.json │ │ ├── panda.config.ts │ │ └── src │ │ │ └── button.ts │ │ └── nuxt-app │ │ ├── .gitignore │ │ ├── app.vue │ │ ├── assets │ │ └── main.css │ │ ├── components │ │ └── Demo1.vue │ │ ├── nuxt.config.ts │ │ ├── package.json │ │ ├── pages │ │ └── index.tsx │ │ ├── panda.config.ts │ │ ├── public │ │ └── favicon.ico │ │ └── tsconfig.json ├── docusaurus-ts │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── blog │ │ ├── 2019-05-28-first-blog-post.md │ │ ├── 2019-05-29-long-blog-post.md │ │ ├── 2021-08-01-mdx-blog-post.mdx │ │ ├── 2021-08-26-welcome │ │ │ ├── docusaurus-plushie-banner.jpeg │ │ │ └── index.md │ │ ├── authors.yml │ │ └── tags.yml │ ├── docs │ │ ├── intro.md │ │ ├── tutorial-basics │ │ │ ├── _category_.json │ │ │ ├── congratulations.md │ │ │ ├── create-a-blog-post.md │ │ │ ├── create-a-document.md │ │ │ ├── create-a-page.md │ │ │ ├── deploy-your-site.md │ │ │ └── markdown-features.mdx │ │ └── tutorial-extras │ │ │ ├── _category_.json │ │ │ ├── img │ │ │ ├── docsVersionDropdown.png │ │ │ └── localeDropdown.png │ │ │ ├── manage-docs-versions.md │ │ │ └── translate-your-site.md │ ├── docusaurus.config.ts │ ├── package.json │ ├── panda.config.ts │ ├── sidebars.ts │ ├── src │ │ ├── components │ │ │ └── HomepageFeatures │ │ │ │ └── index.tsx │ │ ├── css │ │ │ └── custom.css │ │ └── pages │ │ │ ├── index.tsx │ │ │ └── markdown-page.md │ ├── static │ │ ├── .nojekyll │ │ └── img │ │ │ ├── docusaurus-social-card.jpg │ │ │ ├── docusaurus.png │ │ │ ├── favicon.ico │ │ │ ├── logo.svg │ │ │ ├── undraw_docusaurus_mountain.svg │ │ │ ├── undraw_docusaurus_react.svg │ │ │ └── undraw_docusaurus_tree.svg │ └── tsconfig.json ├── gatsby-ts │ ├── .eslintrc │ ├── .gitignore │ ├── README.md │ ├── gatsby-browser.ts │ ├── gatsby-config.ts │ ├── package.json │ ├── panda.config.ts │ ├── postcss.config.cjs │ ├── src │ │ ├── images │ │ │ └── icon.png │ │ ├── pages │ │ │ ├── 404.tsx │ │ │ └── index.tsx │ │ └── styles │ │ │ └── index.css │ └── tsconfig.json ├── next-js-app │ ├── .eslintrc.json │ ├── .gitignore │ ├── README.md │ ├── next.config.js │ ├── package.json │ ├── panda.config.ts │ ├── postcss.config.cjs │ ├── src │ │ └── app │ │ │ ├── favicon.ico │ │ │ ├── globals.css │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ └── tsconfig.json ├── next-js-pages │ ├── .eslintrc.json │ ├── .gitignore │ ├── README.md │ ├── next.config.js │ ├── package.json │ ├── panda.config.ts │ ├── postcss.config.cjs │ ├── src │ │ ├── pages │ │ │ ├── _app.tsx │ │ │ ├── _document.tsx │ │ │ └── index.tsx │ │ └── styles │ │ │ └── globals.css │ └── tsconfig.json ├── nuxt │ ├── .gitignore │ ├── .npmrc │ ├── README.md │ ├── app.vue │ ├── assets │ │ └── main.css │ ├── components │ │ ├── CompositionApiDemo.vue │ │ ├── SetupDemo.vue │ │ ├── Styled.vue │ │ └── VModel.vue │ ├── nuxt.config.ts │ ├── package.json │ ├── pages │ │ └── index.tsx │ ├── panda.config.ts │ ├── public │ │ └── favicon.ico │ └── tsconfig.json ├── preact-ts │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── panda.config.ts │ ├── postcss.config.cjs │ ├── public │ │ └── vite.svg │ ├── recipes │ │ ├── aaa.ts │ │ ├── bbb.ts │ │ ├── ccc.ts │ │ └── ddd-fff.ts │ ├── src │ │ ├── app.tsx │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── qwik-ts │ ├── .eslintignore │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── .prettierignore │ ├── README.md │ ├── package.json │ ├── panda.config.ts │ ├── pnpm-lock.yaml │ ├── postcss.config.cjs │ ├── public │ │ ├── favicon.svg │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── components │ │ │ ├── footer.tsx │ │ │ ├── head.tsx │ │ │ ├── header.tsx │ │ │ └── qwik-logo.tsx │ │ ├── entry.dev.tsx │ │ ├── entry.preview.tsx │ │ ├── entry.ssr.tsx │ │ ├── global.css │ │ ├── root.tsx │ │ └── routes │ │ │ ├── index.tsx │ │ │ ├── layout.tsx │ │ │ └── service-worker.ts │ ├── tsconfig.json │ └── vite.config.ts ├── remix │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── app │ │ ├── components │ │ │ ├── Badge.tsx │ │ │ └── Button.tsx │ │ ├── entry.client.tsx │ │ ├── entry.server.tsx │ │ ├── index.css │ │ ├── root.tsx │ │ └── routes │ │ │ └── _index.tsx │ ├── package.json │ ├── panda.config.ts │ ├── postcss.config.cjs │ ├── public │ │ ├── Dosis-VariableFont_wght.ttf │ │ └── favicon.ico │ ├── remix.config.js │ ├── remix.env.d.ts │ └── tsconfig.json ├── runtime-perf │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── panda.config.ts │ ├── postcss.config.cjs │ ├── src │ │ ├── App.tsx │ │ ├── components │ │ │ ├── button.tsx │ │ │ ├── profiler.tsx │ │ │ └── randomized-buttons.tsx │ │ ├── index.css │ │ └── main.tsx │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── solid-ts │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── panda.config.ts │ ├── pnpm-lock.yaml │ ├── postcss.config.cjs │ ├── src │ │ ├── App.tsx │ │ ├── assets │ │ │ └── favicon.ico │ │ ├── index.css │ │ └── index.tsx │ ├── tsconfig.json │ └── vite.config.ts ├── storybook │ ├── .storybook │ │ ├── main.js │ │ └── preview.js │ ├── index.css │ ├── package.json │ ├── panda.config.ts │ ├── postcss.config.cjs │ └── stories │ │ ├── Button.jsx │ │ └── Button.stories.jsx ├── svelte │ ├── .eslintignore │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── panda.config.ts │ ├── postcss.config.cjs │ ├── src │ │ ├── app.d.ts │ │ ├── app.html │ │ ├── app.postcss │ │ └── routes │ │ │ ├── +layout.svelte │ │ │ └── +page.svelte │ ├── static │ │ └── favicon.png │ ├── svelte.config.js │ ├── tsconfig.json │ └── vite.config.ts ├── vite-ts │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── panda.config.ts │ ├── postcss.config.cjs │ ├── public │ │ └── vite.svg │ ├── remove-unused-css-vars.ts │ ├── remove-unused-keyframes.ts │ ├── some-recipe.ts │ ├── src │ │ ├── App.tsx │ │ ├── Badge.tsx │ │ ├── Button.tsx │ │ ├── Card.tsx │ │ ├── index.css │ │ └── main.tsx │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts └── waku-ts │ ├── package.json │ ├── panda.config.ts │ ├── postcss.config.js │ ├── public │ └── images │ │ └── favicon.png │ ├── src │ ├── components │ │ ├── counter.tsx │ │ ├── error-boundary.tsx │ │ ├── footer.tsx │ │ ├── header.tsx │ │ └── multi-themes.tsx │ ├── entries.tsx │ ├── main.tsx │ ├── styles.css │ └── templates │ │ ├── home-page.tsx │ │ └── root-layout.tsx │ └── tsconfig.json ├── tests-setup.ts ├── tsconfig.build.json ├── tsconfig.json ├── vitest.config.ts └── website ├── .eslintignore ├── .eslintrc.cjs ├── .gitignore ├── .prettierrc ├── README.md ├── app ├── layout.tsx ├── og │ ├── logo.tsx │ ├── mascot.tsx │ └── route.tsx └── page.tsx ├── next-env.d.ts ├── next.config.mjs ├── package.json ├── pages ├── 404.tsx ├── _app.tsx ├── _meta.json └── docs │ ├── _meta.json │ ├── concepts │ ├── _meta.json │ ├── cascade-layers.md │ ├── color-opacity-modifier.md │ ├── conditional-styles.md │ ├── extend.md │ ├── hooks.md │ ├── merging-styles.md │ ├── patterns.mdx │ ├── recipes.md │ ├── responsive-design.md │ ├── slot-recipes.md │ ├── style-props.mdx │ ├── styled-system.mdx │ ├── template-literals.md │ ├── virtual-color.md │ └── writing-styles.md │ ├── customization │ ├── _meta.json │ ├── conditions.mdx │ ├── config-functions.md │ ├── deprecations.md │ ├── patterns.mdx │ ├── presets.md │ ├── theme.mdx │ └── utilities.mdx │ ├── guides │ ├── _meta.json │ ├── component-library.md │ ├── debugging.mdx │ ├── dynamic-styling.md │ ├── fonts.md │ ├── minimal-setup.md │ ├── multiple-themes.md │ └── static.md │ ├── installation │ ├── _meta.json │ ├── angular.mdx │ ├── astro.mdx │ ├── cli.mdx │ ├── ember.mdx │ ├── gatsby.mdx │ ├── nextjs.mdx │ ├── nuxt.mdx │ ├── postcss.mdx │ ├── preact.mdx │ ├── qwik.mdx │ ├── react-router.mdx │ ├── redwood.mdx │ ├── remix.mdx │ ├── solidjs.mdx │ ├── storybook.mdx │ ├── svelte.mdx │ ├── vite.mdx │ └── vue.mdx │ ├── migration │ ├── _meta.json │ ├── stitches.md │ ├── styled-components.md │ └── theme-ui.md │ ├── overview │ ├── _meta.json │ ├── browser-support.md │ ├── faq.md │ ├── getting-started.mdx │ └── why-panda.md │ ├── references │ ├── _meta.json │ ├── cli.md │ └── config.md │ ├── theming │ ├── _meta.json │ ├── animation-styles.md │ ├── layer-styles.md │ ├── text-styles.md │ ├── tokens.md │ └── usage.mdx │ └── utilities │ ├── _meta.json │ ├── background.md │ ├── border.md │ ├── display.md │ ├── divide.md │ ├── effects.md │ ├── flex-and-grid.md │ ├── helpers.md │ ├── interactivity.md │ ├── layout.md │ ├── list.mdx │ ├── outline.md │ ├── sizing.md │ ├── spacing.md │ ├── svg.md │ ├── tables.md │ ├── transforms.md │ ├── transitions.md │ └── typography.md ├── panda.config.ts ├── postcss.config.cjs ├── public ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── apple-touch-icon.png ├── browserconfig.xml ├── community.png ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── mstile-150x150.png ├── og-image.png ├── panda-bubble-tea.svg ├── panda-hello.svg ├── panda-p-letter.svg ├── panda-rocket.svg ├── panda-scooter.svg ├── panda-yoga.svg ├── profiles │ ├── alex-s.png │ ├── anubra.png │ └── ivica-b.png ├── site.webmanifest ├── stately-presets-merging.png └── videos │ ├── building-with-panda.png │ ├── center-circle-square.png │ ├── container-grid-wrap.png │ ├── converting-recipes-to-jsx.png │ ├── installation-and-setup.png │ ├── introduction-to-patterns.png │ ├── introduction-to-recipes.png │ ├── panda-preset.png │ ├── patterns-as-jsx.png │ ├── stack-hstack-vstack.png │ ├── using-recipes.png │ └── what-is-panda.png ├── seo.config.ts ├── src ├── DEFAULT_THEME.tsx ├── components │ ├── code-highlight │ │ ├── code.ts │ │ ├── gruvbox-theme.cjs │ │ ├── tabs.extension.tsx │ │ └── tabs.tsx │ ├── command-prompt.tsx │ ├── course-banner.tsx │ ├── feature-marquee.tsx │ ├── learn-more.tsx │ ├── nav-link.tsx │ ├── navbar.desktop.tsx │ ├── navbar.mobile.tsx │ ├── navbar.tsx │ ├── providers.tsx │ ├── sections │ │ ├── community.tsx │ │ ├── course.tsx │ │ ├── css-in-js.tsx │ │ ├── design-tokens.tsx │ │ ├── footer.tsx │ │ ├── hero.tsx │ │ ├── learn-video-item.tsx │ │ ├── learn-video.tsx │ │ ├── learn-videos.json │ │ ├── learn.tsx │ │ ├── modern-css.tsx │ │ ├── recipes.tsx │ │ ├── start-building.tsx │ │ ├── testimonials.tsx │ │ ├── try-panda.tsx │ │ └── works-everywhere.tsx │ ├── theme-switch-button.tsx │ └── token-docs │ │ ├── breakpoints.tsx │ │ ├── color-grid.tsx │ │ ├── colors.tsx │ │ ├── font-sizes.tsx │ │ ├── fonts.tsx │ │ ├── keyframes.tsx │ │ ├── query.ts │ │ ├── radii.tsx │ │ ├── shadows.tsx │ │ ├── sizings.tsx │ │ └── spacings.tsx ├── constants.tsx ├── env.d.ts ├── icons │ ├── arrow-right.tsx │ ├── astro.tsx │ ├── check.tsx │ ├── copy.tsx │ ├── discord.tsx │ ├── ember.tsx │ ├── expand.tsx │ ├── gatsby.tsx │ ├── github.tsx │ ├── globe.tsx │ ├── index.ts │ ├── information-circle.tsx │ ├── menu.tsx │ ├── moon.tsx │ ├── nextjs.tsx │ ├── preact.tsx │ ├── qwik.tsx │ ├── react-router.tsx │ ├── redwood.tsx │ ├── remix.tsx │ ├── solid.tsx │ ├── spinner.tsx │ ├── storybook.tsx │ ├── sun.tsx │ ├── svelte.tsx │ ├── vite.tsx │ ├── vue.tsx │ ├── word-wrap.tsx │ └── x.tsx ├── index.tsx ├── mdx-components.tsx ├── mdx │ ├── blockquote.tsx │ ├── code-actions.tsx │ ├── code-filename.tsx │ ├── code.tsx │ ├── copy-to-clipboard.tsx │ ├── details.tsx │ ├── divider.tsx │ ├── find-summary.ts │ ├── heading.tsx │ ├── link.tsx │ ├── list.tsx │ ├── pre.tsx │ ├── route-switch.tsx │ ├── steps.tsx │ ├── summary.tsx │ ├── table.tsx │ ├── text.tsx │ ├── token-docs.tsx │ └── use-clipboard.ts ├── nextra │ ├── anchor.tsx │ ├── banner.tsx │ ├── bleed.tsx │ ├── breadcrumb.tsx │ ├── button │ │ ├── button-content.tsx │ │ ├── button-icon.tsx │ │ ├── button.tsx │ │ └── index.tsx │ ├── callout.tsx │ ├── cards.tsx │ ├── collapse.tsx │ ├── contexts │ │ ├── active-anchor.tsx │ │ ├── config.tsx │ │ ├── details.ts │ │ ├── index.ts │ │ └── menu.ts │ ├── file-tree.tsx │ ├── flexsearch.tsx │ ├── footer.tsx │ ├── framework-card.tsx │ ├── head.tsx │ ├── highlight-matches.tsx │ ├── icon-button │ │ ├── icon-button.tsx │ │ └── index.tsx │ ├── index.ts │ ├── input.tsx │ ├── kbd.tsx │ ├── lib │ │ ├── get-git-issue-url.ts │ │ ├── index.ts │ │ ├── render.tsx │ │ └── use-git-edit-url.ts │ ├── locale-switch.tsx │ ├── match-sorter-search.tsx │ ├── nav-links.tsx │ ├── navbar.tsx │ ├── not-found.tsx │ ├── search.tsx │ ├── select.tsx │ ├── server-side-error.tsx │ ├── sidebar │ │ ├── index.ts │ │ ├── sidebar-backdrop.tsx │ │ ├── sidebar-body.tsx │ │ ├── sidebar-container.tsx │ │ ├── sidebar-footer.tsx │ │ ├── sidebar-header.tsx │ │ ├── sidebar-placeholder.tsx │ │ └── sidebar.tsx │ ├── skip-nav.tsx │ ├── steps.tsx │ ├── tabs │ │ ├── index.ts │ │ ├── tabs-store.ts │ │ ├── tabs.tsx │ │ └── use-tabs.ts │ ├── theme-switch.tsx │ ├── toc.tsx │ └── treeview │ │ ├── index.ts │ │ ├── treeview-context.tsx │ │ ├── treeview-file.tsx │ │ ├── treeview-folder.tsx │ │ ├── treeview-link.tsx │ │ ├── treeview-list.tsx │ │ ├── treeview-menu.tsx │ │ ├── treeview-separator.tsx │ │ └── treeview.tsx ├── public-url.ts ├── resize-polyfill.ts └── types.ts ├── styles ├── Mona-Sans-Bold.ttf ├── Mona-Sans.ttf ├── Mona-Sans.woff ├── Mona-Sans.woff2 ├── fonts.ts ├── global.css └── panda.css ├── theme.config.tsx ├── theme ├── colors.ts ├── global-css.ts ├── icons.tsx ├── layer-styles.ts ├── recipes │ ├── button.recipe.ts │ ├── callout.recipe.ts │ ├── card.recipe.ts │ ├── code-tabs.recipe.ts │ ├── index.ts │ ├── input.recipe.ts │ ├── navbar.recipe.ts │ ├── nextra-banner.recipe.ts │ └── nextra-tabs.recipe.ts ├── semantic-tokens.ts ├── text-styles.ts └── tokens.ts └── tsconfig.json /.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 | -------------------------------------------------------------------------------- /.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", "@pandacss/fixture"] 11 | } 12 | -------------------------------------------------------------------------------- /.changeset/old-hornets-mix.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@pandacss/generator': patch 3 | --- 4 | 5 | Fix TS generated pattern dts code when `strict: true` is set. 6 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.github/assets/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/.github/assets/banner.png -------------------------------------------------------------------------------- /.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 | .vercel 22 | 23 | ## Panda 24 | styled-system 25 | styled-system-static 26 | panda 27 | panda-static 28 | outdir 29 | ts-import-map-outdir 30 | 31 | !packages/studio/styled-system 32 | packages/studio/src/lib/analysis.json 33 | -------------------------------------------------------------------------------- /.husky/_/.gitignore: -------------------------------------------------------------------------------- 1 | * -------------------------------------------------------------------------------- /.husky/_/husky.sh: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/.husky/_/husky.sh -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | npx lint-staged 2 | -------------------------------------------------------------------------------- /.ncurc.json: -------------------------------------------------------------------------------- 1 | { 2 | "reject": ["prettier", "mime", "npm-packlist", "@types/mime", "@types/npm-packlist"] 3 | } 4 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | ignore-workspace-root-check=true 2 | strict-peer-dependencies=false 3 | auto-install-peers=true 4 | # 5 | link-workspace-packages=true 6 | prefer-workspace-packages=true 7 | package-manager-strict=false 8 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | coverage 4 | .next 5 | build 6 | *.hbs 7 | *.d.ts 8 | packages/studio/styled-system 9 | packages/generator/src/artifacts/generated 10 | packages/config/__tests__/samples/ts-import-map/ts-import-map-outdir/** 11 | packages/config/__tests__/samples/ts-import-map-one-source/outdir/** 12 | website/pages/**/*.mdx 13 | .draft/**/*.mdx 14 | styled-system -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib", 3 | "eslint.workingDirectories": ["./packages/**", "./sandbox/**", "./sandbox/next-js"] 4 | } 5 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /assets/logo-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/assets/logo-black.png -------------------------------------------------------------------------------- /assets/logo-main.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/assets/logo-main.png -------------------------------------------------------------------------------- /assets/logo-on-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/assets/logo-on-black.png -------------------------------------------------------------------------------- /assets/logo-on-yellow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/assets/logo-on-yellow.png -------------------------------------------------------------------------------- /packages/astro-plugin-studio/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/cli/README.md: -------------------------------------------------------------------------------- 1 | # Panda CLI 2 | 3 | [Panda](https://panda-css.com/) is a CSS-in-JS tool with build time generated styles, RSC compatible, multi-variant 4 | support, and best-in-class developer experience. 5 | 6 | This package is the CLI - documentation can be found at https://panda-css.com/docs/installation/cli. 7 | -------------------------------------------------------------------------------- /packages/cli/__tests__/.gitignore: -------------------------------------------------------------------------------- 1 | samples 2 | 3 | ## Panda 4 | styled-system 5 | styled-system-studio 6 | -------------------------------------------------------------------------------- /packages/cli/__tests__/samples/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/packages/cli/__tests__/samples/.gitkeep -------------------------------------------------------------------------------- /packages/cli/bin.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | require(`./dist/cli-default.js`) 4 | -------------------------------------------------------------------------------- /packages/cli/postcss.d.ts: -------------------------------------------------------------------------------- 1 | export * from '@pandacss/postcss' 2 | export { default } from '@pandacss/postcss' 3 | -------------------------------------------------------------------------------- /packages/cli/postcss.js: -------------------------------------------------------------------------------- 1 | const plugin = require('@pandacss/postcss') 2 | 3 | module.exports = plugin.default ?? plugin 4 | -------------------------------------------------------------------------------- /packages/cli/src/cli-default.ts: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | import updateNotifier from 'update-notifier' 4 | import { handleError } from './errors' 5 | import { main } from './cli-main' 6 | 7 | import { name, version } from '../package.json' 8 | updateNotifier({ pkg: { name, version }, distTag: 'latest' }).notify() 9 | main().catch(handleError) 10 | -------------------------------------------------------------------------------- /packages/cli/src/presets.ts: -------------------------------------------------------------------------------- 1 | import presetTheme from '@pandacss/preset-panda' 2 | export default presetTheme 3 | -------------------------------------------------------------------------------- /packages/cli/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/config/__tests__/is-panda-config.test.ts: -------------------------------------------------------------------------------- 1 | import { isPandaConfig } from '../src/is-panda-config' 2 | 3 | describe('is-panda-config', () => { 4 | test('should work as expected', () => { 5 | expect(isPandaConfig('panda.config.ts')).toBe(true) 6 | expect(isPandaConfig('testing-panda.config.ts')).toBe(false) 7 | expect(isPandaConfig('panda-config.ts')).toBe(false) 8 | }) 9 | }) 10 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/cjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sandbox-config-test-cjs", 3 | "private": true, 4 | "devDependencies": { 5 | "@pandacss/dev": "workspace:^" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /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/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/cts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sandbox-config-test-cts", 3 | "private": true, 4 | "devDependencies": { 5 | "@pandacss/dev": "workspace:^" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /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/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sandbox-config-test-js", 3 | "private": true, 4 | "devDependencies": { 5 | "@pandacss/dev": "workspace:^" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /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/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sandbox-config-test-mjs", 3 | "private": true, 4 | "devDependencies": { 5 | "@pandacss/dev": "workspace:^" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /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/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sandbox-config-test-mts", 3 | "private": true, 4 | "devDependencies": { 5 | "@pandacss/dev": "workspace:^" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /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/nested-files/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sandbox-config-test-nested-files", 3 | "private": true, 4 | "devDependencies": { 5 | "@pandacss/dev": "workspace:^" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /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/config/__tests__/samples/nested-files/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './theme' 2 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/nested-files/src/theme/colors.ts: -------------------------------------------------------------------------------- 1 | export const colors = { 2 | 'another-color': { value: '#76e3ea' }, 3 | } 4 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/nested-files/src/theme/index.ts: -------------------------------------------------------------------------------- 1 | export * from './tokens' 2 | -------------------------------------------------------------------------------- /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/config/__tests__/samples/ts-import-map-one-source/.gitignore: -------------------------------------------------------------------------------- 1 | styles.json 2 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/ts-import-map-one-source/outdir/.gitignore: -------------------------------------------------------------------------------- 1 | chunks 2 | debug 3 | recipes 4 | css 5 | jsx 6 | patterns 7 | tokens 8 | types 9 | global.css 10 | helpers.mjs 11 | reset.css 12 | styles.css 13 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/ts-import-map-one-source/ts-import-map.js: -------------------------------------------------------------------------------- 1 | import { css, cva, button, flex, card } from '@my-panda-styled-system' 2 | 3 | const section = cva({ 4 | base: { border: 'none' }, 5 | }) 6 | 7 | console.log('css', css({ color: 'red.100' })) 8 | console.log('button', button({ visual: 'solid' })) 9 | console.log('cva', section()) 10 | console.log('flex', flex({ direction: 'row' })) 11 | console.log('card', card()) 12 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/ts-import-map/.gitignore: -------------------------------------------------------------------------------- 1 | styles.json 2 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/ts-import-map/test-ts-import-map.js: -------------------------------------------------------------------------------- 1 | import assert from 'assert' 2 | import data from './styles.json' assert { type: 'json' } 3 | 4 | assert.equal(data.css.length, 1) 5 | assert.equal(data.recipe.button.length, 1) 6 | 7 | assert.equal(data.css[0].data[0].color, 'red.100') 8 | assert.equal(data.recipe.button[0].data[0].visual, 'solid') 9 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/ts-import-map/ts-import-map-outdir/.gitignore: -------------------------------------------------------------------------------- 1 | chunks 2 | debug 3 | recipes 4 | css 5 | jsx 6 | patterns 7 | tokens 8 | types 9 | global.css 10 | helpers.mjs 11 | reset.css 12 | styles.css 13 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/ts-import-map/ts-import-map.js: -------------------------------------------------------------------------------- 1 | import { css } from '#panda/css' 2 | import { button } from '#panda/recipes' 3 | 4 | console.log('css', css({ color: 'red.100' })) 5 | console.log('button', button({ visual: 'solid' })) 6 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sandbox-config-test-with-tsconfig-paths", 3 | "private": true, 4 | "devDependencies": { 5 | "@pandacss/dev": "workspace:^" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/with-preset/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sandbox-config-test-nested-files", 3 | "private": true, 4 | "devDependencies": { 5 | "@pandacss/dev": "workspace:^" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /packages/config/__tests__/samples/with-tsconfig-paths/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sandbox-config-test-ts", 3 | "private": true, 4 | "devDependencies": { 5 | "@pandacss/dev": "workspace:^" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /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/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/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/config/diff.d.ts: -------------------------------------------------------------------------------- 1 | export * from './src/diff-config.ts' 2 | -------------------------------------------------------------------------------- /packages/config/merge.d.ts: -------------------------------------------------------------------------------- 1 | export * from './src/merge-config.ts' 2 | -------------------------------------------------------------------------------- /packages/config/src/index.ts: -------------------------------------------------------------------------------- 1 | export { bundleConfig } from './bundle-config' 2 | export { diffConfigs } from './diff-config' 3 | export { findConfig } from './find-config' 4 | export { getConfigDependencies, type GetDepsOptions } from './get-mod-deps' 5 | export { getResolvedConfig } from './get-resolved-config' 6 | export { loadConfig } from './load-config' 7 | export { resolveConfig } from './resolve-config' 8 | export { mergeConfigs } from './merge-config' 9 | export { convertTsPathsToRegexes } from './ts-config-paths' 10 | export type { BundleConfigResult } from './types' 11 | -------------------------------------------------------------------------------- /packages/config/src/is-panda-config.ts: -------------------------------------------------------------------------------- 1 | const configName = 'panda' 2 | 3 | const pandaConfigFiles = new Set([ 4 | `${configName}.config.ts`, 5 | `${configName}.config.js`, 6 | `${configName}.config.mts`, 7 | `${configName}.config.mjs`, 8 | `${configName}.config.cts`, 9 | `${configName}.config.cjs`, 10 | ]) 11 | 12 | export const isPandaConfig = (file: string) => pandaConfigFiles.has(file) 13 | -------------------------------------------------------------------------------- /packages/config/src/load-config.ts: -------------------------------------------------------------------------------- 1 | import { bundleConfig } from './bundle-config' 2 | import { resolveConfig } from './resolve-config' 3 | import type { ConfigFileOptions } from './types' 4 | 5 | /** 6 | * Find, load and resolve the final config (including presets) 7 | */ 8 | export async function loadConfig(options: ConfigFileOptions) { 9 | const result = await bundleConfig(options) 10 | return resolveConfig(result, options.cwd) 11 | } 12 | -------------------------------------------------------------------------------- /packages/config/src/validation/validate-patterns.ts: -------------------------------------------------------------------------------- 1 | import type { Patterns } from '@pandacss/types' 2 | import type { ArtifactNames } from '../types' 3 | 4 | export const validatePatterns = (patterns: Patterns | undefined, names: ArtifactNames) => { 5 | if (!patterns) return 6 | 7 | Object.keys(patterns).forEach((patternName) => { 8 | names.patterns.add(patternName) 9 | }) 10 | } 11 | -------------------------------------------------------------------------------- /packages/config/ts-path.d.ts: -------------------------------------------------------------------------------- 1 | export * from './src/resolve-ts-path-pattern.ts' 2 | -------------------------------------------------------------------------------- /packages/config/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["src", "index.ts"], 4 | "compilerOptions": { 5 | "customConditions": null 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/config/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src", "__tests__"], 4 | "compilerOptions": { 5 | "paths": { 6 | "@pandacss/fixture": ["../fixture/src/index.ts"] 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/config/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | 3 | export default defineConfig({ 4 | entry: ['src/index.ts', 'src/merge-config.ts', 'src/diff-config.ts', 'src/resolve-ts-path-pattern.ts'], 5 | format: ['cjs', 'esm'], 6 | shims: true, 7 | }) 8 | -------------------------------------------------------------------------------- /packages/core/__tests__/fixture.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from '@pandacss/fixture' 2 | import { type Config } from '@pandacss/types' 3 | import { RuleProcessor } from '../src/rule-processor' 4 | 5 | export const createRuleProcessor = (userConfig?: Config) => { 6 | const ctx = createContext(userConfig) 7 | return new RuleProcessor(ctx) 8 | } 9 | 10 | export function processRecipe( 11 | recipe: 'buttonStyle' | 'textStyle' | 'tooltipStyle' | 'checkbox', 12 | value: Record, 13 | ) { 14 | return createRuleProcessor().recipe(recipe, value)?.toCss() 15 | } 16 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /packages/core/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src", "__tests__"], 4 | "compilerOptions": { 5 | "paths": { 6 | "@pandacss/fixture": ["../fixture/src/index.ts"] 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/core/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | 3 | export default defineConfig({ 4 | entry: ['src/index.ts', 'src/classname.ts'], 5 | format: ['cjs', 'esm'], 6 | }) 7 | -------------------------------------------------------------------------------- /packages/extractor/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src", "__tests__"], 4 | "compilerOptions": { 5 | "paths": { 6 | "@pandacss/fixture": ["../fixture/src/index.ts"] 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/fixture/src/index.ts: -------------------------------------------------------------------------------- 1 | export { createColorMixTransform } from '../../preset-base/src/color-mix-transform' 2 | export * from './config' 3 | export * from './create-context' 4 | export * from './layers' 5 | export * from './recipes' 6 | export * from './semantic-tokens' 7 | export * from './slot-recipes' 8 | -------------------------------------------------------------------------------- /packages/fixture/src/layers.ts: -------------------------------------------------------------------------------- 1 | export const layers = { 2 | reset: 'reset', 3 | base: 'base', 4 | tokens: 'tokens', 5 | recipes: 'recipes', 6 | utilities: 'utilities', 7 | } 8 | -------------------------------------------------------------------------------- /packages/fixture/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/generator/src/artifacts/css/global-css.ts: -------------------------------------------------------------------------------- 1 | import type { Context, Stylesheet } from '@pandacss/core' 2 | 3 | export const generateGlobalCss = (ctx: Context, sheet: Stylesheet) => { 4 | const { globalCss = {} } = ctx.config 5 | 6 | sheet.processGlobalCss({ 7 | ':root': { '--made-with-panda': `'🐼'` }, 8 | }) 9 | 10 | sheet.processGlobalCss(globalCss) 11 | } 12 | -------------------------------------------------------------------------------- /packages/generator/src/artifacts/generated/normalize-html.mjs.json: -------------------------------------------------------------------------------- 1 | { 2 | "content": "// src/normalize-html.ts\nvar htmlProps = [\"htmlSize\", \"htmlTranslate\", \"htmlWidth\", \"htmlHeight\"];\nfunction convert(key) {\n return htmlProps.includes(key) ? key.replace(\"html\", \"\").toLowerCase() : key;\n}\nfunction normalizeHTMLProps(props) {\n return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value]));\n}\nnormalizeHTMLProps.keys = htmlProps;\nexport {\n normalizeHTMLProps\n};\n" 3 | } -------------------------------------------------------------------------------- /packages/generator/src/artifacts/generated/parts.d.ts.json: -------------------------------------------------------------------------------- 1 | { 2 | "content": "export interface Part {\n selector: string\n}\n\nexport interface Parts {\n [key: string]: Part\n}\n" 3 | } -------------------------------------------------------------------------------- /packages/generator/src/artifacts/index.ts: -------------------------------------------------------------------------------- 1 | import type { Context } from '@pandacss/core' 2 | import type { Artifact, ArtifactId } from '@pandacss/types' 3 | import { setupArtifacts, setupDesignTokens } from './setup-artifacts' 4 | 5 | /** 6 | * Generate all the artifacts 7 | * Can opt-in to filter them if a list of ArtifactId is provided 8 | */ 9 | export const generateArtifacts = (ctx: Context, ids?: ArtifactId[]): Artifact[] => { 10 | if (ctx.config.emitTokensOnly) { 11 | return [setupDesignTokens(ctx)].filter(Boolean) as Artifact[] 12 | } 13 | 14 | return setupArtifacts(ctx, ids) 15 | } 16 | -------------------------------------------------------------------------------- /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/generator/src/artifacts/qwik-jsx/index.ts: -------------------------------------------------------------------------------- 1 | export { generateQwikJsxFactory } from './jsx' 2 | export { generateQwikJsxPattern } from './pattern' 3 | export { generateQwikJsxTypes } from './types' 4 | -------------------------------------------------------------------------------- /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/generator/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './generator' 2 | -------------------------------------------------------------------------------- /packages/generator/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src", "__tests__"], 4 | "compilerOptions": { 5 | "paths": { 6 | "@pandacss/fixture": ["../fixture/src/index.ts"] 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/is-valid-prop/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src"] 4 | } 5 | -------------------------------------------------------------------------------- /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 = typeof process !== 'undefined' ? process.env.PANDA_DEBUG : undefined 7 | 8 | export const logger = createLogger({ 9 | filter: typeof process !== 'undefined' ? debug : undefined, 10 | isDebug: Boolean(debug), 11 | }) 12 | 13 | export { colors } 14 | 15 | export type { LoggerConfig } from './create-logger' 16 | -------------------------------------------------------------------------------- /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/logger/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src"] 4 | } 5 | -------------------------------------------------------------------------------- /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/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/node/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "baseUrl": "./src" 5 | }, 6 | "include": ["src", "index.ts"] 7 | } 8 | -------------------------------------------------------------------------------- /packages/node/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src", "__tests__"], 4 | "compilerOptions": { 5 | "paths": { 6 | "@pandacss/fixture": ["../fixture/src/index.ts"] 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/parser/src/get-module-specifier-value.ts: -------------------------------------------------------------------------------- 1 | import type { ImportDeclaration } from 'ts-morph' 2 | 3 | export const getModuleSpecifierValue = (node: ImportDeclaration) => { 4 | try { 5 | return node.getModuleSpecifierValue() 6 | } catch { 7 | return 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/parser/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './project' 2 | export * from './parser-result' 3 | -------------------------------------------------------------------------------- /packages/parser/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src", "__tests__"], 4 | "compilerOptions": { 5 | "paths": { 6 | "@pandacss/fixture": ["../fixture/src/index.ts"] 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/postcss/__tests__/samples/panda.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preflight: true, 3 | presets: ['@pandacss/dev/presets'], 4 | include: ['./src/**/*.{ts,tsx,jsx}', './src/**/*.{css,pcss}'], 5 | exclude: [], 6 | jsxFramework: 'react', 7 | } 8 | -------------------------------------------------------------------------------- /packages/postcss/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src"] 4 | } 5 | -------------------------------------------------------------------------------- /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/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/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-atlaskit/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/preset-base/src/color-mix-transform.ts: -------------------------------------------------------------------------------- 1 | import type { PropertyTransform } from '@pandacss/types' 2 | 3 | export const createColorMixTransform = 4 | (prop: string): PropertyTransform => 5 | (value, args) => { 6 | const mix = args.utils.colorMix(value) 7 | if (mix.invalid) return { [prop]: value } 8 | 9 | const cssVar = '--mix-' + prop 10 | 11 | return { 12 | [cssVar]: mix.value, 13 | [prop]: `var(${cssVar}, ${mix.color})`, 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/preset-base/src/index.ts: -------------------------------------------------------------------------------- 1 | import type { Preset } from '@pandacss/types' 2 | import { conditions } from './conditions' 3 | import { globalCss } from './global-css' 4 | // import { globalVars } from './global-vars' 5 | import { patterns } from './patterns' 6 | import { utilities } from './utilities' 7 | 8 | const definePreset = (preset: T) => preset 9 | 10 | export const preset = definePreset({ 11 | name: '@pandacss/preset-base', 12 | conditions, 13 | utilities, 14 | patterns, 15 | // globalVars, 16 | globalCss, 17 | }) 18 | 19 | export default preset 20 | -------------------------------------------------------------------------------- /packages/preset-base/src/utilities/container.ts: -------------------------------------------------------------------------------- 1 | import type { UtilityConfig } from '@pandacss/types' 2 | 3 | export const container: UtilityConfig = { 4 | container: { 5 | className: 'cq', 6 | group: 'Container', 7 | }, 8 | containerName: { 9 | className: 'cq-n', 10 | property: 'containerName', 11 | values: 'containerNames', 12 | group: 'Container', 13 | }, 14 | containerType: { 15 | className: 'cq-t', 16 | group: 'Container', 17 | }, 18 | } 19 | -------------------------------------------------------------------------------- /packages/preset-base/src/utilities/cursor.ts: -------------------------------------------------------------------------------- 1 | import type { UtilityConfig } from '@pandacss/types' 2 | 3 | export const cursor: UtilityConfig = { 4 | cursor: { 5 | className: 'cursor', 6 | values: 'cursor', 7 | group: 'System', 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /packages/preset-base/src/utilities/list.ts: -------------------------------------------------------------------------------- 1 | import type { UtilityConfig } from '@pandacss/types' 2 | 3 | export const list: UtilityConfig = { 4 | listStyleType: { 5 | className: 'li-t', 6 | group: 'List', 7 | }, 8 | listStylePosition: { 9 | className: 'li-pos', 10 | group: 'List', 11 | }, 12 | listStyleImage: { 13 | className: 'li-img', 14 | group: 'List', 15 | values: 'assets', 16 | }, 17 | listStyle: { 18 | className: 'li-s', 19 | group: 'List', 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /packages/preset-base/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/preset-open-props/src/assets.ts: -------------------------------------------------------------------------------- 1 | import svg from 'open-props/src/svg' 2 | import { transformOpenPropsObj } from './utils' 3 | 4 | export const assets = transformOpenPropsObj(svg) 5 | -------------------------------------------------------------------------------- /packages/preset-open-props/src/borders.ts: -------------------------------------------------------------------------------- 1 | import Borders from 'open-props/src/borders' 2 | 3 | export const borderWidths = Object.fromEntries( 4 | Object.entries(Borders) 5 | .filter(([key]) => key.includes('-size-')) 6 | .map(([key, value]) => [key.replace('--border-size-', ''), { value }]), 7 | ) 8 | 9 | export const radii = Object.fromEntries( 10 | Object.entries(Borders) 11 | .filter(([key]) => !key.includes('-size-')) 12 | .map(([key, value]) => [ 13 | key.replace('--radius-', ''), 14 | { value: value.replace(/var\(--radius-([^)]+)\)/g, '{radii.$1}') }, 15 | ]), 16 | ) 17 | -------------------------------------------------------------------------------- /packages/preset-open-props/src/breakpoints.ts: -------------------------------------------------------------------------------- 1 | export const breakpoints = { 2 | xxs: '240px', 3 | xs: '360px', 4 | sm: '480px', 5 | md: '768px', 6 | lg: '1024px', 7 | xl: '1440px', 8 | xxl: '1920px', 9 | } 10 | -------------------------------------------------------------------------------- /packages/preset-open-props/src/colors.ts: -------------------------------------------------------------------------------- 1 | import Colors from 'open-props/src/colors' 2 | import ColorsHSL from 'open-props/src/colors-hsl' 3 | import { transformOpenPropsObj } from './utils' 4 | 5 | const base = transformOpenPropsObj(Colors) 6 | const hsl = transformOpenPropsObj(ColorsHSL) 7 | 8 | export const colors = Object.assign({}, base, hsl) 9 | -------------------------------------------------------------------------------- /packages/preset-open-props/src/gradients.ts: -------------------------------------------------------------------------------- 1 | import Gradients from 'open-props/src/gradients' 2 | import { camelize } from './utils' 3 | 4 | export const noiseFilters = Object.fromEntries( 5 | Object.entries(Gradients) 6 | .filter(([key]) => key.includes('-filter-')) 7 | .map(([key, value]) => [camelize(key), value]), 8 | ) 9 | 10 | export const gradients = Object.fromEntries( 11 | Object.entries(Gradients) 12 | .filter(([key]) => !key.includes('-filter-')) 13 | .map(([key, value]) => [camelize(key.replace('--gradient-', '')), { value }]), 14 | ) 15 | -------------------------------------------------------------------------------- /packages/preset-open-props/src/sizes.ts: -------------------------------------------------------------------------------- 1 | import Sizes from 'open-props/src/sizes' 2 | import { transformOpenPropsObj } from './utils' 3 | 4 | export const spacing = transformOpenPropsObj(Sizes, (key) => key.replace('--size-', '')) 5 | export const sizes = spacing 6 | -------------------------------------------------------------------------------- /packages/preset-open-props/src/zIndex.ts: -------------------------------------------------------------------------------- 1 | import zindex from 'open-props/src/zindex' 2 | import { transformOpenPropsObj } from './utils' 3 | 4 | export const zIndex = transformOpenPropsObj(zindex) 5 | -------------------------------------------------------------------------------- /packages/preset-open-props/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src", "__tests__"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/preset-panda/src/aspect-ratios.ts: -------------------------------------------------------------------------------- 1 | export const aspectRatios = { 2 | square: { value: '1 / 1' }, 3 | landscape: { value: '4 / 3' }, 4 | portrait: { value: '3 / 4' }, 5 | wide: { value: '16 / 9' }, 6 | ultrawide: { value: '18 / 5' }, 7 | golden: { value: '1.618 / 1' }, 8 | } 9 | -------------------------------------------------------------------------------- /packages/preset-panda/src/borders.ts: -------------------------------------------------------------------------------- 1 | export const borders = { 2 | none: { value: 'none' }, 3 | } 4 | -------------------------------------------------------------------------------- /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/preset-panda/src/containers.ts: -------------------------------------------------------------------------------- 1 | export const containerSizes = { 2 | xs: '320px', 3 | sm: '384px', 4 | md: '448px', 5 | lg: '512px', 6 | xl: '576px', 7 | '2xl': '672px', 8 | '3xl': '768px', 9 | '4xl': '896px', 10 | '5xl': '1024px', 11 | '6xl': '1152px', 12 | '7xl': '1280px', 13 | '8xl': '1440px', 14 | } 15 | -------------------------------------------------------------------------------- /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/preset-panda/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/reporter/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './report-format' 2 | export * from './reporter' 3 | export type { RecipeReportEntry } from './reporter-recipe' 4 | export type { TokenAnalysisReport, TokenReportEntry } from './reporter-token' 5 | -------------------------------------------------------------------------------- /packages/reporter/src/wordwrapjs.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'wordwrapjs' { 2 | export interface WordwrapOptions { 3 | width?: number 4 | eol?: string 5 | } 6 | 7 | export default class Wordwrap { 8 | constructor(text: string, options?: WordwrapOptions) 9 | static wrap(text: string, options?: WordwrapOptions): string 10 | static lines(text: string, options?: WordwrapOptions): string[] 11 | static isWrappable(text?: string): boolean 12 | static getChunks(text: string): string[] 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/reporter/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src", "__tests__"], 4 | "compilerOptions": { 5 | "paths": { 6 | "@pandacss/fixture": ["../fixture/src/index.ts"] 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /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/shared/src/assert.ts: -------------------------------------------------------------------------------- 1 | export const isString = (v: any): v is string => typeof v === 'string' 2 | export const isBoolean = (v: any): v is boolean => typeof v === 'boolean' 3 | 4 | type AnyFunction = (...args: any[]) => any 5 | export const isFunction = (v: any): v is AnyFunction => typeof v === 'function' 6 | 7 | export function isObject(value: any): value is Record { 8 | return typeof value === 'object' && value != null && !Array.isArray(value) 9 | } 10 | 11 | export const isObjectOrArray = (obj: unknown) => typeof obj === 'object' && obj !== null 12 | -------------------------------------------------------------------------------- /packages/shared/src/assign.ts: -------------------------------------------------------------------------------- 1 | export function assign(target: any, ...sources: any[]) { 2 | for (const source of sources) { 3 | for (const key in source) { 4 | if (!target?.hasOwnProperty?.(key)) { 5 | target[key] = source[key] 6 | } 7 | } 8 | } 9 | 10 | return target 11 | } 12 | -------------------------------------------------------------------------------- /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/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/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/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/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 | -------------------------------------------------------------------------------- /packages/shared/src/get-or-create-set.ts: -------------------------------------------------------------------------------- 1 | export function getOrCreateSet(map: Map>, key: TKey) { 2 | let set = map.get(key) 3 | if (!set) { 4 | map.set(key, new Set()) 5 | set = map.get(key)! 6 | } 7 | return set as Set 8 | } 9 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /packages/shared/src/is-css-function.ts: -------------------------------------------------------------------------------- 1 | const fns = ['min', 'max', 'clamp', 'calc'] 2 | const fnRegExp = new RegExp(`^(${fns.join('|')})\\(.*\\)`) 3 | 4 | export const isCssFunction = (v: unknown) => typeof v === 'string' && fnRegExp.test(v) 5 | -------------------------------------------------------------------------------- /packages/shared/src/is-css-unit.ts: -------------------------------------------------------------------------------- 1 | const lengthUnits = 2 | 'cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%' 3 | const lengthUnitsPattern = `(?:${lengthUnits.split(',').join('|')})` 4 | const lengthRegExp = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`) 5 | 6 | export const isCssUnit = (v: unknown) => typeof v === 'string' && lengthRegExp.test(v) 7 | -------------------------------------------------------------------------------- /packages/shared/src/is-css-var.ts: -------------------------------------------------------------------------------- 1 | export const isCssVar = (v: unknown) => typeof v === 'string' && /^var\(--.+\)$/.test(v) 2 | -------------------------------------------------------------------------------- /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/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/shared/src/omit.ts: -------------------------------------------------------------------------------- 1 | import { traverse } from './traverse' 2 | 3 | export const omit = (obj: T, paths: K[]): Omit => { 4 | const result = { ...obj } 5 | 6 | traverse(result, ({ path, parent, key }) => { 7 | if (paths.includes(path as K)) { 8 | delete (parent as any)[key] 9 | } 10 | }) 11 | 12 | return result as Omit 13 | } 14 | -------------------------------------------------------------------------------- /packages/shared/src/panda-config-name.ts: -------------------------------------------------------------------------------- 1 | export const PANDA_CONFIG_NAME = '__panda.config__' as const 2 | -------------------------------------------------------------------------------- /packages/shared/src/regex.ts: -------------------------------------------------------------------------------- 1 | export const createRegex = (item: Array) => { 2 | const regex = item.map((item) => (typeof item === 'string' ? `^${item}$` : item.source)).join('|') 3 | return new RegExp(regex) 4 | } 5 | -------------------------------------------------------------------------------- /packages/shared/src/serialize.ts: -------------------------------------------------------------------------------- 1 | export const stringifyJson = (config: Record) => { 2 | return JSON.stringify(config, (_key, value) => { 3 | if (typeof value === 'function') return value.toString() 4 | return value 5 | }) 6 | } 7 | 8 | export const parseJson = (config: string) => { 9 | return JSON.parse(config) 10 | } 11 | -------------------------------------------------------------------------------- /packages/shared/src/to-json.ts: -------------------------------------------------------------------------------- 1 | export 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/shared/src/typegen.ts: -------------------------------------------------------------------------------- 1 | export function unionType(values: IterableIterator | string[] | readonly string[] | Set) { 2 | return Array.from(values) 3 | .map((value) => JSON.stringify(value)) 4 | .join(' | ') 5 | } 6 | -------------------------------------------------------------------------------- /packages/shared/src/uniq.ts: -------------------------------------------------------------------------------- 1 | export const uniq = (...items: T[][]): T[] => { 2 | const set = items.reduce>((acc, currItems) => { 3 | if (currItems) { 4 | currItems.forEach((item) => acc.add(item)) 5 | } 6 | return acc 7 | }, new Set([])) 8 | return Array.from(set) 9 | } 10 | -------------------------------------------------------------------------------- /packages/shared/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src", "__tests__"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/shared/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | 3 | export default defineConfig({ 4 | entry: ['src/index.ts', 'src/shared.ts', 'src/astish.ts', 'src/normalize-html.ts'], 5 | splitting: false, 6 | format: ['esm', 'cjs'], 7 | }) 8 | -------------------------------------------------------------------------------- /packages/studio/astro.config.mjs: -------------------------------------------------------------------------------- 1 | import studio from '@pandacss/astro-plugin-studio' 2 | import { defineConfig } from 'astro/config' 3 | 4 | // https://astro.build/config 5 | export default defineConfig({ 6 | devToolbar: { enabled: true }, 7 | integrations: [studio()], 8 | }) 9 | -------------------------------------------------------------------------------- /packages/studio/src/components/color-wrapper.tsx: -------------------------------------------------------------------------------- 1 | import { panda } from '../../styled-system/jsx' 2 | 3 | export const ColorWrapper = panda('div', { 4 | base: { 5 | width: 'full', 6 | height: '10', 7 | borderRadius: 'sm', 8 | position: 'relative', 9 | overflow: 'hidden', 10 | shadow: 'inset', 11 | _before: { 12 | content: "''", 13 | position: 'absolute', 14 | borderRadius: 'sm', 15 | width: '100%', 16 | height: '100%', 17 | backgroundSize: '24px', 18 | zIndex: '-1', 19 | backgroundImage: 'check', 20 | }, 21 | }, 22 | }) 23 | -------------------------------------------------------------------------------- /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/src/components/sticky-top.tsx: -------------------------------------------------------------------------------- 1 | import { panda } from '../../styled-system/jsx' 2 | 3 | export const StickyTop = panda('div', { 4 | base: { 5 | position: 'sticky', 6 | top: '6', 7 | zIndex: '1', 8 | mb: '4', 9 | }, 10 | }) 11 | -------------------------------------------------------------------------------- /packages/studio/src/components/token-content.tsx: -------------------------------------------------------------------------------- 1 | import { panda } from '../../styled-system/jsx' 2 | 3 | export const TokenContent = panda('div', { 4 | base: { 5 | display: 'flex', 6 | flexDirection: 'column', 7 | gap: '12', 8 | }, 9 | }) 10 | -------------------------------------------------------------------------------- /packages/studio/src/components/token-group.tsx: -------------------------------------------------------------------------------- 1 | import { panda } from '../../styled-system/jsx' 2 | 3 | export const TokenGroup = panda('div', { 4 | base: { 5 | display: 'flex', 6 | flexDir: 'column', 7 | gap: '3', 8 | width: 'full', 9 | marginTop: '5', 10 | }, 11 | }) 12 | -------------------------------------------------------------------------------- /packages/studio/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /packages/studio/src/icons/moon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import type { ComponentProps } from 'react' 3 | 4 | export const MoonIcon = (props: ComponentProps<'svg'>) => ( 5 | 16 | ) 17 | -------------------------------------------------------------------------------- /packages/studio/src/layouts/Layout.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import '../../styled-system/styles.css' 3 | import Head from '../components/head.astro' 4 | import * as context from '../lib/panda-context' 5 | --- 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Panda Studio 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /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/lib/truncate.ts: -------------------------------------------------------------------------------- 1 | export const truncate = (str: string, length = 15) => { 2 | if (str.length > length) return str.substring(0, length) + '...' 3 | return str 4 | } 5 | -------------------------------------------------------------------------------- /packages/studio/src/lib/url.ts: -------------------------------------------------------------------------------- 1 | export const getUrl = (path?: string) => { 2 | return [import.meta.env.BASE_URL, path].filter(Boolean).join('') 3 | } 4 | -------------------------------------------------------------------------------- /packages/studio/src/lib/virtual-panda.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'virtual:*' { 2 | export const config: import('@pandacss/types').UserConfig 3 | } 4 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | import * as context from '../lib/panda-context' 6 | 7 | const fontSizes = context.getTokens('fontSizes') 8 | --- 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /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 | import * as context from '../lib/panda-context' 6 | 7 | const fontWeights = context.getTokens('fontWeights') 8 | --- 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 * as context from '../lib/panda-context' 7 | 8 | const tokens = context.getTokens('letterSpacings') 9 | --- 10 | 11 | 12 | 13 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /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/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/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 * as context from '../lib/panda-context' 6 | 7 | const tokens = context.getTokens('sizes') 8 | --- 9 | 10 | 11 | 12 | 13 | 14 | 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 * as context from '../lib/panda-context' 6 | 7 | const tokens = context.getTokens('spacing') 8 | --- 9 | 10 | 11 | 12 | 13 | 14 | 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 | -------------------------------------------------------------------------------- /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 { RecipeVariant, RecipeVariantProps } from '../types/recipe'; -------------------------------------------------------------------------------- /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/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 } -------------------------------------------------------------------------------- /packages/studio/styled-system/css/index.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | export * from './css'; 3 | export * from './cx'; 4 | export * from './cva'; 5 | export * from './sva'; -------------------------------------------------------------------------------- /packages/studio/styled-system/css/index.mjs: -------------------------------------------------------------------------------- 1 | export * from './css.mjs'; 2 | export * from './cx.mjs'; 3 | export * from './cva.mjs'; 4 | export * from './sva.mjs'; -------------------------------------------------------------------------------- /packages/studio/styled-system/css/sva.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { SlotRecipeCreatorFn } from '../types/recipe'; 3 | 4 | export declare const sva: SlotRecipeCreatorFn -------------------------------------------------------------------------------- /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 | import type { DistributiveOmit } from '../types/system-types'; 6 | 7 | export interface AspectRatioProps extends AspectRatioProperties, DistributiveOmit, keyof AspectRatioProperties | 'aspectRatio'> {} 8 | 9 | 10 | export declare const AspectRatio: FunctionComponent -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/aspect-ratio.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | 3 | import { splitProps } from '../helpers.mjs'; 4 | import { getAspectRatioStyle } from '../patterns/aspect-ratio.mjs'; 5 | import { panda } from './factory.mjs'; 6 | 7 | export const AspectRatio = /* @__PURE__ */ forwardRef(function AspectRatio(props, ref) { 8 | const [patternProps, restProps] = splitProps(props, ["ratio"]) 9 | 10 | const styleProps = getAspectRatioStyle(patternProps) 11 | const mergedProps = { ref, ...styleProps, ...restProps } 12 | 13 | return createElement(panda.div, mergedProps) 14 | }) -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/bleed.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { FunctionComponent } from 'react' 3 | import type { BleedProperties } from '../patterns/bleed'; 4 | import type { HTMLPandaProps } from '../types/jsx'; 5 | import type { DistributiveOmit } from '../types/system-types'; 6 | 7 | export interface BleedProps extends BleedProperties, DistributiveOmit, keyof BleedProperties > {} 8 | 9 | 10 | export declare const Bleed: FunctionComponent -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/bleed.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | 3 | import { splitProps } from '../helpers.mjs'; 4 | import { getBleedStyle } from '../patterns/bleed.mjs'; 5 | import { panda } from './factory.mjs'; 6 | 7 | export const Bleed = /* @__PURE__ */ forwardRef(function Bleed(props, ref) { 8 | const [patternProps, restProps] = splitProps(props, ["inline","block"]) 9 | 10 | const styleProps = getBleedStyle(patternProps) 11 | const mergedProps = { ref, ...styleProps, ...restProps } 12 | 13 | return createElement(panda.div, mergedProps) 14 | }) -------------------------------------------------------------------------------- /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 | import type { DistributiveOmit } from '../types/system-types'; 6 | 7 | export interface BoxProps extends BoxProperties, DistributiveOmit, keyof BoxProperties > {} 8 | 9 | 10 | export declare const Box: FunctionComponent -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/box.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | 3 | import { splitProps } from '../helpers.mjs'; 4 | import { getBoxStyle } from '../patterns/box.mjs'; 5 | import { panda } from './factory.mjs'; 6 | 7 | export const Box = /* @__PURE__ */ forwardRef(function Box(props, ref) { 8 | const [patternProps, restProps] = splitProps(props, []) 9 | 10 | const styleProps = getBoxStyle(patternProps) 11 | const mergedProps = { ref, ...styleProps, ...restProps } 12 | 13 | return createElement(panda.div, mergedProps) 14 | }) -------------------------------------------------------------------------------- /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 | import type { DistributiveOmit } from '../types/system-types'; 6 | 7 | export interface CenterProps extends CenterProperties, DistributiveOmit, keyof CenterProperties > {} 8 | 9 | 10 | export declare const Center: FunctionComponent -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/center.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | 3 | import { splitProps } from '../helpers.mjs'; 4 | import { getCenterStyle } from '../patterns/center.mjs'; 5 | import { panda } from './factory.mjs'; 6 | 7 | export const Center = /* @__PURE__ */ forwardRef(function Center(props, ref) { 8 | const [patternProps, restProps] = splitProps(props, ["inline"]) 9 | 10 | const styleProps = getCenterStyle(patternProps) 11 | const mergedProps = { ref, ...styleProps, ...restProps } 12 | 13 | return createElement(panda.div, mergedProps) 14 | }) -------------------------------------------------------------------------------- /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 | import type { DistributiveOmit } from '../types/system-types'; 6 | 7 | export interface CircleProps extends CircleProperties, DistributiveOmit, keyof CircleProperties > {} 8 | 9 | 10 | export declare const Circle: FunctionComponent -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/circle.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | 3 | import { splitProps } from '../helpers.mjs'; 4 | import { getCircleStyle } from '../patterns/circle.mjs'; 5 | import { panda } from './factory.mjs'; 6 | 7 | export const Circle = /* @__PURE__ */ forwardRef(function Circle(props, ref) { 8 | const [patternProps, restProps] = splitProps(props, ["size"]) 9 | 10 | const styleProps = getCircleStyle(patternProps) 11 | const mergedProps = { ref, ...styleProps, ...restProps } 12 | 13 | return createElement(panda.div, mergedProps) 14 | }) -------------------------------------------------------------------------------- /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 | import type { DistributiveOmit } from '../types/system-types'; 6 | 7 | export interface ContainerProps extends ContainerProperties, DistributiveOmit, keyof ContainerProperties > {} 8 | 9 | 10 | export declare const Container: FunctionComponent -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/container.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | 3 | import { splitProps } from '../helpers.mjs'; 4 | import { getContainerStyle } from '../patterns/container.mjs'; 5 | import { panda } from './factory.mjs'; 6 | 7 | export const Container = /* @__PURE__ */ forwardRef(function Container(props, ref) { 8 | const [patternProps, restProps] = splitProps(props, []) 9 | 10 | const styleProps = getContainerStyle(patternProps) 11 | const mergedProps = { ref, ...styleProps, ...restProps } 12 | 13 | return createElement(panda.div, mergedProps) 14 | }) -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/cq.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { FunctionComponent } from 'react' 3 | import type { CqProperties } from '../patterns/cq'; 4 | import type { HTMLPandaProps } from '../types/jsx'; 5 | import type { DistributiveOmit } from '../types/system-types'; 6 | 7 | export interface CqProps extends CqProperties, DistributiveOmit, keyof CqProperties > {} 8 | 9 | 10 | export declare const Cq: FunctionComponent -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/cq.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | 3 | import { splitProps } from '../helpers.mjs'; 4 | import { getCqStyle } from '../patterns/cq.mjs'; 5 | import { panda } from './factory.mjs'; 6 | 7 | export const Cq = /* @__PURE__ */ forwardRef(function Cq(props, ref) { 8 | const [patternProps, restProps] = splitProps(props, ["name","type"]) 9 | 10 | const styleProps = getCqStyle(patternProps) 11 | const mergedProps = { ref, ...styleProps, ...restProps } 12 | 13 | return createElement(panda.div, mergedProps) 14 | }) -------------------------------------------------------------------------------- /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 | import type { DistributiveOmit } from '../types/system-types'; 6 | 7 | export interface DividerProps extends DividerProperties, DistributiveOmit, keyof DividerProperties > {} 8 | 9 | 10 | export declare const Divider: FunctionComponent -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/divider.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | 3 | import { splitProps } from '../helpers.mjs'; 4 | import { getDividerStyle } from '../patterns/divider.mjs'; 5 | import { panda } from './factory.mjs'; 6 | 7 | export const Divider = /* @__PURE__ */ forwardRef(function Divider(props, ref) { 8 | const [patternProps, restProps] = splitProps(props, ["orientation","thickness","color"]) 9 | 10 | const styleProps = getDividerStyle(patternProps) 11 | const mergedProps = { ref, ...styleProps, ...restProps } 12 | 13 | return createElement(panda.div, mergedProps) 14 | }) -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/factory.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { Panda } from '../types/jsx'; 3 | export declare const panda: Panda -------------------------------------------------------------------------------- /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 | import type { DistributiveOmit } from '../types/system-types'; 6 | 7 | export interface FlexProps extends FlexProperties, DistributiveOmit, keyof FlexProperties > {} 8 | 9 | 10 | export declare const Flex: FunctionComponent -------------------------------------------------------------------------------- /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 | import type { DistributiveOmit } from '../types/system-types'; 6 | 7 | export interface FloatProps extends FloatProperties, DistributiveOmit, keyof FloatProperties > {} 8 | 9 | 10 | export declare const Float: FunctionComponent -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/float.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | 3 | import { splitProps } from '../helpers.mjs'; 4 | import { getFloatStyle } from '../patterns/float.mjs'; 5 | import { panda } from './factory.mjs'; 6 | 7 | export const Float = /* @__PURE__ */ forwardRef(function Float(props, ref) { 8 | const [patternProps, restProps] = splitProps(props, ["offsetX","offsetY","offset","placement"]) 9 | 10 | const styleProps = getFloatStyle(patternProps) 11 | const mergedProps = { ref, ...styleProps, ...restProps } 12 | 13 | return createElement(panda.div, mergedProps) 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 | import type { DistributiveOmit } from '../types/system-types'; 6 | 7 | export interface GridItemProps extends GridItemProperties, DistributiveOmit, keyof GridItemProperties > {} 8 | 9 | 10 | export declare const GridItem: 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 | import type { DistributiveOmit } from '../types/system-types'; 6 | 7 | export interface GridProps extends GridProperties, DistributiveOmit, keyof GridProperties > {} 8 | 9 | 10 | export declare const Grid: 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 | import type { DistributiveOmit } from '../types/system-types'; 6 | 7 | export interface HstackProps extends HstackProperties, DistributiveOmit, keyof HstackProperties > {} 8 | 9 | 10 | export declare const HStack: FunctionComponent -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/hstack.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | 3 | import { splitProps } from '../helpers.mjs'; 4 | import { getHstackStyle } from '../patterns/hstack.mjs'; 5 | import { panda } from './factory.mjs'; 6 | 7 | export const HStack = /* @__PURE__ */ forwardRef(function HStack(props, ref) { 8 | const [patternProps, restProps] = splitProps(props, ["justify","gap"]) 9 | 10 | const styleProps = getHstackStyle(patternProps) 11 | const mergedProps = { ref, ...styleProps, ...restProps } 12 | 13 | return createElement(panda.div, mergedProps) 14 | }) -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/is-valid-prop.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { DistributiveOmit, HTMLPandaProps, JsxStyleProps, Pretty } from '../types'; 3 | 4 | declare const isCssProperty: (value: string) => boolean; 5 | 6 | type CssPropKey = keyof JsxStyleProps 7 | type OmittedCssProps = Pretty> 8 | 9 | declare const splitCssProps: (props: T) => [JsxStyleProps, OmittedCssProps] 10 | 11 | export { isCssProperty, splitCssProps }; -------------------------------------------------------------------------------- /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 | import type { DistributiveOmit } from '../types/system-types'; 6 | 7 | export interface LinkBoxProps extends LinkBoxProperties, DistributiveOmit, keyof LinkBoxProperties > {} 8 | 9 | 10 | export declare const LinkBox: FunctionComponent -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/link-box.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | 3 | import { splitProps } from '../helpers.mjs'; 4 | import { getLinkBoxStyle } from '../patterns/link-box.mjs'; 5 | import { panda } from './factory.mjs'; 6 | 7 | export const LinkBox = /* @__PURE__ */ forwardRef(function LinkBox(props, ref) { 8 | const [patternProps, restProps] = splitProps(props, []) 9 | 10 | const styleProps = getLinkBoxStyle(patternProps) 11 | const mergedProps = { ref, ...styleProps, ...restProps } 12 | 13 | return createElement(panda.div, mergedProps) 14 | }) -------------------------------------------------------------------------------- /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 | import type { DistributiveOmit } from '../types/system-types'; 6 | 7 | export interface LinkOverlayProps extends LinkOverlayProperties, DistributiveOmit, keyof LinkOverlayProperties > {} 8 | 9 | 10 | export declare const LinkOverlay: FunctionComponent -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/link-overlay.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | 3 | import { splitProps } from '../helpers.mjs'; 4 | import { getLinkOverlayStyle } from '../patterns/link-overlay.mjs'; 5 | import { panda } from './factory.mjs'; 6 | 7 | export const LinkOverlay = /* @__PURE__ */ forwardRef(function LinkOverlay(props, ref) { 8 | const [patternProps, restProps] = splitProps(props, []) 9 | 10 | const styleProps = getLinkOverlayStyle(patternProps) 11 | const mergedProps = { ref, ...styleProps, ...restProps } 12 | 13 | return createElement(panda.a, mergedProps) 14 | }) -------------------------------------------------------------------------------- /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 | import type { DistributiveOmit } from '../types/system-types'; 6 | 7 | export interface SpacerProps extends SpacerProperties, DistributiveOmit, keyof SpacerProperties > {} 8 | 9 | 10 | export declare const Spacer: FunctionComponent -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/spacer.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | 3 | import { splitProps } from '../helpers.mjs'; 4 | import { getSpacerStyle } from '../patterns/spacer.mjs'; 5 | import { panda } from './factory.mjs'; 6 | 7 | export const Spacer = /* @__PURE__ */ forwardRef(function Spacer(props, ref) { 8 | const [patternProps, restProps] = splitProps(props, ["size"]) 9 | 10 | const styleProps = getSpacerStyle(patternProps) 11 | const mergedProps = { ref, ...styleProps, ...restProps } 12 | 13 | return createElement(panda.div, mergedProps) 14 | }) -------------------------------------------------------------------------------- /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 | import type { DistributiveOmit } from '../types/system-types'; 6 | 7 | export interface SquareProps extends SquareProperties, DistributiveOmit, keyof SquareProperties > {} 8 | 9 | 10 | export declare const Square: FunctionComponent -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/square.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | 3 | import { splitProps } from '../helpers.mjs'; 4 | import { getSquareStyle } from '../patterns/square.mjs'; 5 | import { panda } from './factory.mjs'; 6 | 7 | export const Square = /* @__PURE__ */ forwardRef(function Square(props, ref) { 8 | const [patternProps, restProps] = splitProps(props, ["size"]) 9 | 10 | const styleProps = getSquareStyle(patternProps) 11 | const mergedProps = { ref, ...styleProps, ...restProps } 12 | 13 | return createElement(panda.div, mergedProps) 14 | }) -------------------------------------------------------------------------------- /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 | import type { DistributiveOmit } from '../types/system-types'; 6 | 7 | export interface StackProps extends StackProperties, DistributiveOmit, keyof StackProperties > {} 8 | 9 | 10 | export declare const Stack: FunctionComponent -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/stack.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | 3 | import { splitProps } from '../helpers.mjs'; 4 | import { getStackStyle } from '../patterns/stack.mjs'; 5 | import { panda } from './factory.mjs'; 6 | 7 | export const Stack = /* @__PURE__ */ forwardRef(function Stack(props, ref) { 8 | const [patternProps, restProps] = splitProps(props, ["align","justify","direction","gap"]) 9 | 10 | const styleProps = getStackStyle(patternProps) 11 | const mergedProps = { ref, ...styleProps, ...restProps } 12 | 13 | return createElement(panda.div, mergedProps) 14 | }) -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/visually-hidden.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import type { FunctionComponent } from 'react' 3 | import type { VisuallyHiddenProperties } from '../patterns/visually-hidden'; 4 | import type { HTMLPandaProps } from '../types/jsx'; 5 | import type { DistributiveOmit } from '../types/system-types'; 6 | 7 | export interface VisuallyHiddenProps extends VisuallyHiddenProperties, DistributiveOmit, keyof VisuallyHiddenProperties > {} 8 | 9 | 10 | export declare const VisuallyHidden: 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 | import type { DistributiveOmit } from '../types/system-types'; 6 | 7 | export interface VstackProps extends VstackProperties, DistributiveOmit, keyof VstackProperties > {} 8 | 9 | 10 | export declare const VStack: FunctionComponent -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/vstack.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | 3 | import { splitProps } from '../helpers.mjs'; 4 | import { getVstackStyle } from '../patterns/vstack.mjs'; 5 | import { panda } from './factory.mjs'; 6 | 7 | export const VStack = /* @__PURE__ */ forwardRef(function VStack(props, ref) { 8 | const [patternProps, restProps] = splitProps(props, ["justify","gap"]) 9 | 10 | const styleProps = getVstackStyle(patternProps) 11 | const mergedProps = { ref, ...styleProps, ...restProps } 12 | 13 | return createElement(panda.div, mergedProps) 14 | }) -------------------------------------------------------------------------------- /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 | import type { DistributiveOmit } from '../types/system-types'; 6 | 7 | export interface WrapProps extends WrapProperties, DistributiveOmit, keyof WrapProperties > {} 8 | 9 | 10 | export declare const Wrap: FunctionComponent -------------------------------------------------------------------------------- /packages/studio/styled-system/jsx/wrap.mjs: -------------------------------------------------------------------------------- 1 | import { createElement, forwardRef } from 'react' 2 | 3 | import { splitProps } from '../helpers.mjs'; 4 | import { getWrapStyle } from '../patterns/wrap.mjs'; 5 | import { panda } from './factory.mjs'; 6 | 7 | export const Wrap = /* @__PURE__ */ forwardRef(function Wrap(props, ref) { 8 | const [patternProps, restProps] = splitProps(props, ["gap","rowGap","columnGap","align","justify"]) 9 | 10 | const styleProps = getWrapStyle(patternProps) 11 | const mergedProps = { ref, ...styleProps, ...restProps } 12 | 13 | return createElement(panda.div, mergedProps) 14 | }) -------------------------------------------------------------------------------- /packages/studio/styled-system/patterns/box.mjs: -------------------------------------------------------------------------------- 1 | import { getPatternStyles, patternFns } from '../helpers.mjs'; 2 | import { css } from '../css/index.mjs'; 3 | 4 | const boxConfig = { 5 | transform(props) { 6 | return props; 7 | }} 8 | 9 | export const getBoxStyle = (styles = {}) => { 10 | const _styles = getPatternStyles(boxConfig, styles) 11 | return boxConfig.transform(_styles, patternFns) 12 | } 13 | 14 | export const box = (styles) => css(getBoxStyle(styles)) 15 | box.raw = getBoxStyle -------------------------------------------------------------------------------- /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'; -------------------------------------------------------------------------------- /packages/studio/styled-system/types/index.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import './global.d.ts' 3 | export * from './conditions'; 4 | export * from './pattern'; 5 | export * from './recipe'; 6 | export * from './system-types'; 7 | export * from './jsx'; 8 | export * from './style-props'; -------------------------------------------------------------------------------- /packages/studio/styled-system/types/parts.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | export interface Part { 3 | selector: string 4 | } 5 | 6 | export interface Parts { 7 | [key: string]: Part 8 | } 9 | -------------------------------------------------------------------------------- /packages/studio/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "astro/tsconfigs/strict", 3 | "include": ["src", "__tests__"], 4 | "compilerOptions": { 5 | "jsx": "preserve", 6 | "customConditions": ["source"] 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/token-dictionary/__tests__/checkbox.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/token-dictionary/src/index.ts: -------------------------------------------------------------------------------- 1 | export { TokenDictionary } from './dictionary' 2 | export { Token, type TokenExtensions } from './token' 3 | export * from './utils' 4 | -------------------------------------------------------------------------------- /packages/token-dictionary/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src", "__tests__"], 4 | "compilerOptions": { 5 | "paths": { 6 | "@pandacss/fixture": ["../fixture/src/index.ts"] 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/types/scripts/watch.ts: -------------------------------------------------------------------------------- 1 | import { watch } from 'chokidar' 2 | 3 | import { main as postbuild } from './postbuild' 4 | import { main as build } from './build' 5 | import { join } from 'path' 6 | 7 | const main = () => { 8 | build() 9 | return postbuild() 10 | } 11 | 12 | main().then(() => { 13 | watch(join(__dirname, '..', 'src')).on('change', () => { 14 | console.log('Rebuild types') 15 | main() 16 | }) 17 | }) 18 | -------------------------------------------------------------------------------- /packages/types/src/parts.ts: -------------------------------------------------------------------------------- 1 | export interface Part { 2 | selector: string 3 | } 4 | 5 | export interface Parts { 6 | [key: string]: Part 7 | } 8 | -------------------------------------------------------------------------------- /packages/types/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.build.json", 3 | "include": ["src"] 4 | } 5 | -------------------------------------------------------------------------------- /playground/.eslintignore: -------------------------------------------------------------------------------- 1 | src/dts -------------------------------------------------------------------------------- /playground/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /playground/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "../node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/lib", 3 | "typescript.enablePromptUseWorkspaceTsdk": true 4 | } -------------------------------------------------------------------------------- /playground/module.shim.ts: -------------------------------------------------------------------------------- 1 | export const createRequire = () => { 2 | void 0 3 | } 4 | -------------------------------------------------------------------------------- /playground/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { '@pandacss/dev/postcss': {} }, 3 | } 4 | -------------------------------------------------------------------------------- /playground/prisma/schema.prisma: -------------------------------------------------------------------------------- 1 | generator client { 2 | provider = "prisma-client-js" 3 | } 4 | 5 | datasource db { 6 | provider = "postgresql" 7 | url = env("DATABASE_URL") 8 | } 9 | 10 | model Session { 11 | id String @id @default(cuid()) 12 | code String @db.Text 13 | css String? @db.Text 14 | config String @db.Text 15 | createdAt DateTime @default(now()) 16 | } 17 | -------------------------------------------------------------------------------- /playground/public/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/playground/public/android-chrome-192x192.png -------------------------------------------------------------------------------- /playground/public/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/playground/public/android-chrome-512x512.png -------------------------------------------------------------------------------- /playground/public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/playground/public/apple-touch-icon.png -------------------------------------------------------------------------------- /playground/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/playground/public/favicon.ico -------------------------------------------------------------------------------- /playground/public/og-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/playground/public/og-image.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /playground/scripts/panda-types.ts: -------------------------------------------------------------------------------- 1 | export * from '@pandacss/types' 2 | -------------------------------------------------------------------------------- /playground/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import { EXAMPLES } from '@/src/components/Examples/data' 2 | import { Playground } from '../components/Playground' 3 | import { parseState } from '@/src/lib/parse-state' 4 | 5 | const Page = ({ searchParams }: { searchParams: Record }) => { 6 | const initialState = EXAMPLES.find((e) => e.id === searchParams.eg) 7 | 8 | return 9 | } 10 | 11 | export default Page 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 | -------------------------------------------------------------------------------- /playground/src/lib/config/compile.worker.ts: -------------------------------------------------------------------------------- 1 | import { compile } from './compile' 2 | 3 | addEventListener('message', async (event: MessageEvent) => { 4 | try { 5 | const config = await compile(event.data) 6 | postMessage({ config: JSON.stringify(config) }) 7 | } catch (error) { 8 | postMessage({ error }) 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /playground/src/lib/parse-state.ts: -------------------------------------------------------------------------------- 1 | import { State } from '@/src/hooks/usePlayground' 2 | import { initialCSS } from '@/src/components/Examples/data' 3 | 4 | type Param = (Omit & { css?: string | null }) & {} 5 | export function parseState(state: T) { 6 | return (state ? Object.assign({}, state, { css: state.css ?? initialCSS }) : null) as T extends Param 7 | ? State 8 | : T extends undefined 9 | ? undefined 10 | : null 11 | } 12 | -------------------------------------------------------------------------------- /playground/src/styles/globals.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | 3 | html { 4 | font-size: 0.8rem; 5 | } 6 | -------------------------------------------------------------------------------- /playground/theme/recipes/index.ts: -------------------------------------------------------------------------------- 1 | import { button } from './button' 2 | import { splitter } from './splitter' 3 | import { segmentGroup } from './segment-group' 4 | import { menu } from './menu' 5 | import { toast } from './toast' 6 | 7 | export const recipes = { 8 | button, 9 | splitter, 10 | segmentGroup, 11 | menu, 12 | toast, 13 | } 14 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'packages/**' 3 | - 'sandbox/*' 4 | - 'sandbox/component-lib/**' 5 | - 'playground' 6 | - 'website' 7 | -------------------------------------------------------------------------------- /sandbox/astro/astro.config.mjs: -------------------------------------------------------------------------------- 1 | import solidJs from '@astrojs/solid-js' 2 | import { defineConfig } from 'astro/config' 3 | 4 | // https://astro.build/config 5 | export default defineConfig({ 6 | integrations: [solidJs()], 7 | vite: { 8 | resolve: { 9 | conditions: ['source'], 10 | }, 11 | }, 12 | }) 13 | -------------------------------------------------------------------------------- /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: 'styled-system', 7 | }) 8 | -------------------------------------------------------------------------------- /sandbox/astro/panda.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /sandbox/astro/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require('@pandacss/dev/postcss')()], 3 | } 4 | -------------------------------------------------------------------------------- /sandbox/astro/src/components/button.tsx: -------------------------------------------------------------------------------- 1 | import { css } from '../../styled-system/css' 2 | 3 | export function Button({ children }) { 4 | return ( 5 |
    6 | 19 |
    20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /sandbox/astro/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /sandbox/astro/src/layouts/Layout.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import "../../panda.css" 3 | // import "../../styled-system/styles.css" 4 | export interface Props { 5 | title: string 6 | } 7 | 8 | const { title } = Astro.props 9 | --- 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | {title} 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /sandbox/astro/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "astro/tsconfigs/base", 3 | "compilerOptions": { 4 | "jsx": "preserve", 5 | "jsxImportSource": "solid-js", 6 | "customConditions": ["source"] 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /sandbox/codegen/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended'], 5 | ignorePatterns: ['dist', '.eslintrc.cjs'], 6 | parser: '@typescript-eslint/parser', 7 | plugins: ['react-refresh'], 8 | rules: { 9 | 'react-refresh/only-export-components': ['warn', { allowConstantExport: true }], 10 | '@typescript-eslint/ban-ts-comment': 'off', 11 | }, 12 | } 13 | -------------------------------------------------------------------------------- /sandbox/codegen/.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 | styled-system* 27 | -------------------------------------------------------------------------------- /sandbox/codegen/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # codegen-sandbox 2 | 3 | ## 0.0.2 4 | 5 | ### Patch Changes 6 | 7 | - @pandacss/dev@0.15.3 8 | 9 | ## 0.0.1 10 | 11 | ### Patch Changes 12 | 13 | - Updated dependencies [f3c30d60] 14 | - @pandacss/dev@0.15.2 15 | -------------------------------------------------------------------------------- /sandbox/codegen/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /sandbox/codegen/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | '@pandacss/dev/postcss': {}, 4 | }, 5 | } -------------------------------------------------------------------------------- /sandbox/codegen/src/index.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /sandbox/codegen/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.tsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')!).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /sandbox/codegen/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /sandbox/codegen/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /sandbox/codegen/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /sandbox/component-lib/README.md: -------------------------------------------------------------------------------- 1 | # Component Library Examples 2 | 3 | Example of using panda as a component library. 4 | 5 | * https://panda-css.com/docs/guides/component-library 6 | -------------------------------------------------------------------------------- /sandbox/component-lib/nuxt-lib-source/.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 | -------------------------------------------------------------------------------- /sandbox/component-lib/nuxt-lib-source/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true -------------------------------------------------------------------------------- /sandbox/component-lib/nuxt-lib-source/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@sandbox-nuxt-lib-source/monorepo-root", 3 | "private": true 4 | } 5 | -------------------------------------------------------------------------------- /sandbox/component-lib/nuxt-lib-source/packages/css-lib/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@sandbox-nuxt-lib-source/css-lib", 3 | "private": true, 4 | "scripts": { 5 | "css": "PANDA_DEBUG=ast:* panda", 6 | "css:gen": "PANDA_DEBUG=* panda codegen", 7 | "css:dev": "PANDA_DEBUG=file:* panda --watch" 8 | }, 9 | "devDependencies": { 10 | "@pandacss/dev": "workspace:*" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /sandbox/component-lib/nuxt-lib-source/packages/css-lib/panda.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@pandacss/dev' 2 | 3 | export default defineConfig({ 4 | preflight: true, 5 | include: ['./src/**/*.{js,jsx,ts,tsx}'], 6 | exclude: [], 7 | outdir: '@sandbox-nuxt-lib-source/styled-system', 8 | jsxFramework: 'vue', 9 | }) 10 | -------------------------------------------------------------------------------- /sandbox/component-lib/nuxt-lib-source/packages/css-lib/src/button.ts: -------------------------------------------------------------------------------- 1 | import { css, cva } from '@sandbox-nuxt-lib-source/styled-system/css' 2 | 3 | export const butt_styles = cva({ 4 | base: { 5 | display: 'flex' 6 | }, 7 | variants: { 8 | visual: { 9 | solid: { bg: 'red.200', color: 'white' }, 10 | outline: { borderWidth: '1px', borderColor: 'red.200' } 11 | }, 12 | size: { 13 | sm: { padding: '4', fontSize: '12px' }, 14 | lg: { padding: '8', fontSize: '24px' } 15 | } 16 | } 17 | }) 18 | -------------------------------------------------------------------------------- /sandbox/component-lib/nuxt-lib-source/packages/nuxt-app/.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 | -------------------------------------------------------------------------------- /sandbox/component-lib/nuxt-lib-source/packages/nuxt-app/app.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /sandbox/component-lib/nuxt-lib-source/packages/nuxt-app/assets/main.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /sandbox/component-lib/nuxt-lib-source/packages/nuxt-app/components/Demo1.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /sandbox/component-lib/nuxt-lib-source/packages/nuxt-app/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/component-lib/nuxt-lib-source/packages/nuxt-app/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import Demo1 from '../components/Demo1.vue' 2 | 3 | export default defineComponent(() => { 4 | return () => ( 5 | <> 6 |
    Hello World
    7 | 8 | 9 | ) 10 | }) 11 | -------------------------------------------------------------------------------- /sandbox/component-lib/nuxt-lib-source/packages/nuxt-app/panda.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@pandacss/dev' 2 | 3 | export default defineConfig({ 4 | preflight: true, 5 | include: [ 6 | './node_modules/@sandbox-nuxt-lib-source/css-lib/src/**/*.{js,jsx,ts,tsx}', 7 | './pages/**/*.{vue,ts,tsx}', 8 | './components/**/*.{vue,ts,tsx}', 9 | ], 10 | exclude: [], 11 | outdir: '@sandbox-nuxt-lib-source/styled-system', 12 | jsxFramework: 'vue', 13 | }) 14 | -------------------------------------------------------------------------------- /sandbox/component-lib/nuxt-lib-source/packages/nuxt-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/sandbox/component-lib/nuxt-lib-source/packages/nuxt-app/public/favicon.ico -------------------------------------------------------------------------------- /sandbox/component-lib/nuxt-lib-source/packages/nuxt-app/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://nuxt.com/docs/guide/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json" 4 | } 5 | -------------------------------------------------------------------------------- /sandbox/docusaurus-ts/.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | /node_modules 3 | 4 | # Production 5 | /build 6 | 7 | # Generated files 8 | .docusaurus 9 | .cache-loader 10 | 11 | # Misc 12 | .DS_Store 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* 21 | 22 | ## Panda 23 | styled-system 24 | styled-system-studio -------------------------------------------------------------------------------- /sandbox/docusaurus-ts/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [require.resolve('@docusaurus/core/lib/babel/preset')], 3 | }; 4 | -------------------------------------------------------------------------------- /sandbox/docusaurus-ts/blog/2019-05-28-first-blog-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: first-blog-post 3 | title: First Blog Post 4 | authors: 5 | name: Gao Wei 6 | title: Docusaurus Core Team 7 | url: https://github.com/wgao19 8 | image_url: https://github.com/wgao19.png 9 | tags: [hola, docusaurus] 10 | --- 11 | 12 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 13 | -------------------------------------------------------------------------------- /sandbox/docusaurus-ts/blog/2021-08-01-mdx-blog-post.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | slug: mdx-blog-post 3 | title: MDX Blog Post 4 | authors: [slorber] 5 | tags: [docusaurus] 6 | --- 7 | 8 | Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/). 9 | 10 | :::tip 11 | 12 | Use the power of React to create interactive blog posts. 13 | 14 | ```js 15 | 16 | ``` 17 | 18 | 19 | 20 | ::: 21 | -------------------------------------------------------------------------------- /sandbox/docusaurus-ts/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/sandbox/docusaurus-ts/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg -------------------------------------------------------------------------------- /sandbox/docusaurus-ts/blog/authors.yml: -------------------------------------------------------------------------------- 1 | endi: 2 | name: Endilie Yacop Sucipto 3 | title: Maintainer of Docusaurus 4 | url: https://github.com/endiliey 5 | image_url: https://github.com/endiliey.png 6 | 7 | yangshun: 8 | name: Yangshun Tay 9 | title: Front End Engineer @ Facebook 10 | url: https://github.com/yangshun 11 | image_url: https://github.com/yangshun.png 12 | 13 | slorber: 14 | name: Sébastien Lorber 15 | title: Docusaurus maintainer 16 | url: https://sebastienlorber.com 17 | image_url: https://github.com/slorber.png 18 | -------------------------------------------------------------------------------- /sandbox/docusaurus-ts/blog/tags.yml: -------------------------------------------------------------------------------- 1 | facebook: 2 | label: Facebook 3 | permalink: /facebook 4 | description: Facebook tag description 5 | hello: 6 | label: Hello 7 | permalink: /hello 8 | description: Hello tag description 9 | docusaurus: 10 | label: Docusaurus 11 | permalink: /docusaurus 12 | description: Docusaurus tag description 13 | hola: 14 | label: Hola 15 | permalink: /hola 16 | description: Hola tag description 17 | -------------------------------------------------------------------------------- /sandbox/docusaurus-ts/docs/tutorial-basics/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Tutorial - Basics", 3 | "position": 2, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "5 minutes to learn the most important Docusaurus concepts." 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /sandbox/docusaurus-ts/docs/tutorial-extras/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Tutorial - Extras", 3 | "position": 3, 4 | "link": { 5 | "type": "generated-index" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /sandbox/docusaurus-ts/docs/tutorial-extras/img/docsVersionDropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/sandbox/docusaurus-ts/docs/tutorial-extras/img/docsVersionDropdown.png -------------------------------------------------------------------------------- /sandbox/docusaurus-ts/docs/tutorial-extras/img/localeDropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/sandbox/docusaurus-ts/docs/tutorial-extras/img/localeDropdown.png -------------------------------------------------------------------------------- /sandbox/docusaurus-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 | // Useful for theme customization 14 | theme: { 15 | extend: {}, 16 | }, 17 | 18 | // The output directory for your css system 19 | outdir: 'styled-system', 20 | importMap: '@site/styled-system', 21 | }) 22 | -------------------------------------------------------------------------------- /sandbox/docusaurus-ts/src/css/custom.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /sandbox/docusaurus-ts/src/pages/markdown-page.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Markdown page example 3 | --- 4 | 5 | # Markdown page example 6 | 7 | You don't need React to write simple standalone pages. 8 | -------------------------------------------------------------------------------- /sandbox/docusaurus-ts/static/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/sandbox/docusaurus-ts/static/.nojekyll -------------------------------------------------------------------------------- /sandbox/docusaurus-ts/static/img/docusaurus-social-card.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/sandbox/docusaurus-ts/static/img/docusaurus-social-card.jpg -------------------------------------------------------------------------------- /sandbox/docusaurus-ts/static/img/docusaurus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/sandbox/docusaurus-ts/static/img/docusaurus.png -------------------------------------------------------------------------------- /sandbox/docusaurus-ts/static/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/sandbox/docusaurus-ts/static/img/favicon.ico -------------------------------------------------------------------------------- /sandbox/docusaurus-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // This file is not used in compilation. It is here just for a nice editor experience. 3 | "extends": "@docusaurus/tsconfig", 4 | "compilerOptions": { 5 | "baseUrl": "." 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /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 -------------------------------------------------------------------------------- /sandbox/gatsby-ts/gatsby-browser.ts: -------------------------------------------------------------------------------- 1 | import './src/styles/index.css' 2 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /sandbox/gatsby-ts/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require('@pandacss/dev/postcss')], 3 | } 4 | -------------------------------------------------------------------------------- /sandbox/gatsby-ts/src/images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/sandbox/gatsby-ts/src/images/icon.png -------------------------------------------------------------------------------- /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/gatsby-ts/src/styles/index.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /sandbox/next-js-app/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /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-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 | theme: { 16 | extend: {}, 17 | }, 18 | syntax: 'template-literal', 19 | jsxFramework: 'react', 20 | }) 21 | -------------------------------------------------------------------------------- /sandbox/next-js-app/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | '@pandacss/dev/postcss': {}, 4 | }, 5 | } -------------------------------------------------------------------------------- /sandbox/next-js-app/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/sandbox/next-js-app/src/app/favicon.ico -------------------------------------------------------------------------------- /sandbox/next-js-app/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /sandbox/next-js-app/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../styled-system/jsx' 2 | 3 | const One = styled.div` 4 | display: flex; 5 | width: 300px; 6 | border: 1px solid black; 7 | justify-content: center; 8 | --test: 4px; 9 | ` 10 | 11 | const Two = styled(One)` 12 | justify-content: flex-start; 13 | margin-top: var(--test); 14 | ` 15 | 16 | export default function Home() { 17 | return ( 18 |
    19 | one 20 | two 21 |
    22 | ) 23 | } 24 | -------------------------------------------------------------------------------- /sandbox/next-js-pages/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | jsxFramework: 'react', 16 | }) 17 | -------------------------------------------------------------------------------- /sandbox/next-js-pages/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | '@pandacss/dev/postcss': {}, 4 | }, 5 | } -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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/next-js-pages/src/styles/globals.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /sandbox/nuxt/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true -------------------------------------------------------------------------------- /sandbox/nuxt/app.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /sandbox/nuxt/assets/main.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /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 | compatibilityDate: '2025-04-25', 9 | }) 10 | -------------------------------------------------------------------------------- /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.49", 16 | "nuxt": "3.16.0", 17 | "vue": "3.4.19", 18 | "@pandacss/dev": "workspace:*" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /sandbox/nuxt/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import VModel from '../components/VModel.vue' 2 | import CompositionApiDemo from '../components/CompositionApiDemo.vue' 3 | import SetupDemo from '../components/SetupDemo.vue' 4 | import Styled from '../components/Styled.vue' 5 | 6 | export default defineComponent(() => { 7 | return () => ( 8 | <> 9 |
    Hello World
    10 | 11 | 12 | styled 13 |
    14 | 15 | 16 | ) 17 | }) 18 | -------------------------------------------------------------------------------- /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 | jsxStyleProps: 'all', 10 | }) 11 | -------------------------------------------------------------------------------- /sandbox/nuxt/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/sandbox/nuxt/public/favicon.ico -------------------------------------------------------------------------------- /sandbox/nuxt/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://nuxt.com/docs/guide/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json", 4 | "compilerOptions": { 5 | "customConditions": ["source"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /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/preact-ts/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | '@pandacss/dev/postcss': {}, 4 | }, 5 | } 6 | -------------------------------------------------------------------------------- /sandbox/preact-ts/recipes/aaa.ts: -------------------------------------------------------------------------------- 1 | import { defineRecipe } from '@pandacss/dev' 2 | 3 | export const aaa = defineRecipe({ 4 | className: 'aaa', 5 | base: { 6 | fontSize: 'sm', 7 | color: 'blue.50', 8 | }, 9 | }) 10 | -------------------------------------------------------------------------------- /sandbox/preact-ts/recipes/bbb.ts: -------------------------------------------------------------------------------- 1 | import { defineRecipe } from '@pandacss/dev' 2 | 3 | export const bbb = defineRecipe({ 4 | className: 'bbb', 5 | base: { 6 | fontSize: 'md', 7 | }, 8 | }) 9 | -------------------------------------------------------------------------------- /sandbox/preact-ts/recipes/ccc.ts: -------------------------------------------------------------------------------- 1 | import { defineRecipe } from '@pandacss/dev' 2 | 3 | export const ccc = defineRecipe({ 4 | className: 'ccc1', 5 | base: { 6 | fontSize: 'lg', 7 | color: 'red.300', 8 | }, 9 | variants: { 10 | size: { 11 | sm: { 12 | fontSize: 'sm', 13 | }, 14 | }, 15 | }, 16 | }) 17 | -------------------------------------------------------------------------------- /sandbox/preact-ts/recipes/ddd-fff.ts: -------------------------------------------------------------------------------- 1 | import { defineRecipe } from '@pandacss/dev' 2 | 3 | export const dddFff = defineRecipe({ 4 | className: 'dddFff', 5 | base: { 6 | fontSize: 'lg', 7 | color: 'blue.300', 8 | }, 9 | variants: { 10 | size: { 11 | sm: { 12 | fontSize: 'sm', 13 | }, 14 | }, 15 | }, 16 | }) 17 | -------------------------------------------------------------------------------- /sandbox/preact-ts/src/app.tsx: -------------------------------------------------------------------------------- 1 | import { css } from 'styled-system/css' 2 | import { stack } from 'styled-system/patterns' 3 | import { btn } from 'styled-system/recipes' 4 | 5 | export const App = () => { 6 | return ( 7 | <> 8 |
    9 | Click me 10 |
    11 |
    12 |
    aaaa Click me
    13 | 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /sandbox/preact-ts/src/index.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /sandbox/preact-ts/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /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/preact-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import preact from '@preact/preset-vite' 3 | import tsconfigPaths from 'vite-tsconfig-paths' 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [tsconfigPaths(), preact()], 8 | resolve: { 9 | conditions: ['source'], 10 | }, 11 | }) 12 | -------------------------------------------------------------------------------- /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/.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 -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /sandbox/qwik-ts/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | '@pandacss/dev/postcss': {}, 4 | }, 5 | } -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /sandbox/qwik-ts/public/robots.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/sandbox/qwik-ts/public/robots.txt -------------------------------------------------------------------------------- /sandbox/qwik-ts/src/global.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /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 | resolve: { 15 | conditions: ['source'], 16 | }, 17 | } 18 | }) 19 | -------------------------------------------------------------------------------- /sandbox/remix/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | 3 | /.cache 4 | /build 5 | /public/build 6 | .env 7 | 8 | ## Panda 9 | styled-system 10 | styled-system-studio -------------------------------------------------------------------------------- /sandbox/remix/app/index.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /sandbox/remix/app/routes/_index.tsx: -------------------------------------------------------------------------------- 1 | import type { MetaFunction } from '@remix-run/node' 2 | import { css } from '../../styled-system/css' 3 | 4 | export const meta: MetaFunction = () => { 5 | return [{ title: 'New Remix App' }, { name: 'description', content: 'Welcome to Remix!' }] 6 | } 7 | 8 | export default function Index() { 9 | return ( 10 |
    11 |

    Welcome home

    12 |
    13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /sandbox/remix/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | '@pandacss/dev/postcss': {}, 4 | }, 5 | } -------------------------------------------------------------------------------- /sandbox/remix/public/Dosis-VariableFont_wght.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/sandbox/remix/public/Dosis-VariableFont_wght.ttf -------------------------------------------------------------------------------- /sandbox/remix/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/sandbox/remix/public/favicon.ico -------------------------------------------------------------------------------- /sandbox/remix/remix.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('@remix-run/dev').AppConfig} */ 2 | export default { 3 | ignoredRouteFiles: ['**/.*'], 4 | watchPaths: ['panda.config.ts'], 5 | // appDirectory: "app", 6 | // assetsBuildDirectory: "public/build", 7 | // publicPath: "/build/", 8 | // serverBuildPath: "build/index.js", 9 | } 10 | -------------------------------------------------------------------------------- /sandbox/remix/remix.env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /sandbox/runtime-perf/.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 | styled-system-studio 29 | -------------------------------------------------------------------------------- /sandbox/runtime-perf/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /sandbox/runtime-perf/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | '@pandacss/dev/postcss': {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /sandbox/runtime-perf/src/index.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /sandbox/runtime-perf/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 | -------------------------------------------------------------------------------- /sandbox/runtime-perf/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/runtime-perf/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | const ANALYZE = !!process.env.ANALYZE 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig({ 8 | plugins: [react()], 9 | build: { 10 | sourcemap: ANALYZE, 11 | }, 12 | resolve: { 13 | conditions: ['source'], 14 | }, 15 | }) 16 | -------------------------------------------------------------------------------- /sandbox/solid-ts/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | ## Panda 4 | panda 5 | -------------------------------------------------------------------------------- /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/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.6.2", 17 | "vite": "6.2.5", 18 | "vite-plugin-solid": "2.11.6" 19 | }, 20 | "dependencies": { 21 | "solid-js": "1.9.5" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /sandbox/solid-ts/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | '@pandacss/dev/postcss': {}, 4 | }, 5 | } 6 | -------------------------------------------------------------------------------- /sandbox/solid-ts/src/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/sandbox/solid-ts/src/assets/favicon.ico -------------------------------------------------------------------------------- /sandbox/solid-ts/src/index.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | resolve: { 13 | conditions: ['source'], 14 | }, 15 | }) 16 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /sandbox/storybook/index.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /sandbox/storybook/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require('@pandacss/dev/postcss')], 3 | } 4 | -------------------------------------------------------------------------------- /sandbox/storybook/stories/Button.jsx: -------------------------------------------------------------------------------- 1 | import { css } from '../styled-system/css' 2 | 3 | export const Button = ({ children }) => { 4 | return ( 5 | 17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /sandbox/svelte/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | '@pandacss/dev/postcss': {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /sandbox/svelte/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 |
    %sveltekit.body%
    11 | 12 | 13 | -------------------------------------------------------------------------------- /sandbox/svelte/src/app.postcss: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /sandbox/svelte/src/routes/+layout.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sandbox/svelte/src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |

    using class binding css

    8 |
    15 | It works in Svelte, using inline styles 16 |
    17 | -------------------------------------------------------------------------------- /sandbox/svelte/static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/sandbox/svelte/static/favicon.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | resolve: { 12 | conditions: ['source'], 13 | }, 14 | }) 15 | -------------------------------------------------------------------------------- /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 | styled-system-studio 29 | -------------------------------------------------------------------------------- /sandbox/vite-ts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /sandbox/vite-ts/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | '@pandacss/dev/postcss': { 4 | logfile: './some-file.log', 5 | }, 6 | autoprefixer: {}, 7 | }, 8 | } 9 | -------------------------------------------------------------------------------- /sandbox/vite-ts/some-recipe.ts: -------------------------------------------------------------------------------- 1 | import { defineRecipe } from '@pandacss/dev' 2 | 3 | export const someRecipe = defineRecipe({ 4 | className: 'some-recipe', 5 | base: { color: 'green', fontSize: '16px' }, 6 | variants: { 7 | size: { small: { fontSize: '14px' } }, 8 | }, 9 | compoundVariants: [{ size: 'small', css: { color: 'blue' } }], 10 | }) 11 | -------------------------------------------------------------------------------- /sandbox/vite-ts/src/index.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /sandbox/vite-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | const ANALYZE = !!process.env.ANALYZE 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig({ 8 | plugins: [react()], 9 | build: { 10 | sourcemap: ANALYZE, 11 | }, 12 | resolve: { 13 | conditions: ['source'], 14 | }, 15 | }) 16 | -------------------------------------------------------------------------------- /sandbox/waku-ts/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | '@pandacss/dev/postcss': {}, 4 | }, 5 | } 6 | -------------------------------------------------------------------------------- /sandbox/waku-ts/public/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/sandbox/waku-ts/public/images/favicon.png -------------------------------------------------------------------------------- /sandbox/waku-ts/src/components/header.tsx: -------------------------------------------------------------------------------- 1 | import { css } from '../../styled-system/css/index.js' 2 | 3 | export const Header = () => { 4 | return ( 5 |
    6 |

    Waku starter

    7 |
    8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /sandbox/waku-ts/src/entries.tsx: -------------------------------------------------------------------------------- 1 | import { createPages } from 'waku' 2 | import { HomePage } from './templates/home-page.js' 3 | import { RootLayout } from './templates/root-layout.js' 4 | 5 | export default createPages(async ({ createPage, createLayout }) => { 6 | createLayout({ 7 | render: 'static', 8 | path: '/', 9 | // @ts-ignore 10 | component: RootLayout, 11 | }) 12 | 13 | createPage({ 14 | render: 'static', 15 | path: '/', 16 | // @ts-ignore 17 | component: HomePage, 18 | }) 19 | }) 20 | -------------------------------------------------------------------------------- /sandbox/waku-ts/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot, hydrateRoot } from 'react-dom/client' 3 | import { Router } from 'waku/router/client' 4 | import { ErrorBoundary } from './components/error-boundary.js' 5 | 6 | const rootElement = ( 7 | 8 |

    {String(error)}

    }> 9 | 10 |     11 |     12 | ) 13 | 14 | if (import.meta.env.WAKU_HYDRATE) { 15 | hydrateRoot(document.body, rootElement) 16 | } else { 17 | createRoot(document.body).render(rootElement) 18 | } 19 | -------------------------------------------------------------------------------- /sandbox/waku-ts/src/styles.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | 3 | @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap'); 4 | -------------------------------------------------------------------------------- /sandbox/waku-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "strict": true, 4 | "target": "esnext", 5 | "downlevelIteration": true, 6 | "esModuleInterop": true, 7 | "module": "nodenext", 8 | "skipLibCheck": true, 9 | "noUncheckedIndexedAccess": true, 10 | "exactOptionalPropertyTypes": true, 11 | "types": ["react/experimental"], 12 | "jsx": "react-jsx", 13 | "customConditions": ["source"] 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.build.json", 3 | "compilerOptions": { 4 | "paths": { 5 | "@pandacss/fixture": ["./packages/fixture/src/index.ts"], 6 | "@pandacss/types": ["./packages/types/src/index.ts"] 7 | } 8 | }, 9 | "include": ["packages/**/*.ts"], 10 | "types": ["vitest/globals"], 11 | "exclude": [ 12 | "node_modules", 13 | "./packages/extractor/__tests__/npm-bench", 14 | "./packages/extractor/__tests__/samples", 15 | "./packages/config/__tests__/samples" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /website/.eslintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | styled-system 4 | .env 5 | .env.* 6 | !.env.example 7 | 8 | # Ignore files for PNPM, NPM and YARN 9 | pnpm-lock.yaml 10 | package-lock.json 11 | yarn.lock 12 | 13 | # Ignore panda errors cause that's what we're here for 14 | /src/App.tsx -------------------------------------------------------------------------------- /website/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | ignorePatterns: ['styled-system', '.eslintrc.cjs'], 5 | parser: '@typescript-eslint/parser', 6 | rules: {} 7 | } 8 | -------------------------------------------------------------------------------- /website/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .next 3 | ## Panda 4 | styled-system 5 | styled-system-static 6 | .next 7 | -------------------------------------------------------------------------------- /website/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "arrowParens": "avoid" 6 | } 7 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | 5 | // NOTE: This file should not be edited 6 | // see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information. 7 | -------------------------------------------------------------------------------- /website/pages/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "index": { 3 | "title": "Home", 4 | "display": "hidden", 5 | "theme": { 6 | "layout": "raw" 7 | } 8 | }, 9 | "docs": { 10 | "title": "Docs", 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 | -------------------------------------------------------------------------------- /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/customization/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "patterns": "Patterns", 3 | "conditions": "Conditions", 4 | "utilities": "Utilities", 5 | "presets": "Presets", 6 | "theme": "Theme", 7 | "config-functions": "Config Functions" 8 | } -------------------------------------------------------------------------------- /website/pages/docs/guides/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "minimal-setup": "Minimal Setup", 3 | "component-library": "Component Library", 4 | "multiple-themes": "Multiple Themes", 5 | "fonts": "Custom Fonts", 6 | "dynamic-styling": "Dynamic Styles", 7 | "static": "Static Generator", 8 | "debugging": "Debugging" 9 | } 10 | -------------------------------------------------------------------------------- /website/pages/docs/installation/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "cli": "CLI", 3 | "postcss": "PostCSS", 4 | "astro": "Astro", 5 | "angular": "Angular", 6 | "nextjs": "Next.js", 7 | "remix": "Remix", 8 | "react-router": "React Router", 9 | "gatsby": "Gatsby", 10 | "ember": "Ember", 11 | "redwood": "Redwood", 12 | "qwik": "Qwik", 13 | "vite": "Vite", 14 | "vue": "Vue", 15 | "nuxt": "Nuxt", 16 | "preact": "Preact", 17 | "solidjs": "Solid.js", 18 | "svelte": "Svelte", 19 | "storybook": "Storybook" 20 | } 21 | -------------------------------------------------------------------------------- /website/pages/docs/migration/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "stitches": "Stitches", 3 | "styled-components": "Styled Components", 4 | "theme-ui": "Theme UI" 5 | } 6 | -------------------------------------------------------------------------------- /website/pages/docs/overview/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "getting-started": "Getting Started", 3 | "why-panda": "Why Panda?", 4 | "faq": "FAQs", 5 | "browser-support": "Browser Support", 6 | "roadmap": { 7 | "title": "Roadmap", 8 | "href": "https://panda-css.canny.io/" 9 | }, 10 | "changelog": { 11 | "title": "Changelog", 12 | "href": "https://github.com/chakra-ui/panda/blob/main/CHANGELOG.md" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /website/pages/docs/references/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "cli": "CLI", 3 | "config": "Config" 4 | } 5 | -------------------------------------------------------------------------------- /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 | "animation-styles": "Animation Styles" 7 | } 8 | -------------------------------------------------------------------------------- /website/pages/docs/utilities/_meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "background": "Background", 3 | "border": "Border", 4 | "display": "Display", 5 | "divide": "Divide", 6 | "effects": "Effects", 7 | "flex-and-grid": "Flex and Grid", 8 | "helpers": "Helpers", 9 | "interactivity": "Interactivity", 10 | "layout": "Layout", 11 | "list": "List", 12 | "outline": "Outline", 13 | "sizing": "Sizing", 14 | "spacing": "Spacing", 15 | "svg": "SVG", 16 | "tables": "Tables", 17 | "transforms": "Transforms", 18 | "transitions": "Transitions", 19 | "typography": "Typography" 20 | } -------------------------------------------------------------------------------- /website/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {}, 4 | "@pandacss/dev/postcss": {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /website/public/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/public/android-chrome-192x192.png -------------------------------------------------------------------------------- /website/public/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/public/android-chrome-512x512.png -------------------------------------------------------------------------------- /website/public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/public/apple-touch-icon.png -------------------------------------------------------------------------------- /website/public/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /website/public/community.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/public/community.png -------------------------------------------------------------------------------- /website/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/public/favicon-16x16.png -------------------------------------------------------------------------------- /website/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/public/favicon-32x32.png -------------------------------------------------------------------------------- /website/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/public/favicon.ico -------------------------------------------------------------------------------- /website/public/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/public/mstile-150x150.png -------------------------------------------------------------------------------- /website/public/og-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/public/og-image.png -------------------------------------------------------------------------------- /website/public/profiles/alex-s.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/public/profiles/alex-s.png -------------------------------------------------------------------------------- /website/public/profiles/anubra.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/public/profiles/anubra.png -------------------------------------------------------------------------------- /website/public/profiles/ivica-b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/public/profiles/ivica-b.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/public/stately-presets-merging.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/public/stately-presets-merging.png -------------------------------------------------------------------------------- /website/public/videos/building-with-panda.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/public/videos/building-with-panda.png -------------------------------------------------------------------------------- /website/public/videos/center-circle-square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/public/videos/center-circle-square.png -------------------------------------------------------------------------------- /website/public/videos/container-grid-wrap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/public/videos/container-grid-wrap.png -------------------------------------------------------------------------------- /website/public/videos/converting-recipes-to-jsx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/public/videos/converting-recipes-to-jsx.png -------------------------------------------------------------------------------- /website/public/videos/installation-and-setup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/public/videos/installation-and-setup.png -------------------------------------------------------------------------------- /website/public/videos/introduction-to-patterns.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/public/videos/introduction-to-patterns.png -------------------------------------------------------------------------------- /website/public/videos/introduction-to-recipes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/public/videos/introduction-to-recipes.png -------------------------------------------------------------------------------- /website/public/videos/panda-preset.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/public/videos/panda-preset.png -------------------------------------------------------------------------------- /website/public/videos/patterns-as-jsx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/public/videos/patterns-as-jsx.png -------------------------------------------------------------------------------- /website/public/videos/stack-hstack-vstack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/public/videos/stack-hstack-vstack.png -------------------------------------------------------------------------------- /website/public/videos/using-recipes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/public/videos/using-recipes.png -------------------------------------------------------------------------------- /website/public/videos/what-is-panda.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/public/videos/what-is-panda.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/src/components/code-highlight/tabs.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { css } from '@/styled-system/css' 4 | import { Tabs } from '@ark-ui/react/tabs' 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 const TabContent = Tabs.Content 19 | export const CodeTabs = Tabs.Root 20 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/src/env.d.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/src/env.d.ts -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/src/icons/check.tsx: -------------------------------------------------------------------------------- 1 | export function CheckIcon(props: React.ComponentProps<'svg'>) { 2 | return ( 3 | 10 | 15 | 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/src/icons/information-circle.tsx: -------------------------------------------------------------------------------- 1 | export function InformationCircleIcon(props: React.ComponentProps<'svg'>) { 2 | return ( 3 | 11 | 16 | 17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /website/src/icons/moon.tsx: -------------------------------------------------------------------------------- 1 | export function MoonIcon(props: React.ComponentProps<'svg'>) { 2 | return ( 3 | 11 | 18 | 19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /website/src/icons/vue.tsx: -------------------------------------------------------------------------------- 1 | export const VueLogo = () => ( 2 | 3 | 7 | 11 | 12 | ) 13 | -------------------------------------------------------------------------------- /website/src/icons/word-wrap.tsx: -------------------------------------------------------------------------------- 1 | export function WordWrapIcon(props: React.ComponentProps<'svg'>) { 2 | return ( 3 | 4 | 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /website/src/nextra/button/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './button' 2 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/src/nextra/icon-button/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './icon-button' 2 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/src/nextra/sidebar/index.ts: -------------------------------------------------------------------------------- 1 | export * from './sidebar' 2 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/src/nextra/tabs/index.ts: -------------------------------------------------------------------------------- 1 | export * from './tabs' 2 | -------------------------------------------------------------------------------- /website/src/nextra/treeview/index.ts: -------------------------------------------------------------------------------- 1 | export * from './treeview' 2 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/src/public-url.ts: -------------------------------------------------------------------------------- 1 | export function getPublicUrl() { 2 | const host = 3 | process.env.NEXT_PUBLIC_VERCEL_ENV === 'production' 4 | ? process.env.NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL 5 | : process.env.NEXT_PUBLIC_VERCEL_URL 6 | const vercelUrl = host ? `https://${host}` : undefined 7 | const publicUrl = process.env.NEXT_PUBLIC_URL || vercelUrl 8 | return publicUrl || 'http://localhost:3000' 9 | } 10 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /website/styles/Mona-Sans-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/styles/Mona-Sans-Bold.ttf -------------------------------------------------------------------------------- /website/styles/Mona-Sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/styles/Mona-Sans.ttf -------------------------------------------------------------------------------- /website/styles/Mona-Sans.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/styles/Mona-Sans.woff -------------------------------------------------------------------------------- /website/styles/Mona-Sans.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chakra-ui/panda/330802e15bf485af176b98dc1fedf2a4c97d6797/website/styles/Mona-Sans.woff2 -------------------------------------------------------------------------------- /website/styles/fonts.ts: -------------------------------------------------------------------------------- 1 | import { cx } from '@/styled-system/css' 2 | import { Fira_Code } from 'next/font/google' 3 | import localFont from 'next/font/local' 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 | -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------