defineParts not documented

[DmacMcgreg]

Looking for some guidance on how to use defineParts.
Seems as though its not documented yet, but would be essentially to get some complex multi-part components going like in Chakra.
ArkUI is using it behind the scenes for their documentation site, and I tried to reverse engineer it, but I can't seem to get it to attach to the DOM selectors or attributes.

Some help would be appreciated!

[mayteio]

Docs would be cool! AFAIK ark/zag.js automatically adds the data-part attributes to each dom element it creates. then when you define a recipe (using anatomy from ark -> zag) the css() or recipe() maps to these data-part selectors.

Using ark or zag.js

import { editableAnatomy } from '@ark-ui/react';
import { defineParts, defineRecipe } from '@pandacss/dev';

const parts = defineParts(editableAnatomy.build());

export const textField = defineRecipe({
  name: 'textField',
  base: parts({
    root: {},
    label: {},
    area: {}
});

<Editable className={textField()}> // automatically adds classes for the sub-components which already have the data-parts.
...
</Editable>

Ark does this automatically (className comes through zag.js I think).

Roll your own

If you're not using ark or want to hand-roll a multi class recipe you might do something like:

defineParts({
  root: { 
     attrs: { "data-scope": "my-el", "data-part": "root" },
     selector: "&[data-scope=\"my-el\"][data-part=\"root\"], & [data-scope=\"my-el\"][data-part=\"root\"]"
  },
  ...
})

And your component you manually define the data attributes:

function MyEl(){
  return <div data-scope="my-el" data-part="root">...</div>
}

You could probably swap out the selector of each part to use classes if you wanted to and update your component to use classNames instead of data-scope/part. But I assume because each part has the attrs argument it's preferred to use the data-scope/data-part selectors.