@weing-dev/ui-kit-primitive 0.4.6 → 0.5.1

package/README.md

@@ -1,59 +1,102 @@
-# React + TypeScript + Vite
+# `@weing-dev/ui-kit-primitive`
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+weing 어드민/서비스 프런트의 **공통 UI 프리미티브** 패키지. 폼·네비게이션·피드백·표시·데이터(차트/테이블/캘린더/에디터/비디오)까지 화면 구성에 필요한 컴포넌트를 한곳에서 제공한다. 대부분 **Compound 컴포넌트 패턴**(`Button.Root` + `Button.Text` …)과 **CSS 변수 토큰 테마**로 만들어져 있다.
 
-Currently, two official plugins are available:
+> **화면/마크업 작업 전 필독 (사람·에이전트 공통)**
+> 새 컴포넌트를 만들기 전에 **[에이전트 UI 가이드 → `docs/ui-kit-agent-guide.md`](./docs/ui-kit-agent-guide.md)** 를 먼저 확인하라.
+> 아래 카탈로그의 40개 컴포넌트가 대부분의 화면 요구를 이미 커버한다. 중복 구현은 피한다.
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+관련 문서:
+- **[에이전트 UI 가이드](./docs/ui-kit-agent-guide.md)** — 목적→컴포넌트 매핑, 전체 API 카탈로그, 합성 예시, 소비 컨벤션, 금지/함정. (마크업 에이전트의 1차 참조 문서)
+- **[서브패스 import 가이드](./docs/subpath-imports.md)** — 번들 분리를 위한 서브패스별 import 규칙.
 
-## Expanding the ESLint configuration
+---
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+## 컴포넌트 인덱스
 
