@weing-dev/ui-kit-primitive 0.4.5 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/README.md +6 -0
  2. package/dist/{Icon-DExqF865.js → Icon-DEdvzMs-.js} +1 -1
  3. package/dist/{color-B71xRiyK.js → baseColor-DYa5_IOB.js} +3 -120
  4. package/dist/calendar.js +12 -12
  5. package/dist/chart.css +1 -0
  6. package/dist/chart.d.ts +6 -2
  7. package/dist/chart.js +532 -85
  8. package/dist/color-qJrSCDan.js +155 -0
  9. package/dist/components/Calendar/Calendar.d.ts +1 -55
  10. package/dist/components/Calendar/Calendar.type.d.ts +61 -0
  11. package/dist/components/Cascader/Cascader.d.ts +2 -36
  12. package/dist/components/Cascader/Cascader.type.d.ts +37 -0
  13. package/dist/components/Chart/Chart.context.d.ts +9 -0
  14. package/dist/components/Chart/Chart.hooks.d.ts +4 -0
  15. package/dist/components/Chart/Chart.options.d.ts +24 -0
  16. package/dist/components/Chart/Chart.palette.d.ts +20 -0
  17. package/dist/components/Chart/Chart.preset.d.ts +7 -0
  18. package/dist/components/Chart/Chart.register.d.ts +1 -0
  19. package/dist/components/Chart/Chart.style.d.ts +21 -0
  20. package/dist/components/Chart/Chart.theme.d.ts +9 -0
  21. package/dist/components/Chart/Chart.type.d.ts +114 -0
  22. package/dist/components/Chart/ChartFrame.d.ts +14 -0
  23. package/dist/components/Chart/ChartRenderer.d.ts +11 -0
  24. package/dist/components/Chart/charts/BarChart.d.ts +3 -0
  25. package/dist/components/Chart/charts/DoughnutChart.d.ts +3 -0
  26. package/dist/components/Chart/charts/LineChart.d.ts +3 -0
  27. package/dist/components/Chart/charts/PieChart.d.ts +3 -0
  28. package/dist/components/Form/Dropdown/Dropdown.d.ts +1 -47
  29. package/dist/components/Form/Dropdown/Dropdown.type.d.ts +48 -0
  30. package/dist/components/Form/TextArea/TextArea.d.ts +1 -18
  31. package/dist/components/Form/TextArea/TextArea.type.d.ts +19 -0
  32. package/dist/components/Form/TextInput/TextInput.d.ts +1 -17
  33. package/dist/components/Form/TextInput/TextInput.type.d.ts +18 -0
  34. package/dist/components/Thumbnail/Thumbnail.context.d.ts +38 -3
  35. package/dist/components/Thumbnail/Thumbnail.d.ts +6 -9
  36. package/dist/components/Thumbnail/thumbnailImage.util.d.ts +13 -0
  37. package/dist/components/TimeInput/TimeInput.d.ts +1 -27
  38. package/dist/components/TimeInput/TimeInput.type.d.ts +27 -0
  39. package/dist/display.css +1 -1
  40. package/dist/display.js +2248 -2073
  41. package/dist/entry/chart.d.ts +6 -2
  42. package/dist/entry/components.d.ts +1 -2
  43. package/dist/feedback.js +2 -2
  44. package/dist/form.js +463 -462
  45. package/dist/icon.js +2 -2
  46. package/dist/index.css +1 -1
  47. package/dist/index.js +4904 -4786
  48. package/dist/index.umd.cjs +22 -22
  49. package/dist/navigation.js +41 -40
  50. package/dist/styles/color.d.ts +30 -0
  51. package/dist/video-player.js +83 -83
  52. package/docs/subpath-imports.md +80 -0
  53. package/package.json +5 -4
  54. package/dist/components/Chart/Chart.d.ts +0 -19
  55. /package/dist/components/Cascader/{Cacader.data.d.ts → Cascader.data.d.ts} +0 -0
