Expose a split css props and non-css props helper function in jsx

[oljimenez]

Description

I think PandaCSS should expose a split css props and non-css props helper function. This will be very helpful when building generic components and want to merge default styles to the css styles props.

Problem Statement/Justification

When trying to merge styles in a generic component for example:

export function Component({ children, ...props }: HTMLStyledProps<"div">) {
    const cssProps = {}; //How to extract this?
    const restProps = {}; //How to extract this?
    return (
        <styled.div className={css({ display: "flex", height: "20", width: "20" }, cssProps)} {...restProps}>
            {children}
        </styled.div>
    );
}

Right now exist no way to extract the cssProps and non-cssProps of all the props of the component.

Proposed Solution or API

A splitCssProps helper function will be helpful

const [cssProps, restProps] = splitCssProps(props);

Already exist a splitProps function in the PandaCSS repo https://github.com/chakra-ui/panda/blob/main/packages/shared/src/split-props.ts but it need some adjustments and be exposed.

Alternatives

Using the isCssProperty function i've build my own splitCssProps helper function

export function splitCssProps<TProps extends Record<string, unknown>>(
    props: TProps,
): [Pick<TProps, CssProperty>, Omit<TProps, CssProperty>] {
    return Object.entries(props).reduce<[Record<string, unknown>, Record<string, unknown>]>(
        (acc, [key, value]) => {
            return isCssProperty(key) ? [{ ...acc[0], [key]: value }, acc[1]] : [acc[0], { ...acc[1], [key]: value }];
        },
        [{}, {}],
    ) as never;
}

But it should be nice if a similar or better function was build-in in PandaCSS.

Additional Information

No response