feat: create style context provider

src/core/ChicStyleProvider.ts

@@ -0,0 +1,7 @@
+import StyleContext from '@src/lib/StyleContext';
+import { createElement } from 'react';
+import type { ChicStyleProviderProps } from '@types';
+
+export default function ChicStyleProvider({ children, styles }: ChicStyleProviderProps) {
+  return createElement(StyleContext.Provider, { value: styles }, children);
+}

src/index.ts

@@ -1,5 +1,6 @@
+import ChicStyleProvider from '@src/core/ChicStyleProvider';
 import chic from '@src/core/chic';
 import create from '@src/core/create';
 import extractDynamicStyles from '@src/core/extractDynamicStyles';
 
-export { chic, create, extractDynamicStyles };
+export { ChicStyleProvider, chic, create, extractDynamicStyles };

types/index.d.ts

@@ -1,5 +1,12 @@
 import tags from './tags';
-import type { ComponentType, ForwardRefExoticComponent, PropsWithoutRef } from 'react';
+import type {
+  ComponentType,
+  ForwardRefExoticComponent,
+  FunctionComponentElement,
+  PropsWithoutRef,
+  ProviderProps,
+  ReactNode,
+} from 'react';
 
 export type ExtendableObject<T = any> = { [key: string]: T };
 
@@ -50,8 +57,17 @@ export type ChicTagWithAttrsInterface = {
   };
 };
 
+export type ChicStyleProviderProps = {
+  children: ReactNode;
+  styles: CSSModule;
+};
+
 export type ChicFactory = ChicFunction & ChicAttrsInterface & ChicTagWithAttrsInterface;
 
+export function ChicStyleProvider(
+  props: ChicStyleProviderProps,
+): FunctionComponentElement<ProviderProps<CSSModule>>;
+
 export const chic: ChicDOMComponents;
 
 export function create(styles?: CSSModule): ChicFactory;