Config Provider

1'use client';
2 
3import { useMemo } from 'react';
4import { ConfigContext } from './context';
5import type { ComponentConfig, ConfigProviderProps } from './types';
6 
7const COMPONENT_KEYS = [
8  'accordion',
9  'alert',
10  'alertDialog',
11  'aspectRatio',
12  'avatar',
13  'badge',
14  'breadcrumb',
15  'bottomSheet',
16  'button',
17  'card',
18  'carousel',
19  'checkbox',
20  'collapsible',
21  'command',
22  'contextMenu',
23  'dialog',
24  'divider',
25  'drawer',
26  'dropdownMenu',
27  'formField',
28  'hoverCard',
29  'icon',
30  'input',
31  'inputOtp',
32  'keyboardKey',
33  'label',
34  'layout',
35  'numberInput',
36  'pagination',
37  'popover',
38  'password',
39  'progress',
40  'radio',
41  'scrollArea',
42  'segment',
43  'select',
44  'slider',
45  'sonner',
46  'switch',
47  'tabs',
48  'textarea',
49  'toggle',
50  'tooltip'
51] satisfies (keyof ComponentConfig)[];
52 
53const ConfigProvider = (props: ConfigProviderProps) => {
54  const { children, direction = 'ltr', size = 'md', theme = { color: 'default' }, ...rest } = props;
55 
56  const componentConfig = useMemo(() => {
57    return Object.fromEntries(
58      COMPONENT_KEYS.map(key => [
59        key,
60        {
61          color: theme.color,
62          dir: direction,
63          size,
64          ...rest[key]
65        }
66      ])
67    );
68  }, [direction, size, rest, theme.color]);
69 
70  return (
71    <ConfigContext.Provider value={componentConfig}>
72 
73      {children}
74 
75    </ConfigContext.Provider>
76  );
77};
78 
79export default ConfigProvider;