cschroeter / park-ui

Beautifully designed components built with Ark UI and Panda CSS that work with a variety of JS frameworks.
https://park-ui.com
MIT License
1.61k stars 70 forks source link

type error on all components using slot recipes #8

Closed DawidWraga closed 1 year ago

DawidWraga commented 1 year ago

Hi all components using slot recipes are showing type error as well as runtime error.

Here is an example:

'use client';
import * as Ark from '@ark-ui/react/tabs';
import { styled } from '@/styled-system/jsx';
import { tabs, type TabsVariantProps } from '@/styled-system/recipes';
import { createStyleContext } from '@/lib/create-style-context';

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

/*

Argument of type 'TabsRecipe' is not assignable to parameter of type 'AnyRecipe'.
  Type 'string' is not assignable to type 'Record<string, string>'.ts(2345)
⚠ Error (TS2345)  | 
Argument of type 
 is not assignable to parameter of type 
 .

Type 
 is not assignable to type 
 .
(alias) const tabs: TabsRecipe
import tabs
*/

export * from '@ark-ui/react/tabs';
export type TabsProps = Ark.TabsProps & TabsVariantProps;

const TabsRoot = withProvider(styled(Ark.Tabs.Root), 'root');
export const TabContent = withContext(styled(Ark.Tabs.Content), 'content');
export const TabIndicator = withContext(styled(Ark.Tabs.Indicator), 'indicator');
export const TabList = withContext(styled(Ark.Tabs.List), 'tablist');
export const TabTrigger = withContext(styled(Ark.Tabs.Trigger), 'trigger');

export const Tabs = Object.assign(TabsRoot, {
    Root: TabsRoot,
    Content: TabContent,
    Indicator: TabIndicator,
    List: TabList,
    Trigger: TabTrigger,
});

Have you considered creating a park ui discord? It would be beneficial for times like this. I am happy to help debug or contribute to the package but it's hard when there is no directly communication channel

Thanks

cschroeter commented 1 year ago

Thanks for taking your time to create this issue. Can you double check that you use the latest version of Ark UI x Panda?

If that's not the case please update your dependencies. If you already use the latest version please double check your setup with this example on Stackblitz https://stackblitz.com/github/cschroeter/park-ui/tree/main/examples/react/next-js