-- Configure the top-level `parserOptions` property like this:
+import 서브패스는 `@weing-dev/ui-kit-primitive/<서브패스>`. 자세한 props·예시는 [에이전트 UI 가이드](./docs/ui-kit-agent-guide.md) 참조.
 
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
+### Form — `/form`
+| 컴포넌트 | 용도 | 구조 |
+| --- | --- | --- |
+| `Button` | 액션 버튼(로딩·아이콘·텍스트 합성) | `Root / Text / Icon` |
+| `TextInput` | 한 줄 텍스트 입력(라벨·지우기·아이콘) | `Root / Label / Input / Erase / HelperText` |
+| `TextArea` | 여러 줄 입력(자동 높이·글자수) | `Root / Label / Input / Erase / HelperText / TextCount` |
+| `Dropdown` | 단일/다중 셀렉트(검색·popper) | `Root / Trigger / Menu / Item` |
+| `CheckBox` | 체크박스(단일/다중) | `Root / Trigger / Label / HelperText` |
+| `Radio` | 라디오(그룹 단일 선택) | `Root / Trigger / Label / HelperText` |
+| `Switch` | on/off 토글 | `Root / Trigger / Label` |
+| `Cascader` | 계층형 다단계 선택 | `Root / Menu / Column / Item` |
+| `OTPInput` | 고정 자리수 코드 입력 | `Root / Input` |
+| `Slider` | 단일/범위 슬라이더 | `Root / Progress / Thumb / Marks` |
+| `Stepper` | 다단계 진행 표시 | `Root / Step` |
+| `TimeInput` | 시작~종료 시간 범위 | `Root / Label / InputWrapper / Input / Colon / Separator / TimeRange / HelperText` |
+| `MobilePicker` | 휠(드럼) 피커 | `Root / Column / Item` |
+| `HelperText` | 입력 하단 상태 안내 문구 | 단일 |
 
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
-```
+### Navigation — `/navigation`
+| 컴포넌트 | 용도 | 구조 |
+| --- | --- | --- |
+| `Tab` | 탭 + 패널 전환 | `Root / List / Item / Panels / Panel` |
+| `Accordion` | 펼침/접힘 영역 | `Root / Trigger / Item` |
+| `Breadcrumb` | 경로 내비게이션 | `List / Link / Separator / Ellipsis` |
+| `Pagination` | 페이지네이션(offset/limit) | `Root / PageList / PageItem / Prev / Next` |
+| `LNB` | 좌측 글로벌 메뉴(+`makeNavigation`) | `Root / Logo / List / Item` |
+| `List` | 단일 행 리스트 아이템 | 단일 |
+| `ScrollSpy` | 스크롤 위치 추적 훅 | `useScrollSpy` 훅 |
+
+### Feedback — `/feedback`
+| 컴포넌트 | 용도 | 구조 |
+| --- | --- | --- |
+| `Modal` | 포털 딤드 모달 | 단일(`visible/onClose/dimmedColor`) |
+| `Popup` | Popover API 팝업(+`usePopup`) | `Root / Layer / Dimmed / Contents` |
+| `Sheet` | 드래그 가능한 4방향 시트 | `Root / Content / Dimmed` |
+
+### Display — `/display`
+| 컴포넌트 | 용도 | 구조 |
+| --- | --- | --- |
+| `Label` | 상태/카테고리 라벨(태그) | 단일 |
+| `Chips` | 선택 가능한 칩 | 단일 |
+| `Badge` | 카운트/점 배지 오버레이 | 단일 |
+| `Avatar` | 프로필 이미지(+그룹) | `Item / Group` |
+| `Thumbnail` | 업로드·수정·삭제 썸네일 | `Root / Image / Upload / EmptyImage / RemoveButton / EditButton` |
+| `Comment` | 상태 아이콘 + 보조 메시지 | 단일 |
+| `Divider` | 구분선 | 단일 |
+| `LazyImage` | 지연 로딩 이미지 | 단일 |
+| `QRCode` | QR 코드 | 단일 |
+| `BarCode` | EAN8/EAN13 바코드 | 단일 |
+
+### Data / Heavy (전용 서브패스 + 일부 CSS 별도)
+| 컴포넌트 | 서브패스 | 비고 |
+| --- | --- | --- |
+| `Table` | `/table` | `@tanstack/react-table`와 조합, 렌더 전용 |
+| `BarChart` `LineChart` `PieChart` `DoughnutChart` | `/chart` | chart.js 기반, `ChartThemeProvider` |
+| `Calendar` `ScrollCalendar` `WeeklyCalendar` | `/calendar` | dayjs 기반 |
+| `Editor` | `/editor` | Quill, **`editor/style.css` 별도 import 필수** |
+| `VideoPlayer` | `/video-player` | Video.js, **`video-player/style.css` 별도 import 필수** |
+| `Icon` `IconProvider` `ICON_NAMES` | `/icon` | 레지스트리 기반, 앱 루트를 `IconProvider`로 감싸야 함 |
+
+> **미사용/비공개(쓰지 말 것)**: `Dialog`(빈 스텁), `WisywygEditor`(레거시, 미export — 신규는 `Editor` 사용), `radar` 차트(미export).
+
+---
 
 ## 임포트 시 실제 로드량 확인 방법
 
-특정 export(예: `Icon`, `ICON_NAMES`)만 import 했을 때 실제로 얼마나 로드되는지 확인하려면:
+특정 export만 import 했을 때 실제 로드량을 확인하려면:
 
-1. **소비 앱(Storybook 등)에서 production 빌드** 후 번들 분석기로 해당 패키지/청크 크기 확인
-2. **실제 전송량**: 빌드 결과를 서빙한 뒤 브라우저 개발자도구 → Network 탭에서 JS 파일 크기 확인. Icon만 쓰는 페이지와 ICON_NAMES만 쓰는 페이지를 나눠 비교하면 됨
+1. 소비 앱에서 production 빌드 후 번들 분석기로 청크 크기 확인
+2. 빌드 산출물을 서빙한 뒤 브라우저 Network 탭에서 JS 파일 크기 비교
+
+모노레포에서 이 패키지를 **소스로** 참조하면 번들러가 tree-shaking으로 필요한 부분만 포함한다. 무거운 의존성(차트·에디터·비디오·테이블)은 서브패스가 의도적으로 분리돼 있으니 **루트 배럴 대신 서브패스 import**를 권장한다([근거](./docs/subpath-imports.md)).
+
+## 아이콘 추가
+
+`public/static/icon`에 SVG를 넣고 `pnpm icons:create` 실행 → svgr이 `src/components/Icons/*.tsx`를 생성하고 `generate-icon-names.cjs`가 `ICON_NAMES`를 재생성한다. `ICON_NAMES`는 수기 작성하지 않는다.
+
+## 빌드
+
+```bash
+pnpm build   # tsc -b && vite build && vite build --config vite.icon.config.ts
+```
 
-모노레포에서 이 패키지를 **소스로** 참조하면 번들러가 tree-shaking으로 필요한 부분만 포함한다.
+메인 라이브러리는 `vite.config.ts`, 서브패스 청크는 `vite.icon.config.ts`(이름은 icon이지만 chart·form 등 전 엔트리 포함).

package/dist/{Icon-DExqF865.js → Icon-DEdvzMs-.js}

@@ -1133,7 +1133,7 @@ const r = (t) => {
     }))
   }));
 }, L2 = M2(), _2 = y.createContext(L2), j2 = (t) => {
-  const e = y.useContext(_2);
+  const e = y.use(_2);
   return g(e, t);
 }, b2 = Object.freeze(["Add", "AddOutlined", "AddAPhoto", "ApprovalInactive", "ArrowDown", "ArrowRight", "ArrowUp", "ArrowDropDown", "ArticleOutlined", "AttachFile", "BackButton", "CalendarMonth", "CalendarToday", "CancleFilled", "Cancle", "CartFilled", "Cart", "Category", "CategoryOutlined", "Celebration", "Check", "CheckBadge", "CheckBoxRound", "CheckList", "CheckCircle", "ChevronLeft", "ChromeReaderMode", "Close", "Company", "CreditCard", "CropOriginal", "DensityMediumRound", "DoubleArrowDown", "DoubleArrowUp", "Download", "DragHandle", "Eco", "EditSquare", "EditNoteOutlined", "ErrorFilled", "Error", "ExpandAll", "ExpandLess", "ExpandMore", "Factory", "FeedbackOutlined", "FileUpload", "FilecheckInactive", "FileDownloadDoneFilled", "FileDownloadOutlined", "FullScreen", "FullScreenClose", "GoBefore", "GoNext", "HamburgerMenu", "HandshakeRound", "Home", "ImagecheckPlay", "ImportExport", "InfoFilled", "Inventory", "KakaoTalk", "ListAll", "LocalActivityOutlined", "LocalHospital", "LocalShipping", "Logout", "Menu", "Minus", "MinusOutlined", "ModeEdit", "More", "NaverBlog", "Naver", "Notification", "OrderApprove", "OrderInactive", "OrderPlay", "Outward", "Pause", "PayApprove", "PayInactive", "Payment", "PersonAddAlt", "Personcard", "PersonFilled", "PersonOutline", "PictureQuality", "Pip", "PipExit", "Play", "PlaybackSpeed", "PrintInactive", "PrintPlay", "Product", "ScheduleRound", "Search", "Search2", "SettingFilled", "Settings", "Share", "ShippingDone", "SubtitleFilled", "SubtitleOutlined", "SupportAgent", "SwapVert", "Task", "TrashOutlined", "Upload", "User", "VolumeOff", "VolumeUp", "WarningFilled", "Warning", "WarningAmber"]);
 function B2(t) {

package/dist/{color-B71xRiyK.js → baseColor-DYa5_IOB.js}

@@ -97,7 +97,7 @@ const e = {
   },
   blackBlack: "#000000",
   whiteWhite: "#ffffff"
-}, c = {
+}, f = {
   red: {
     Lighter: e.red.Red2,
     Light: e.red.Red4,
@@ -259,126 +259,9 @@ const e = {
   primary32: "#00a76f51",
   primary40: "#00a76f66",
   primary48: "#00a76f7a"
-}, o = {
-  light: {
-    textPrimary: e.grey.Grey9,
-    textSecondary: e.grey.Grey7,
-    textTertiary: e.grey.Grey6,
-    textDisabled: e.grey.Grey5,
-    backgroundDefault: e.whiteWhite,
-    backgroundPaper: e.whiteWhite,
-    backgroundSecond: r.grey8,
-    backgroundNeutral: e.grey.Grey2,
-    shadow8: r.grey8,
-    shadow12: r.grey12,
-    shadow20: r.grey20,
-    componentTextfieldFilled: r.grey8,
-    componentTextfieldUnderline: r.grey40,
-    componentTextfieldOutline: r.grey24,
-    actionHover: r.grey16,
-    actionDisabled: r.grey40,
-    actionDisabledBackground: r.grey16,
-    actionSelected: r.grey16,
-    actionFocus: r.grey48,
-    textError: e.red.Red6,
-    textSuccess: e.lightGreen.LightGreen6,
-    actionAction: e.grey.Grey6,
-    textWarning: e.gold.Gold6,
-    textContrast: e.whiteWhite,
-    inheritColor: e.whiteWhite,
-    inheritBgcolor: e.grey.Grey9,
-    inheritHover: e.grey.Grey8,
-    swapDarkLightRed: e.red.Red8,
-    swapDarkLightLightGreen: e.lightGreen.LightGreen8,
-    swapDarkLightDeepGreen: e.deepGreen.DeepGreen8,
-    swapDarkLightCyanBlue: e.cyanBlue.CyanBlue8,
-    swapDarkLightPurple: e.purple.Purple8,
-    swapDarkLightGold: e.gold.Gold8,
-    swapDarkLightBlue: e.blue.Blue8,
-    swapDarkLightPrimary: e.deepGreen.DeepGreen8
-  },
-  dark: {
-    textPrimary: e.whiteWhite,
-    textSecondary: e.grey.Grey5,
-    textTertiary: e.grey.Grey6,
-    textDisabled: e.grey.Grey7,
-    backgroundDefault: e.grey.Grey10,
-    backgroundPaper: e.grey.Grey9,
-    backgroundSecond: e.grey.Grey8,
-    backgroundNeutral: r.grey12,
-    shadow8: r.black8,
-    shadow12: r.black12,
-    shadow20: r.black20,
-    componentTextfieldFilled: r.grey8,
-    componentTextfieldUnderline: r.grey40,
-    componentTextfieldOutline: r.grey24,
-    actionHover: r.grey16,
-    actionDisabled: r.grey40,
-    actionDisabledBackground: r.grey20,
-    actionSelected: r.grey16,
-    actionFocus: r.grey8,
-    textError: e.red.Red6,
-    textSuccess: e.lightGreen.LightGreen6,
-    actionAction: e.grey.Grey5,
-    textWarning: e.gold.Gold6,
-    textContrast: e.blackBlack,
-    inheritColor: e.grey.Grey9,
-    inheritBgcolor: e.whiteWhite,
-    inheritHover: e.grey.Grey5,
-    swapDarkLightRed: e.red.Red4,
-    swapDarkLightLightGreen: e.lightGreen.LightGreen4,
-    swapDarkLightDeepGreen: e.deepGreen.DeepGreen4,
-    swapDarkLightCyanBlue: e.cyanBlue.CyanBlue4,
-    swapDarkLightPurple: e.purple.Purple4,
-    swapDarkLightGold: e.gold.Gold4,
-    swapDarkLightBlue: e.blue.Blue4,
-    swapDarkLightPrimary: e.deepGreen.DeepGreen4
-  },
-  primary: {
-    pLighter: c.deepGreen.Lighter,
-    pLight: c.deepGreen.Light,
-    pMain: c.deepGreen.Main,
-    pDark: c.deepGreen.Dark,
-    pDarker: c.deepGreen.Darker,
-    p4: r.deepGreen4,
-    p8: r.deepGreen8,
-    p12: r.deepGreen12,
-    p16: r.deepGreen16,
-    p20: r.deepGreen20,
-    p24: r.deepGreen24,
-    p32: r.deepGreen32,
-    p40: r.deepGreen40,
-    p48: r.deepGreen48,
-    pContrastText: c.whiteMain
-  }
-}, g = (a) => {
-  const l = Object.keys(a), i = (d, f) => Object.keys(d).reduce((n, p) => {
-    const t = d[p];
-    return typeof t == "object" ? n.concat(i(t, `${f}${p}`)) : n.concat(`--${f}${p}: ${t};
-`);
-  }, "");
-  return l.reduce((d, f) => {
-    const n = a[f];
-    return typeof n == "object" ? d.concat(i(n, f)) : d.concat(`--${f.replace(/_/g, "-")}: ${n};
-`);
-  }, "");
 };
-g(o.light), g(o.dark), g(o.primary), g(e), g(c), g(r);
-const G = (a) => `var(--${a.replace(/_/g, "-")})`, u = (a, l) => `var(--${a}${l.replace(/_/g, "-")})`, y = (a, l) => `${a.replace(/_/g, "-")}, ${l})`.replace(/(\))(\\,)/, "$2").replace(/(\d.)/g, "-$1"), h = Object.keys(o.light);
-h.reduce((a, l) => {
-  const i = o.light[l];
-  if (typeof i != "string") {
-    const d = Object.keys(i).reduce((f, n) => {
-      const p = i[n];
-      return f[n] = Array.isArray(p) ? y(u(l, n.replace(/_/g, "-").replace(/^[a-z]/, (t) => `-${t}`).replace(/([A-Z])/g, (t) => `-${t.toLocaleLowerCase()}`).replace(/(\d.)/g, "-$1")), p[1]) : u(l, n.replace(/_/g, "-").replace(/^[a-z]/, (t) => `-${t}`).replace(/([A-Z])/g, (t) => `-${t.toLocaleLowerCase()}`).replace(/(\d.)/g, "-$1")), f;
-    }, {});
-    return a[l] = d, a;
-  }
-  return a[l] = G(l), a;
-}, {});
 export {
   e as B,
-  c as S,
-  r as T,
-  o as c
+  f as S,
+  r as T
 };

package/dist/calendar.js

@@ -2,7 +2,7 @@ import { c as xe, j as $ } from "./compiler-runtime-BFrE5JtX.js";
 import S, { useLayoutEffect as In, useEffect as ee, useRef as J, useCallback as ve, useMemo as ie, useState as _e, createContext as gt, memo as Hn, useReducer as zn, useContext as ht } from "react";
 import { a as pt, g as Yt, c as Ft } from "./bind-D3ZJ5k4I.js";
 import C from "dayjs";
-import { a as dn } from "./Icon-DExqF865.js";
+import { a as dn } from "./Icon-DEdvzMs-.js";
 import { unstable_batchedUpdates as xt, createPortal as Pn } from "react-dom";
 import { u as Bn } from "./usePopper-DvYrGFkh.js";
 const jn = "_CaledarRoot_1715d_3", Fn = "_CalendarHeaderDate_1715d_9", Wn = "_CalendarDayTextList_1715d_27", Xn = "_CalednarDayTextColumn_1715d_34", Vn = "_sunday_1715d_57", Un = "_saturday_1715d_60", Zn = "_CalendarBody_1715d_63", qn = "_CalendarBodyColumn_1715d_67", Gn = "_selected_1715d_76", Kn = "_between_1715d_79", Jn = "_start_1715d_82", Qn = "_end_1715d_91", er = "_both_1715d_100", tr = "_today_1715d_103", nr = "_CalendarBodyColumnText_1715d_116", rr = {
@@ -442,7 +442,7 @@ const dr = /* @__PURE__ */ new Map([["ko", ["일", "월", "화", "수", "목", "
     excludeDates: c,
     minDate: l,
     maxDate: u
-  } = S.useContext(je), {
+  } = S.use(je), {
     currentWeekFirst: d,
     currentMonthFirst: h,
     calendarType: g,
@@ -450,7 +450,7 @@ const dr = /* @__PURE__ */ new Map([["ko", ["일", "월", "화", "수", "목", "
     isWeekDay: f,
     isMondayStart: m,
     selectedDate: D
-  } = S.useContext(je);
+  } = S.use(je);
   let y;
   if (Array.isArray(D)) {
     const x = D[0] || "", T = D[1] || "";
@@ -554,7 +554,7 @@ const dr = /* @__PURE__ */ new Map([["ko", ["일", "월", "화", "수", "목", "
     addWeek: c,
     maxDate: l,
     currentMonthFirst: u
-  } = S.useContext(je);
+  } = S.use(je);
   let d;
   e[0] !== i || e[1] !== c || e[2] !== a || e[3] !== s ? (d = () => {
     a === "month" ? i(s) : c(s);
@@ -580,7 +580,7 @@ const dr = /* @__PURE__ */ new Map([["ko", ["일", "월", "화", "수", "목", "
     subtractMonth: c,
     minDate: l,
     currentMonthFirst: u
-  } = S.useContext(je);
+  } = S.use(je);
   let d;
   e[0] !== a || e[1] !== s || e[2] !== c || e[3] !== i ? (d = () => {
     a === "month" ? c(s) : i(s);
@@ -606,7 +606,7 @@ const dr = /* @__PURE__ */ new Map([["ko", ["일", "월", "화", "수", "목", "
     isWeekend: s,
     isMondayStart: a,
     lang: i
-  } = S.useContext(je), c = S.useMemo(() => {
+  } = S.use(je), c = S.useMemo(() => {
     const l = [];
     if (!o && !s)
       return [];
@@ -641,7 +641,7 @@ const dr = /* @__PURE__ */ new Map([["ko", ["일", "월", "화", "수", "목", "
     format: r
   } = t, o = r === void 0 ? "YYYY-MM" : r, {
     currentDate: s
-  } = S.useContext(je);
+  } = S.use(je);
   let a;
   e[0] !== n ? (a = Ie("CalendarHeaderDate", n), e[0] = n, e[1] = a) : a = e[1];
   let i;
@@ -3602,7 +3602,7 @@ const he = Ft.bind(so), Hs = (t) => {
     popperOffset: g,
     eventItemAs: p,
     eventItemPopperAs: f
-  } = S.useContext(rt), {
+  } = S.use(rt), {
     setNodeRef: m,
     listeners: D,
     attributes: y,
@@ -3791,7 +3791,7 @@ const he = Ft.bind(so), Hs = (t) => {
     enableCreateByDrag: i,
     itemHeight: c,
     type: l
-  } = S.useContext(rt), u = a === void 0 ? [] : a, d = c === void 0 ? 48 : c, h = l === void 0 ? "default" : l, [g, p] = S.useState(null), [f, m] = S.useState(null);
+  } = S.use(rt), u = a === void 0 ? [] : a, d = c === void 0 ? 48 : c, h = l === void 0 ? "default" : l, [g, p] = S.useState(null), [f, m] = S.useState(null);
   let D;
   e[0] !== n ? (D = {
     id: n
@@ -3956,7 +3956,7 @@ ${$t} ~ ${Ke}`, Le = P && i;
     columnCount: r,
     minHour: o,
     maxHour: s
-  } = S.useContext(rt), a = Array.from({
+  } = S.use(rt), a = Array.from({
     length: r
   }, (l, u) => ({
     date: C(n).add(u, "day").format("YYYY-MM-DD"),
@@ -3972,7 +3972,7 @@ ${$t} ~ ${Ke}`, Le = P && i;
   const {
     currentDate: t = C().format("YYYY-MM-DD"),
     columnCount: e
-  } = S.useContext(rt), n = Array.from({
+  } = S.use(rt), n = Array.from({
     length: e
   }, (r, o) => ({
     realDate: C(t).add(o, "day"),
@@ -3998,7 +3998,7 @@ ${$t} ~ ${Ke}`, Le = P && i;
     maxHour: s,
     itemHeight: a,
     type: i
-  } = S.useContext(rt), c = a === void 0 ? 48 : a, l = i === void 0 ? "default" : i, u = s - o;
+  } = S.use(rt), c = a === void 0 ? 48 : a, l = i === void 0 ? "default" : i, u = s - o;
   let d;
   if (e[0] !== r || e[1] !== n || e[2] !== u || e[3] !== c || e[4] !== s || e[5] !== o || e[6] !== l) {
     const h = Array.from({

package/dist/chart.css

@@ -0,0 +1 @@
+@layer Chart{._ChartFrame_1t22s_2{position:relative;width:100%}._ChartState_1t22s_6{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:160px;color:var(--chartLabel, #637381);font:inherit}}

package/dist/chart.d.ts

@@ -1,2 +1,7 @@
-export { default as Chart } from '../components/Chart/Chart';
-export {};
+export { default as BarChart } from '../components/Chart/charts/BarChart';
+export { default as LineChart } from '../components/Chart/charts/LineChart';
+export { default as PieChart } from '../components/Chart/charts/PieChart';
+export { default as DoughnutChart } from '../components/Chart/charts/DoughnutChart';
+export { default as RadarChart } from '../components/Chart/charts/RadarChart';
+export { ChartThemeProvider } from '../components/Chart/Chart.theme';
+export type { BarChartProps, LineChartProps, PieChartProps, DoughnutChartProps, RadarChartProps, ChartBaseProps, AxisConfig, ChartThemeValue, ChartPreset, ChartStyleDefaults, SimpleDatum, ChartSeries, SeriesData, CategoricalData, ProportionData, PaletteInput, } from '../components/Chart/Chart.type';