@@ -0,0 +1,155 @@
1
+ import { B as e, S as g, T as r } from "./baseColor-DYa5_IOB.js";
2
+ const y = {
3
+ light: {
4
+ textPrimary: e.grey.Grey9,
5
+ textSecondary: e.grey.Grey7,
6
+ textTertiary: e.grey.Grey6,
7
+ textDisabled: e.grey.Grey5,
8
+ backgroundDefault: e.whiteWhite,
9
+ backgroundPaper: e.whiteWhite,
10
+ backgroundSecond: r.grey8,
11
+ backgroundNeutral: e.grey.Grey2,
12
+ shadow8: r.grey8,
13
+ shadow12: r.grey12,
14
+ shadow20: r.grey20,
15
+ componentTextfieldFilled: r.grey8,
16
+ componentTextfieldUnderline: r.grey40,
17
+ componentTextfieldOutline: r.grey24,
18
+ actionHover: r.grey16,
19
+ actionDisabled: r.grey40,
20
+ actionDisabledBackground: r.grey16,
21
+ actionSelected: r.grey16,
22
+ actionFocus: r.grey48,
23
+ textError: e.red.Red6,
24
+ textSuccess: e.lightGreen.LightGreen6,
25
+ actionAction: e.grey.Grey6,
26
+ textWarning: e.gold.Gold6,
27
+ textContrast: e.whiteWhite,
28
+ inheritColor: e.whiteWhite,
29
+ inheritBgcolor: e.grey.Grey9,
30
+ inheritHover: e.grey.Grey8,
31
+ swapDarkLightRed: e.red.Red8,
32
+ swapDarkLightLightGreen: e.lightGreen.LightGreen8,
33
+ swapDarkLightDeepGreen: e.deepGreen.DeepGreen8,
34
+ swapDarkLightCyanBlue: e.cyanBlue.CyanBlue8,
35
+ swapDarkLightPurple: e.purple.Purple8,
36
+ swapDarkLightGold: e.gold.Gold8,
37
+ swapDarkLightBlue: e.blue.Blue8,
38
+ swapDarkLightPrimary: e.deepGreen.DeepGreen8,
39
+ // ── Chart 전역 기본 팔레트([5]) · 보조 토큰 ──
40
+ // 인덱스 키 객체 → buildCssVariables 가 `--chartCategorical0..7` 로 펼침
41
+ chartCategorical: {
42
+ 0: e.deepGreen.DeepGreen6,
43
+ // 브랜드 1순위
44
+ 1: e.blue.Blue6,
45
+ 2: e.gold.Gold6,
46
+ 3: e.purple.Purple6,
47
+ 4: e.cyanBlue.CyanBlue6,
48
+ 5: e.red.Red6,
49
+ 6: e.lightGreen.LightGreen6,
50
+ 7: e.grey.Grey6
51
+ },
52
+ chartGrid: r.grey24,
53
+ chartAxis: e.grey.Grey6,
54
+ chartLabel: e.grey.Grey7,
55
+ chartTooltipBg: e.grey.Grey9,
56
+ chartTooltipText: e.whiteWhite
57
+ },
58
+ dark: {
59
+ textPrimary: e.whiteWhite,
60
+ textSecondary: e.grey.Grey5,
61
+ textTertiary: e.grey.Grey6,
62
+ textDisabled: e.grey.Grey7,
63
+ backgroundDefault: e.grey.Grey10,
64
+ backgroundPaper: e.grey.Grey9,
65
+ backgroundSecond: e.grey.Grey8,
66
+ backgroundNeutral: r.grey12,
67
+ shadow8: r.black8,
68
+ shadow12: r.black12,
69
+ shadow20: r.black20,
70
+ componentTextfieldFilled: r.grey8,
71
+ componentTextfieldUnderline: r.grey40,
72
+ componentTextfieldOutline: r.grey24,
73
+ actionHover: r.grey16,
74
+ actionDisabled: r.grey40,
75
+ actionDisabledBackground: r.grey20,
76
+ actionSelected: r.grey16,
77
+ actionFocus: r.grey8,
78
+ textError: e.red.Red6,
79
+ textSuccess: e.lightGreen.LightGreen6,
80
+ actionAction: e.grey.Grey5,
81
+ textWarning: e.gold.Gold6,
82
+ textContrast: e.blackBlack,
83
+ inheritColor: e.grey.Grey9,
84
+ inheritBgcolor: e.whiteWhite,
85
+ inheritHover: e.grey.Grey5,
86
+ swapDarkLightRed: e.red.Red4,
87
+ swapDarkLightLightGreen: e.lightGreen.LightGreen4,
88
+ swapDarkLightDeepGreen: e.deepGreen.DeepGreen4,
89
+ swapDarkLightCyanBlue: e.cyanBlue.CyanBlue4,
90
+ swapDarkLightPurple: e.purple.Purple4,
91
+ swapDarkLightGold: e.gold.Gold4,
92
+ swapDarkLightBlue: e.blue.Blue4,
93
+ swapDarkLightPrimary: e.deepGreen.DeepGreen4,
94
+ // ── Chart 전역 기본 팔레트([5]) · 보조 토큰 (다크: 한 톤 밝게) ──
95
+ chartCategorical: {
96
+ 0: e.deepGreen.DeepGreen4,
97
+ 1: e.blue.Blue4,
98
+ 2: e.gold.Gold4,
99
+ 3: e.purple.Purple4,
100
+ 4: e.cyanBlue.CyanBlue4,
101
+ 5: e.red.Red4,
102
+ 6: e.lightGreen.LightGreen4,
103
+ 7: e.grey.Grey5
104
+ },
105
+ chartGrid: r.white16,
106
+ chartAxis: e.grey.Grey6,
107
+ chartLabel: e.grey.Grey5,
108
+ chartTooltipBg: e.grey.Grey2,
109
+ chartTooltipText: e.grey.Grey9
110
+ },
111
+ primary: {
112
+ pLighter: g.deepGreen.Lighter,
113
+ pLight: g.deepGreen.Light,
114
+ pMain: g.deepGreen.Main,
115
+ pDark: g.deepGreen.Dark,
116
+ pDarker: g.deepGreen.Darker,
117
+ p4: r.deepGreen4,
118
+ p8: r.deepGreen8,
119
+ p12: r.deepGreen12,
120
+ p16: r.deepGreen16,
121
+ p20: r.deepGreen20,
122
+ p24: r.deepGreen24,
123
+ p32: r.deepGreen32,
124
+ p40: r.deepGreen40,
125
+ p48: r.deepGreen48,
126
+ pContrastText: g.whiteMain
127
+ }
128
+ }, d = (t) => {
129
+ const a = Object.keys(t), c = (l, o) => Object.keys(l).reduce((n, p) => {
130
+ const i = l[p];
131
+ return typeof i == "object" ? n.concat(c(i, `${o}${p}`)) : n.concat(`--${o}${p}: ${i};
132
+ `);
133
+ }, "");
134
+ return a.reduce((l, o) => {
135
+ const n = t[o];
136
+ return typeof n == "object" ? l.concat(c(n, o)) : l.concat(`--${o.replace(/_/g, "-")}: ${n};
137
+ `);
138
+ }, "");
139
+ };
140
+ d(y.light), d(y.dark), d(y.primary), d(e), d(g), d(r);
141
+ const s = (t) => `var(--${t.replace(/_/g, "-")})`, h = (t, a) => `var(--${t}${a.replace(/_/g, "-")})`, G = (t, a) => `${t.replace(/_/g, "-")}, ${a})`.replace(/(\))(\\,)/, "$2").replace(/(\d.)/g, "-$1"), u = Object.keys(y.light);
142
+ u.reduce((t, a) => {
143
+ const c = y.light[a];
144
+ if (typeof c != "string") {
145
+ const l = Object.keys(c).reduce((o, n) => {
146
+ const p = c[n];
147
+ return o[n] = Array.isArray(p) ? G(h(a, n.replace(/_/g, "-").replace(/^[a-z]/, (i) => `-${i}`).replace(/([A-Z])/g, (i) => `-${i.toLocaleLowerCase()}`).replace(/(\d.)/g, "-$1")), p[1]) : h(a, n.replace(/_/g, "-").replace(/^[a-z]/, (i) => `-${i}`).replace(/([A-Z])/g, (i) => `-${i.toLocaleLowerCase()}`).replace(/(\d.)/g, "-$1")), o;
148
+ }, {});
149
+ return t[a] = l, t;
150
+ }
151
+ return t[a] = s(a), t;
152
+ }, {});
153
+ export {
154
+ y as c
155
+ };
@@ -1,64 +1,10 @@
1
1
  import { default as React } from 'react';
