Option to opt-out of 'styled' factory in createStyleContext

[mahanfakhimi]

Description

Hi team! I propose adding a configuration option (e.g., pure: true) to the createStyleContext helper to allow bypassing the panda() factory and returning standard functional components instead of styled components.

Problem Statement/Justification

I've been using the createStyleContext helper pattern to bridge recipes with Ark components. Currently, the helper creates components using the panda() factory function:

const StyledComponent = panda(Component, {}, options)

While this works great for many use cases, it enforces the Styled Component pattern, which introduces a few frictions for strict design systems:

1. DOM/DevTools Clutter: It wraps pure Ark components in styled wrappers, making the component tree noisier in React DevTools.

2. Strictness Limitations: In a strict design system, I want to prevent arbitrary style props (like bg="red") on my components. Even with jsxStyleProps: 'none', wrapping components in panda() inherently ties them to the styling engine's runtime prop logic.

3. Type Complexity: When dealing with Polymorphism (as prop) and generics, the current implementation requires complex type gymnastics to satisfy TypeScript, leading to any casting or cumbersome overrides.

Proposed Solution or API

I propose adding a configuration option to createStyleContext (e.g., pure: true or useStyled: false) that bypasses the panda() factory entirely.

Instead of returning a styled component, it would return a standard functional component that:

1. Resolves the recipe variants.
2. Generates the class string.
3. Passes the class via className (using cx) to the underlying component.

Proposed API Idea:

// Current behavior (Default)
const { withProvider } = createStyleContext(buttonRecipe);

// Proposed behavior (Pure/Strict Mode)
const { withProvider } = createStyleContext(buttonRecipe, { pure: true });

Alternatives

I have manually refactored createStyleContext locally to remove the panda() factory dependencies and use raw className merging. While this works, it diverges from the "standard" helper provided in the docs/snippets, making updates harder.

Additional Information

This change would align perfectly with a "Headless" + "Utility-first" philosophy, giving developers full control over the DOM and reducing the abstraction layer for those who prefer a cleaner component tree.

Thanks!