How to use createStyleContext with Vue + Typescript?

[enjidev]

When using createStyleContext from styled-system/jsx together with Ark UI Vue components (example: @ark-ui/vue SegmentGroup), TypeScript complains about the components returned by withProvider and withContext.

Components re-exported directly from @ark-ui/vue (e.g. ItemHiddenInput, RootProvider) work fine.

import { SegmentGroup } from '@ark-ui/vue';
import { createStyleContext } from 'styled-system/jsx';
import { uiSegmentGroup } from 'styled-system/recipes';

const { withProvider, withContext } = createStyleContext(uiSegmentGroup);

export const Root = withProvider(SegmentGroup.Root, 'root');
export const Indicator = withContext(SegmentGroup.Indicator, 'indicator');
export const Item = withContext(SegmentGroup.Item, 'item');
export const ItemControl = withContext(SegmentGroup.ItemControl, 'itemControl');
export const ItemText = withContext(SegmentGroup.ItemControl, 'itemText');
export const Label = withContext(SegmentGroup.ItemControl, 'label');

export {
  SegmentGroupItemHiddenInput as ItemHiddenInput,
  SegmentGroupRootProvider as RootProvider,
} from '@ark-ui/vue/segment-group';

I couldn't find examples/docs showing createStyleContext used with Vue + TypeScript.

[anubra266]

@enjidev
https://github.com/chakra-ui/panda/blob/main/sandbox/nuxt/components/custom.tsx#L36

[enjidev]

thank you! but I need with Ark UI example