2
- import { default as dayjs } from 'dayjs';
3
- import { CalendarProviderProps } from './Calendar.context';
4
- type AsBodyProps = {
5
- columns: dayjs.Dayjs[];
6
- className?: string;
7
- columnRender: () => React.ReactNode;
8
- };
9
- type ColumnAsProps = {
10
- date: string;
11
- visible: boolean;
12
- className?: string;
13
- selected: boolean;
14
- onClick?: (date: string | string[]) => void;
15
- disabled: boolean;
16
- between: boolean;
17
- both: boolean;
18
- start: boolean;
19
- end: boolean;
20
- columns: dayjs.Dayjs[];
21
- };
22
- type CalendarBodyProps = {
23
- as?: (props: AsBodyProps) => React.ReactNode;
24
- className?: string;
25
- /** 이전, 다음달 채울지 여부 */
26
- isFill?: boolean;
27
- /** column className */
28
- columnClassName?: string;
29
- columnAs?: (props: ColumnAsProps) => React.ReactNode;
30
- };
2
+ import { CalendarBodyProps, DirectionButtonProps, DayTextListProps, HeaderDateProps, RootProps } from './Calendar.type';
31
3
  declare const Body: (props: CalendarBodyProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
32
- type AsDirectionProps = {
33
- disabled?: boolean;
34
- };
35
- type DirectionButtonProps = {
36
- as?: (props: AsDirectionProps) => React.ReactNode;
37
- className?: string;
38
- disabled?: boolean;
39
- moveValue?: number;
40
- };
41
4
  declare const Next: (props: DirectionButtonProps) => import("react/jsx-runtime").JSX.Element;
42
5
  declare const Prev: (props: DirectionButtonProps) => import("react/jsx-runtime").JSX.Element;
43
- type AsDayTextProps = {
44
- columns: (string | undefined)[];
45
- };
46
- type DayTextListProps = React.PropsWithChildren<{
47
- as?: (props: AsDayTextProps) => React.ReactNode;
48
- /** dayColumn */
49
- column?: React.ReactElement;
50
- className?: string;
51
- }>;
52
6
  declare const DayTextList: (props: DayTextListProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
53
- type HeaderDateProps = {
54
- className?: string;
55
- format?: string;
56
- };
57
7
  declare const HeaderDate: (props: HeaderDateProps) => import("react/jsx-runtime").JSX.Element;
58
- type RootProps = CalendarProviderProps & {
59
- currentDate?: string;
60
- className?: string;
61
- };
62
8
  declare const Root: (props: RootProps) => import("react/jsx-runtime").JSX.Element;
63
9
  interface ICalendar {
64
10
  Root: typeof Root;
@@ -0,0 +1,61 @@
1
+ import { default as React } from 'react';
2
+ import { default as dayjs } from 'dayjs';
3
+ import { CalendarProviderProps } from './Calendar.context';
4
+ export type AsBodyProps = {
5
+ columns: dayjs.Dayjs[];
6
+ className?: string;
7
+ columnRender: () => React.ReactNode;
8
+ };
9
+ export type ColumnAsProps = {
10
+ date: string;
11
+ visible: boolean;
12
+ className?: string;
13
+ selected: boolean;
14
+ onClick?: (date: string | string[]) => void;
15
+ disabled: boolean;
16
+ between: boolean;
17
+ both: boolean;
18
+ start: boolean;
19
+ end: boolean;
20
+ columns: dayjs.Dayjs[];
21
+ };
22
+ export type CalendarBodyProps = {
23
+ as?: (props: AsBodyProps) => React.ReactNode;
24
+ className?: string;
25
+ /** 이전, 다음달 채울지 여부 */
26
+ isFill?: boolean;
27
+ /** column className */
28
+ columnClassName?: string;
29
+ columnAs?: (props: ColumnAsProps) => React.ReactNode;
30
+ };
31
+ export type AsDirectionProps = {
32
+ disabled?: boolean;
33
+ };
34
+ export type DirectionButtonProps = {
35
+ as?: (props: AsDirectionProps) => React.ReactNode;
36
+ className?: string;
37
+ disabled?: boolean;
38
+ moveValue?: number;
39
+ };
40
+ export type AsDayTextProps = {
41
+ columns: (string | undefined)[];
42
+ };
43
+ export type DayTextListProps = React.PropsWithChildren<{
44
+ as?: (props: AsDayTextProps) => React.ReactNode;
45
+ /** dayColumn */
46
+ column?: React.ReactElement;
47
+ className?: string;
48
+ }>;
49
+ export type DayTextProps = React.PropsWithChildren<{
50
+ day?: number;
51
+ children?: React.ReactNode;
52
+ className?: string;
53
+ }>;
54
+ export type HeaderDateProps = {
55
+ className?: string;
56
+ format?: string;
57
+ };
58
+ export type RootProps = CalendarProviderProps & {
59
+ currentDate?: string;
60
+ className?: string;
61
+ };
@@ -1,44 +1,10 @@
1
1
  import { default as React } from 'react';
2
- import { CascaderProviderProps, CascaderOption, OnSelectProps } from './Cascader.context';
2
+ import { CascaderOption, OnSelectProps } from './Cascader.context';
3
+ import { ItemProps, ColumnProps, MenuProps, RootProps } from './Cascader.type';
3
4
  import { useCascader } from './Cascader.hook';
4
- type ItemAsProps = {
5
- ref: React.RefObject<HTMLDivElement | null>;
6
- option: CascaderOption;
7
- level: number;
8
- disabled?: boolean;
9
- role?: CascaderOption["role"];
10
- isSelected?: boolean;
11
- showChildrenCount?: boolean;
12
- defaultClassName: string;
13
- onClick: () => void;
14
- };
15
- type ItemProps = React.PropsWithChildren<{
16
- option: CascaderOption;
17
- level: number;
18
- as?: (props: ItemAsProps) => React.ReactNode;
19
- } & React.ComponentProps<"div">>;
20
5
  declare const Item: (props: ItemProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
21
- type ColumnAsProps = {
22
- defaultClassName: string;
23
- maxColumnView?: number;
24
- columnPositionFromParent?: boolean;
25
- selectedOptionTop?: number[];
26
- index?: number;
27
- topOffset?: number;
28
- };
29
- type ColumnProps = React.PropsWithChildren<{
30
- index: number;
31
- as?: (props: ColumnAsProps) => React.ReactNode;
32
- } & React.ComponentProps<"div">>;
33
6
  declare const Column: (props: React.PropsWithoutRef<ColumnProps>) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
34
- type MenuAsProps = {
35
- defaultClassName: string;
36
- };
37
- type MenuProps = React.PropsWithChildren<{
38
- as?: (props: MenuAsProps) => React.ReactNode;
39
- } & React.ComponentProps<"div">>;
40
7
  declare const Menu: (props: React.PropsWithoutRef<MenuProps>) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
41
- type RootProps = Omit<CascaderProviderProps, "selectedOptionTop" | "setSelectedOptionTop"> & Omit<React.ComponentProps<"div">, "onSelect">;
42
8
  declare const Root: (props: React.PropsWithoutRef<RootProps>) => import("react/jsx-runtime").JSX.Element;
43
9
  interface ICascader {
44
10
  Root: typeof Root;
@@ -0,0 +1,37 @@
1
+ import { default as React } from 'react';
2
+ import { CascaderOption, CascaderProviderProps } from './Cascader.context';
3
+ export type ItemAsProps = {
4
+ ref: React.RefObject<HTMLDivElement | null>;
5
+ option: CascaderOption;
6
+ level: number;
7
+ disabled?: boolean;
8
+ role?: CascaderOption["role"];
9
+ isSelected?: boolean;
10
+ showChildrenCount?: boolean;
11
+ defaultClassName: string;
12
+ onClick: () => void;
13
+ };
14
+ export type ItemProps = React.PropsWithChildren<{
15
+ option: CascaderOption;
16
+ level: number;
17
+ as?: (props: ItemAsProps) => React.ReactNode;
18
+ } & React.ComponentProps<"div">>;
19
+ export type ColumnAsProps = {
20
+ defaultClassName: string;
21
+ maxColumnView?: number;
22
+ columnPositionFromParent?: boolean;
23
+ selectedOptionTop?: number[];
24
+ index?: number;
25
+ topOffset?: number;
26
+ };
27
+ export type ColumnProps = React.PropsWithChildren<{
28
+ index: number;
29
+ as?: (props: ColumnAsProps) => React.ReactNode;
30
+ } & React.ComponentProps<"div">>;
31
+ export type MenuAsProps = {
32
+ defaultClassName: string;
33
+ };
34
+ export type MenuProps = React.PropsWithChildren<{
35
+ as?: (props: MenuAsProps) => React.ReactNode;
36
+ } & React.ComponentProps<"div">>;
37
+ export type RootProps = Omit<CascaderProviderProps, "selectedOptionTop" | "setSelectedOptionTop"> & Omit<React.ComponentProps<"div">, "onSelect">;
@@ -0,0 +1,9 @@
1
+ import { default as React } from 'react';
2
+ import { ChartThemeValue } from './Chart.type';
3
+ /**
4
+ * [3] 앱/화면 단위 테마 Context. 감싸지 않으면 undefined → 위층(토큰)이 그대로 흐른다.
5
+ * Provider 컴포넌트는 Chart.theme.tsx 에 분리(컨벤션: context 파일은 비컴포넌트만).
6
+ */
7
+ export declare const ChartThemeContext: React.Context<ChartThemeValue | undefined>;
8
+ /** React 19: Context 소비는 React.use 로 통일 */
9
+ export declare const useChartTheme: () => ChartThemeValue | undefined;
@@ -0,0 +1,4 @@
1
+ import { ChartKind } from './Chart.type';
2
+ import { InstanceStyle, StyleSources } from './Chart.style';
3
+ /** cascade 5층 소스를 모은다: [2]인스턴스 · [3]테마 · [4]프리셋 · [5]토큰팔레트 */
4
+ export declare const useStyleSources: (kind: ChartKind, instance: InstanceStyle) => StyleSources;
@@ -0,0 +1,24 @@
1
+ import { ChartData, ChartOptions } from 'chart.js';
2
+ import { CategoricalData, ChartBaseProps, ChartKind, PointStyle, ProportionData } from './Chart.type';
3
+ import { ChartAxisTokens } from './Chart.palette';
4
+ import { StyleSources } from './Chart.style';
5
+ export declare const deepMerge: <T>(base: T, over?: Partial<T>) => T;
6
+ /** 카테고리형(bar/line) → chart.js ChartData */
7
+ export declare const buildCategoricalData: (data: CategoricalData, sources: StyleSources, opts?: {
8
+ area?: boolean;
9
+ tension?: number;
10
+ pointStyle?: PointStyle;
11
+ lineWidth?: number;
12
+ }) => ChartData;
13
+ /** 비중형(pie/doughnut) → chart.js ChartData */
14
+ export declare const buildProportionData: (data: ProportionData, sources: StyleSources) => ChartData;
15
+ type BuildOptionArgs = {
16
+ kind: ChartKind;
17
+ base: Pick<ChartBaseProps, "title" | "legend" | "height" | "aspectRatio" | "padding" | "valueLabel" | "options" | "rawOptions">;
18
+ tokens: ChartAxisTokens;
19
+ /** 종류별 추가 옵션 (indexAxis, cutout, scales stacked 등). 차트별 전용 키 허용 위해 느슨한 타입 */
20
+ extra?: Record<string, unknown>;
21
+ };
22
+ /** 프리셋 → L2(options deep-merge) → L3(rawOptions 통째 대체) */
23
+ export declare const buildOptions: ({ kind, base, tokens, extra }: BuildOptionArgs) => ChartOptions;
24
+ export {};
@@ -0,0 +1,20 @@
1
+ import { PaletteInput } from './Chart.type';
2
+ /** 단일 색 토큰 문자열 해석: hex/rgb/hsl/var 는 그대로, 팔레트키는 매핑 */
3
+ export declare const resolveColor: (c: string) => string;
4
+ /** 전역 카테고리컬 팔레트(hex 8색)를 토큰에서 해석 — cascade [5] */
5
+ export declare const useChartPalette: () => string[];
6
+ export type ChartAxisTokens = {
7
+ grid: string;
8
+ axis: string;
9
+ label: string;
10
+ tooltipBg: string;
11
+ tooltipText: string;
12
+ };
13
+ export declare const useChartTokens: () => ChartAxisTokens;
14
+ /**
15
+ * PaletteInput 을 hex 색 배열로 정규화.
16
+ * - "categorical" → 토큰 팔레트
17
+ * - "sequential"/"diverging" → 1차엔 categorical fallback (전용 팔레트는 실수요 시)
18
+ * - string[] → 각 요소를 resolveColor (hex/팔레트키 혼용)
19
+ */
20
+ export declare const normalizePalette: (input: PaletteInput | undefined, categorical: string[]) => string[] | undefined;
@@ -0,0 +1,7 @@
1
+ import { ChartPreset } from './Chart.type';
2
+ /**
3
+ * [4] 차트 종류별 기본 정책 통로.
4
+ * A안(통로 5층 + 값 3층): 통로만 두고 값은 비워 둔다(no-op).
5
+ * 실수요가 생기면 아래에 값만 채우면 켜지고, 컴포넌트·호출부 코드는 바뀌지 않는다.
6
+ */
7
+ export declare const chartPresets: ChartPreset;
@@ -0,0 +1 @@
1
+ export declare const ensureChartRegistered: () => void;
@@ -0,0 +1,21 @@
1
+ import { ChartKind, ChartStyleDefaults, ChartThemeValue, PaletteInput } from './Chart.type';
2
+ /**
3
+ * 스타일 cascade 5층 해석기.
4
+ * [1] datum.color / [2] series.color … 항목·시리즈 단위 색은 옵션 빌더에서 최우선 적용.
5
+ * 본 모듈은 인스턴스/테마/프리셋/토큰 층([2]props·[3]·[4]·[5])을 `??` 로 병합한다.
6
+ * 빈 층(undefined)은 자연 통과 → 런타임 비용 0. [3][4] 는 1차엔 빈 통로(no-op).
7
+ */
8
+ export type InstanceStyle = ChartStyleDefaults & {
9
+ colors?: PaletteInput;
10
+ };
11
+ export type StyleSources = {
12
+ kind: ChartKind;
13
+ instance?: InstanceStyle;
14
+ theme?: ChartThemeValue;
15
+ preset?: ChartStyleDefaults;
16
+ tokenPalette: string[];
17
+ };
18
+ /** 스칼라 스타일(barRadius·tension·cutout·legend…) cascade. 최종 fallback 은 빌더가 `?? 기본값` 으로 처리 */
19
+ export declare const resolveStyle: <K extends keyof ChartStyleDefaults>(key: K, s: StyleSources) => ChartStyleDefaults[K] | undefined;
20
+ /** 시리즈 index i 의 최종 색 cascade ([2]colors > [3] > [4] > [5]token) */
21
+ export declare const resolveSeriesColor: (i: number, s: StyleSources) => string;
@@ -0,0 +1,9 @@
1
+ import { default as React } from 'react';
2
+ import { ChartThemeValue } from './Chart.type';
3
+ /**
4
+ * [3] 앱/화면 단위 테마 통로. Provider 만 제공하고 기본값은 비워 둔다(no-op).
5
+ * <ChartThemeProvider value={{ palette, defaults, presets }}> 로 하위 차트에 정책 주입.
6
+ */
7
+ export declare const ChartThemeProvider: ({ value, children, }: React.PropsWithChildren<{
8
+ value: ChartThemeValue;
9
+ }>) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,114 @@
1
+ import { ChartOptions } from 'chart.js';
2
+ import { default as React } from 'react';
3
+ /** 단일 시리즈 간편 입력: bar/pie/doughnut 한 줄짜리 */
4
+ export type SimpleDatum = {
5
+ label: string;
6
+ value: number;
7
+ /** 이 항목만 색 강제 (팔레트 키 또는 CSS 색) — cascade [1] */
8
+ color?: string;
9
+ };
10
+ /** 다중 시리즈 한 줄 */
11
+ export type ChartSeries = {
12
+ name: string;
13
+ values: number[];
14
+ /** 이 시리즈만 색 강제 — cascade [2] */
15
+ color?: string;
16
+ };
17
+ /** 다중 시리즈 입력 */
18
+ export type SeriesData = {
19
+ labels: string[];
20
+ series: ChartSeries[];
21
+ };
22
+ /** 카테고리형(bar/line): 간편형 or 시리즈형 둘 다 허용 */
23
+ export type CategoricalData = SimpleDatum[] | SeriesData;
24
+ /** 비중형(pie/doughnut): 항상 단일 시리즈 */
25
+ export type ProportionData = SimpleDatum[];
26
+ /** 토큰 팔레트 이름 또는 임의 색/팔레트키 배열 */
27
+ export type PaletteInput = "categorical" | "sequential" | "diverging" | string[];
28
+ /** 차트 종류별/테마 단위로 상속시킬 수 있는 스타일 기본값 묶음 */
29
+ export type ChartStyleDefaults = {
30
+ palette?: PaletteInput;
31
+ legend?: LegendOption;
32
+ aspectRatio?: number;
33
+ barRadius?: number;
34
+ tension?: number;
35
+ cutout?: number;
36
+ showTotal?: boolean;
37
+ pointStyle?: PointStyle;
38
+ };
39
+ /** [4] 차트 종류별 기본 정책. 1차엔 최소값만 채우고 나머지는 빈 통로(no-op) */
40
+ export type ChartPreset = Partial<Record<ChartKind, ChartStyleDefaults>>;
41
+ /** [3] 앱/화면 단위 테마. <ChartThemeProvider value={...}> 로 주입 */
42
+ export type ChartThemeValue = {
43
+ palette?: PaletteInput;
44
+ defaults?: ChartStyleDefaults;
45
+ presets?: ChartPreset;
46
+ };
47
+ export type ChartKind = "bar" | "line" | "pie" | "doughnut";
48
+ export type LegendOption = boolean | "top" | "bottom" | "left" | "right";
49
+ export type PointStyle = "circle" | "rect" | "triangle" | false;
50
+ export type ChartBaseProps = {
51
+ title?: string;
52
+ /** true=top, false=숨김, 또는 위치 지정 */
53
+ legend?: LegendOption;
54
+ /** px. 미지정 시 aspectRatio 사용 (vw/vh 강제 금지) */
55
+ height?: number;
56
+ aspectRatio?: number;
57
+ /** 차트 영역 여백(px). 라벨 잘림 조정 등에 사용. 미지정 시 valueLabel일 때만 기본 여백 적용 */
58
+ padding?: number | {
59
+ top?: number;
60
+ right?: number;
61
+ bottom?: number;
62
+ left?: number;
63
+ };
64
+ loading?: boolean;
65
+ /** 데이터 0건일 때 노출 (기본 문구 내장) */
66
+ empty?: React.ReactNode;
67
+ /** 값 라벨 표시(막대 위/조각 안). true=값 그대로, 함수=포맷터. 켤 때만 datalabels 플러그인 주입 */
68
+ valueLabel?: boolean | ((value: number) => string);
69
+ className?: string;
70
+ /** L1: 시리즈 색 일괄 지정 — cascade [2] */
71
+ colors?: PaletteInput;
72
+ /** L2: 프리셋 위에 deep-merge */
73
+ options?: ChartOptions;
74
+ /** L3: 프리셋 무시하고 raw 통째 대체 */
75
+ rawOptions?: ChartOptions;
76
+ };
77
+ export type BarChartProps = ChartBaseProps & {
78
+ data: CategoricalData;
79
+ orientation?: "vertical" | "horizontal";
80
+ stacked?: boolean;
81
+ /** L0 승격 스타일: 막대 모서리 둥글기 */
82
+ barRadius?: number;
83
+ barThickness?: number;
84
+ };
85
+ export type LineChartProps = ChartBaseProps & {
86
+ data: CategoricalData;
87
+ /** 면적 채우기 */
88
+ area?: boolean;
89
+ /** 곡선 보간 강도 0~1 (기본 0.4) */
90
+ tension?: number;
91
+ /** L0 승격 스타일 */
92
+ pointStyle?: PointStyle;
93
+ lineWidth?: number;
94
+ };
95
+ export type PieChartProps = ChartBaseProps & {
96
+ data: ProportionData;
97
+ };
98
+ export type DoughnutChartProps = ChartBaseProps & {
99
+ data: ProportionData;
100
+ /** 중앙 합계 라벨 */
101
+ showTotal?: boolean;
102
+ /** 0~1, 도넛 구멍 크기 (기본 0.6) */
103
+ cutout?: number;
104
+ };
105
+ /** ChartRenderer가 받는 통합 타입. type으로 좁히면 data가 자동 결정 → `as` 캐스팅 제거 */
106
+ export type AnyChartProps = ({
107
+ type: "bar";
108
+ } & BarChartProps) | ({
109
+ type: "line";
110
+ } & LineChartProps) | ({
111
+ type: "pie";
112
+ } & PieChartProps) | ({
113
+ type: "doughnut";
114
+ } & DoughnutChartProps);
@@ -0,0 +1,14 @@
1
+ import { default as React } from 'react';
2
+ type Props = React.PropsWithChildren<{
3
+ height?: number;
4
+ loading?: boolean;
5
+ empty?: React.ReactNode;
6
+ isEmpty?: boolean;
7
+ className?: string;
8
+ }>;
9
+ /**
10
+ * 차트 공통 컨테이너. 부모 레이아웃을 따르며(vw/vh 강제 금지) height 로만 높이를 제어.
11
+ * loading/empty 상태를 라이브러리 밖 표준 UI 로 흡수.
12
+ */
13
+ export declare const ChartFrame: ({ height, loading, empty, isEmpty, className, children, }: Props) => import("react/jsx-runtime").JSX.Element;
14
+ export {};
@@ -0,0 +1,11 @@
1
+ import { ChartData, ChartOptions, Plugin } from 'chart.js';
2
+ import { ChartKind } from './Chart.type';
3
+ type Props = {
4
+ kind: ChartKind;
5
+ data: ChartData;
6
+ options: ChartOptions;
7
+ plugins?: Plugin[];
8
+ };
9
+ /** 라이브러리(react-chartjs-2) 의존을 가두는 어댑터 층 [1] */
10
+ export declare const ChartRenderer: ({ kind, data, options, plugins }: Props) => import("react/jsx-runtime").JSX.Element;
11
+ export {};
@@ -0,0 +1,3 @@
1
+ import { BarChartProps } from '../Chart.type';
2
+ declare const BarChart: (props: BarChartProps) => import("react/jsx-runtime").JSX.Element;
3
+ export default BarChart;
@@ -0,0 +1,3 @@
1
+ import { DoughnutChartProps } from '../Chart.type';
2
+ declare const DoughnutChart: (props: DoughnutChartProps) => import("react/jsx-runtime").JSX.Element;
3
+ export default DoughnutChart;
@@ -0,0 +1,3 @@
1
+ import { LineChartProps } from '../Chart.type';
2
+ declare const LineChart: (props: LineChartProps) => import("react/jsx-runtime").JSX.Element;
3
+ export default LineChart;
@@ -0,0 +1,3 @@
1
+ import { PieChartProps } from '../Chart.type';
2
+ declare const PieChart: (props: PieChartProps) => import("react/jsx-runtime").JSX.Element;
3
+ export default PieChart;