chakra-ui/panda @pandacss/types@0.35.0

on GitHub

Patch Changes

• 50db354: Add missing reducers to properly return the results of hooks for config:resolved and parser:before

• f6befbf: Add missing methods for ParserResultInterface (which can be used in the parser:after hook to dynamically add extraction results from your own logic, like using a custom parser)

• a0c4d27: Add an optional className key in sva config which will can be used to target slots in the DOM.

  Each slot will contain a ${className}__${slotName} class in addition to the atomic styles.

  import { sva } from "../styled-system/css";
  
  const button = sva({
    className: "btn",
    slots: ["root", "text"],
    base: {
      root: {
        bg: "blue.500",
        _hover: {
          // v--- 🎯 this will target the `text` slot
          "& .btn__text": {
            color: "white",
          },
        },
      },
    },
  });
  
  export const App = () => {
    const classes = button();
    return (
      <div className={classes.root}>
        <div className={classes.text}>Click me</div>
      </div>
    );
  };