@tipp/ui 1.0.25 → 1.0.27

package/dist/index.cjs

@@ -71,6 +71,7 @@ __export(src_exports, {
   Button: () => Button,
   Callout: () => import_themes8.Callout,
   Card: () => import_themes9.Card,
+  Chart: () => Chart,
   ChatBubbleIcon: () => import_react_icons.ChatBubbleIcon,
   Checkbox: () => Checkbox,
   CheckboxCards: () => import_themes11.CheckboxCards,
@@ -100,9 +101,11 @@ __export(src_exports, {
   FieldErrorWrapper: () => FieldErrorWrapper,
   FileIcon: () => import_react_icons.FileIcon,
   Flex: () => import_themes19.Flex,
+  Form: () => Form,
   GearIcon: () => import_react_icons.GearIcon,
   Grid: () => import_themes20.Grid,
   Heading: () => Heading2,
+  HorizontalBarChart: () => HorizontalBarChart,
   HoverCard: () => import_themes23.HoverCard,
   IconButton: () => import_themes24.IconButton,
   InfoCircledIcon: () => import_react_icons.InfoCircledIcon,
@@ -143,6 +146,7 @@ __export(src_exports, {
   TrashIcon: () => import_react_icons.TrashIcon,
   Trigger: () => Trigger2,
   Typo: () => Typo,
+  chartTheme: () => chart_theme_default,
   createColumnHelper: () => import_react_table2.createColumnHelper,
   toast: () => import_react_toastify2.toast,
   uiProps: () => uiProps,
@@ -699,17 +703,86 @@ var Drawer = {
   Description: Dialog2.Description
 };
 
+// src/atoms/form.tsx
+var RadixForm = __toESM(require("@radix-ui/react-form"), 1);
+var import_react12 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Root5 = (0, import_react12.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      RadixForm.Root,
+      __spreadProps(__spreadValues({}, rest), {
+        className: `FormRoot ${className || ""}`,
+        ref,
+        children
+      })
+    );
+  }
+);
+Root5.displayName = "FORM_ROOT";
+var Field2 = (0, import_react12.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      RadixForm.Field,
+      __spreadProps(__spreadValues({}, rest), {
+        className: `FormField ${className || ""}`,
+        ref,
+        children
+      })
+    );
+  }
+);
+Field2.displayName = "FORM_FIELD";
+var Label2 = (0, import_react12.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      RadixForm.Label,
+      __spreadProps(__spreadValues({}, rest), {
+        className: `FormLabel ${className || ""}`,
+        ref,
+        children
+      })
+    );
+  }
+);
+Label2.displayName = "FORM_Label";
+var Message2 = (0, import_react12.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      RadixForm.Message,
+      __spreadProps(__spreadValues({}, rest), {
+        className: `FormMessage ${className || ""}`,
+        ref,
+        children
+      })
+    );
+  }
+);
+Message2.displayName = "FORM_Message";
+var Form = {
+  Root: Root5,
+  Field: Field2,
+  Label: Label2,
+  Message: Message2,
+  Control: RadixForm.Control,
+  Submit: RadixForm.Submit
+};
+
 // src/molecules/expand-table/index.tsx
 var import_react_table2 = require("@tanstack/react-table");
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/icons/down.tsx
 var React7 = __toESM(require("react"), 1);
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var TriangleArrowDownIcon = React7.forwardRef(
   (_a, forwardedRef) => {
     var _b = _a, { color = "currentColor" } = _b, props = __objRest(_b, ["color"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "svg",
       __spreadProps(__spreadValues({
         fill: "none",
@@ -719,7 +792,7 @@ var TriangleArrowDownIcon = React7.forwardRef(
         xmlns: "http://www.w3.org/2000/svg"
       }, props), {
         ref: forwardedRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "path",
           {
             d: "M7.10844 0.8125H0.891554C0.197392 0.8125 -0.177096 1.62672 0.274659 2.15377L3.3831 5.78029C3.70737 6.1586 4.29263 6.1586 4.6169 5.78029L7.72534 2.15377C8.1771 1.62672 7.80261 0.8125 7.10844 0.8125Z",
@@ -734,11 +807,11 @@ TriangleArrowDownIcon.displayName = "ArrowDownIcon";
 
 // src/icons/up.tsx
 var React8 = __toESM(require("react"), 1);
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var TriangleArrowUpIcon = React8.forwardRef(
   (_a, forwardedRef) => {
     var _b = _a, { color = "currentColor" } = _b, props = __objRest(_b, ["color"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "svg",
       __spreadProps(__spreadValues({
         fill: "none",
@@ -748,7 +821,7 @@ var TriangleArrowUpIcon = React8.forwardRef(
         xmlns: "http://www.w3.org/2000/svg"
       }, props), {
         ref: forwardedRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "path",
           {
             d: "M0.891555 6.1875L7.10845 6.1875C7.80261 6.1875 8.1771 5.37328 7.72534 4.84623L4.6169 1.21971C4.29263 0.841403 3.70737 0.841403 3.3831 1.21971L0.274659 4.84623C-0.177095 5.37328 0.197393 6.1875 0.891555 6.1875Z",
@@ -763,22 +836,22 @@ TriangleArrowUpIcon.displayName = "ArrowUpIcon";
 
 // src/molecules/expand-table/row.tsx
 var import_react_table = require("@tanstack/react-table");
-var import_react12 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function Row(props) {
   const { row, ExpandComp, gridColTemp } = props;
-  const [open, setOpen] = (0, import_react12.useState)(false);
-  const onClickRow = (0, import_react12.useCallback)(() => {
+  const [open, setOpen] = (0, import_react13.useState)(false);
+  const onClickRow = (0, import_react13.useCallback)(() => {
     var _a;
     (_a = props.onRowClick) == null ? void 0 : _a.call(props, row.original);
     setOpen((prev) => !prev);
   }, [props, row.original]);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
       className: `tr-wrapper ${ExpandComp ? "expandable" : ""}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "button",
           {
             className: "tr",
@@ -788,7 +861,7 @@ function Row(props) {
             children: row.getVisibleCells().map((cell) => {
               var _a, _b;
               const autoSize = (_a = cell.column.columnDef.meta) == null ? void 0 : _a.autoSize;
-              return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
                 "div",
                 {
                   className: "td",
@@ -798,7 +871,7 @@ function Row(props) {
                   },
                   children: [
                     (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()),
-                    ((_b = cell.column.columnDef.meta) == null ? void 0 : _b.OpenBtn) ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    ((_b = cell.column.columnDef.meta) == null ? void 0 : _b.OpenBtn) ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                       cell.column.columnDef.meta.OpenBtn,
                       {
                         data: row.original,
@@ -814,7 +887,7 @@ function Row(props) {
           },
           `tr_${row.id}`
         ),
-        ExpandComp ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Collapse, { open, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "expand-comp-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ExpandComp, { row }) }) }) : null
+        ExpandComp ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Collapse, { open, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "expand-comp-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ExpandComp, { row }) }) }) : null
       ]
     },
     `tr-wrapper_${row.id}`
@@ -822,10 +895,10 @@ function Row(props) {
 }
 
 // src/molecules/expand-table/index.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function ExpandTable(props) {
   const { data, columns, ExpandComp, placeholder, onRowClick } = props;
-  const [sorting, setSorting] = (0, import_react13.useState)([]);
+  const [sorting, setSorting] = (0, import_react14.useState)([]);
   const { getRowModel, getHeaderGroups } = (0, import_react_table2.useReactTable)({
     data: data || [],
     columns,
@@ -836,7 +909,7 @@ function ExpandTable(props) {
     },
     onSortingChange: setSorting
   });
-  const gridColTemp = (0, import_react13.useMemo)(() => {
+  const gridColTemp = (0, import_react14.useMemo)(() => {
     return columns.map((col) => {
       var _a;
       if ((_a = col.meta) == null ? void 0 : _a.autoSize)
@@ -845,8 +918,8 @@ function ExpandTable(props) {
     }).join(" ");
   }, [columns]);
   const rowModels = getRowModel();
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "expand-table", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "expand-table", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "div",
       {
         className: "tr",
@@ -854,30 +927,30 @@ function ExpandTable(props) {
         children: headerGroup.headers.map((header) => {
           const sortable = header.column.getCanSort();
           const sortedState = header.column.getIsSorted();
-          return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "th", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "th", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
             "button",
             {
               onClick: header.column.getToggleSortingHandler(),
               style: sortable ? { cursor: "pointer" } : void 0,
               type: "button",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Typo, { variant: "body", children: (0, import_react_table2.flexRender)(
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Typo, { variant: "body", children: (0, import_react_table2.flexRender)(
                   header.column.columnDef.header,
                   header.getContext()
                 ) }),
-                sortable ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                sortable ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                   import_themes19.Flex,
                   {
                     direction: "column",
                     style: { marginLeft: "var(--space-2)" },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                         TriangleArrowUpIcon,
                         {
                           color: sortedState === "asc" ? "var(--iris-10)" : "var(--iris-6)"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                         TriangleArrowDownIcon,
                         {
                           color: sortedState === "desc" ? "var(--iris-10)" : "var(--iris-6)"
@@ -893,10 +966,10 @@ function ExpandTable(props) {
       },
       headerGroup.id
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "tbody", children: [
-      rowModels.rows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "tr", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_themes19.Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Typo, { color: "gray", mb: "6", mt: "6", variant: "body", children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder"),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "tbody", children: [
+      rowModels.rows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "tr", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_themes19.Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Typo, { color: "gray", mb: "6", mt: "6", variant: "body", children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder"),
       rowModels.rows.map((row) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           Row,
           {
             ExpandComp,
@@ -912,14 +985,14 @@ function ExpandTable(props) {
 }
 
 // src/molecules/navigation.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function Navigation({
   items,
   fontColor,
   backgroundColor,
   activeKey
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     import_themes19.Flex,
     {
       direction: "column",
@@ -931,13 +1004,13 @@ function Navigation({
       },
       children: items == null ? void 0 : items.map((item) => {
         const { key, title, icon, itemRender, onClick, children } = item;
-        return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_themes19.Flex, { direction: "column", onClick, children: [
-          itemRender ? itemRender(item) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_themes19.Flex, { align: "center", gap: "3", height: "36px", pl: "4", pr: "4", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_themes19.Flex, { direction: "column", onClick, children: [
+          itemRender ? itemRender(item) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_themes19.Flex, { align: "center", gap: "3", height: "36px", pl: "4", pr: "4", children: [
             icon,
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Typo, { variant: "subtitle", children: title })
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Typo, { variant: "subtitle", children: title })
           ] }),
           children == null ? void 0 : children.map((menu) => {
-            return menu.itemRender ? menu.itemRender(menu) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            return menu.itemRender ? menu.itemRender(menu) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               Button,
               {
                 className: `tipp-navigation-button ${activeKey === menu.key ? "active" : ""}`,
@@ -957,14 +1030,14 @@ function Navigation({
 }
 
 // src/molecules/date-picker/index.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var RDP = __toESM(require("react-datepicker"), 1);
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var ReactDatePicker = RDP.default.default || RDP.default || RDP;
-var DatePicker = (0, import_react14.forwardRef)(
+var DatePicker = (0, import_react15.forwardRef)(
   (props, ref) => {
     const _a = props, { size = "medium" } = _a, rest = __objRest(_a, ["size"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       ReactDatePicker,
       __spreadProps(__spreadValues({
         dateFormat: "yyyy/MM/dd",
@@ -992,33 +1065,33 @@ var renderCustomHeader = (props) => {
   } = props;
   const year = date.getFullYear();
   const month = date.getMonth();
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_themes19.Flex, { align: "center", justify: "between", pb: "2", pl: "2", pr: "2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_themes19.Flex, { align: "center", justify: "between", pb: "2", pl: "2", pr: "2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       import_themes24.IconButton,
       {
         disabled: prevMonthButtonDisabled,
         onClick: decreaseMonth,
         variant: "ghost",
-        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_icons.ChevronLeftIcon, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_icons.ChevronLeftIcon, {})
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_themes19.Flex, { gap: "3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Heading2, { variant: "subtitle1", weight: "regular", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_themes19.Flex, { gap: "3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Heading2, { variant: "subtitle1", weight: "regular", children: [
         year,
         "\uB144"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Heading2, { variant: "subtitle1", weight: "regular", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Heading2, { variant: "subtitle1", weight: "regular", children: [
         month + 1,
         "\uC6D4"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       import_themes24.IconButton,
       {
         disabled: nextMonthButtonDisabled,
         onClick: increaseMonth,
         variant: "ghost",
-        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_icons.ChevronRightIcon, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_icons.ChevronRightIcon, {})
       }
     )
   ] });
@@ -1029,6 +1102,200 @@ var import_themes51 = require("@radix-ui/themes");
 
 // src/ui-props/index.ts
 var uiProps = __toESM(require("@radix-ui/themes/dist/cjs/props/index.js"), 1);
+
+// src/charts/chart.tsx
+var import_react16 = require("react");
+var import_react_resize_detector = require("react-resize-detector");
+var import_echarts_for_react = __toESM(require("echarts-for-react"), 1);
+var import_lodash_es = require("lodash-es");
+
+// src/charts/chart-theme.json
+var chart_theme_default = {
+  version: 1,
+  themeName: "customed",
+  theme: {
+    seriesCnt: "5",
+    backgroundColor: "rgba(0,0,0,0)",
+    titleColor: "#1c2024",
+    subtitleColor: "#8d8d8d",
+    textColorShow: false,
+    textColor: "#333",
+    markTextColor: "#ffffff",
+    color: [
+      "#ffe629",
+      "#3e63dd",
+      "#ec9455",
+      "#5bb98b",
+      "#cb1d63",
+      "#3ba272",
+      "#fc8452",
+      "#9a60b4",
+      "#ea7ccc"
+    ],
+    borderColor: "#8d8d8d",
+    borderWidth: 0,
+    visualMapColor: ["#bf444c", "#d88273", "#f6efa6"],
+    legendTextColor: "#1c2024",
+    kColor: "#eb5454",
+    kColor0: "#47b262",
+    kBorderColor: "#eb5454",
+    kBorderColor0: "#47b262",
+    kBorderWidth: 1,
+    lineWidth: 2,
+    symbolSize: 4,
+    symbol: "emptyCircle",
+    symbolBorderWidth: 1,
+    lineSmooth: false,
+    graphLineWidth: 1,
+    graphLineColor: "#aaa",
+    mapLabelColor: "#000",
+    mapLabelColorE: "rgb(100,0,0)",
+    mapBorderColor: "#444",
+    mapBorderColorE: "#444",
+    mapBorderWidth: 0.5,
+    mapBorderWidthE: 1,
+    mapAreaColor: "#eee",
+    mapAreaColorE: "rgba(255,215,0,0.8)",
+    axes: [
+      {
+        type: "all",
+        name: "\u901A\u7528\u5750\u6807\u8F74",
+        axisLineShow: true,
+        axisLineColor: "#6E7079",
+        axisTickShow: true,
+        axisTickColor: "#6E7079",
+        axisLabelShow: true,
+        axisLabelColor: "#6E7079",
+        splitLineShow: true,
+        splitLineColor: ["#E0E6F1"],
+        splitAreaShow: false,
+        splitAreaColor: ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"]
+      },
+      {
+        type: "category",
+        name: "\u7C7B\u76EE\u5750\u6807\u8F74",
+        axisLineShow: true,
+        axisLineColor: "#6E7079",
+        axisTickShow: true,
+        axisTickColor: "#6E7079",
+        axisLabelShow: true,
+        axisLabelColor: "#6E7079",
+        splitLineShow: false,
+        splitLineColor: ["#E0E6F1"],
+        splitAreaShow: false,
+        splitAreaColor: ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"]
+      },
+      {
+        type: "value",
+        name: "\u6570\u503C\u5750\u6807\u8F74",
+        axisLineShow: false,
+        axisLineColor: "#6E7079",
+        axisTickShow: false,
+        axisTickColor: "#6E7079",
+        axisLabelShow: true,
+        axisLabelColor: "#6E7079",
+        splitLineShow: true,
+        splitLineColor: ["#E0E6F1"],
+        splitAreaShow: false,
+        splitAreaColor: ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"]
+      },
+      {
+        type: "log",
+        name: "\u5BF9\u6570\u5750\u6807\u8F74",
+        axisLineShow: false,
+        axisLineColor: "#6E7079",
+        axisTickShow: false,
+        axisTickColor: "#6E7079",
+        axisLabelShow: true,
+        axisLabelColor: "#6E7079",
+        splitLineShow: true,
+        splitLineColor: ["#E0E6F1"],
+        splitAreaShow: false,
+        splitAreaColor: ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"]
+      },
+      {
+        type: "time",
+        name: "\u65F6\u95F4\u5750\u6807\u8F74",
+        axisLineShow: true,
+        axisLineColor: "#6E7079",
+        axisTickShow: true,
+        axisTickColor: "#6E7079",
+        axisLabelShow: true,
+        axisLabelColor: "#6E7079",
+        splitLineShow: false,
+        splitLineColor: ["#E0E6F1"],
+        splitAreaShow: false,
+        splitAreaColor: ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"]
+      }
+    ],
+    axisSeperateSetting: true,
+    toolboxColor: "#8d8d8d",
+    toolboxEmphasisColor: "#1c2024",
+    tooltipAxisColor: "#cccccc",
+    tooltipAxisWidth: 1,
+    timelineLineColor: "#dae1f5",
+    timelineLineWidth: 2,
+    timelineItemColor: "#a4b1d7",
+    timelineItemColorE: "#ffffff",
+    timelineCheckColor: "#316bf3",
+    timelineCheckBorderColor: "#ffffff",
+    timelineItemBorderWidth: 1,
+    timelineControlColor: "#a4b1d7",
+    timelineControlBorderColor: "#a4b1d7",
+    timelineControlBorderWidth: 1,
+    timelineLabelColor: "#a4b1d7"
+  }
+};
+
+// src/charts/chart.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function Chart(props) {
+  const { width, height, ref } = (0, import_react_resize_detector.useResizeDetector)({
+    handleHeight: false,
+    refreshMode: "debounce",
+    refreshRate: 100
+  });
+  const option = (0, import_react16.useMemo)(() => {
+    const baseOption = {
+      textStyle: { fontFamily: "Noto Sans KR" },
+      tooltip: { textStyle: { fontSize: 16 } }
+    };
+    return (0, import_lodash_es.merge)(baseOption, props.option);
+  }, [props.option]);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref, style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_echarts_for_react.default,
+    __spreadProps(__spreadValues({
+      opts: { renderer: "svg" },
+      style: { width, height },
+      theme: chart_theme_default
+    }, props), {
+      option
+    })
+  ) });
+}
+
+// src/charts/horizontal-bar-chart.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function HorizontalBarChart(props) {
+  const { total, value, backgroundColor, barColor, height } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    "div",
+    {
+      className: "tipp_horizontal-bar-chart bar-wrapper",
+      style: { height, backgroundColor },
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        "div",
+        {
+          style: {
+            width: `${Math.round(value / total * 100)}%`,
+            height: "100%"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "bar", style: { backgroundColor: barColor } })
+        }
+      )
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AlertDialog,
@@ -1043,6 +1310,7 @@ var uiProps = __toESM(require("@radix-ui/themes/dist/cjs/props/index.js"), 1);
   Button,
   Callout,
   Card,
+  Chart,
   ChatBubbleIcon,
   Checkbox,
   CheckboxCards,
@@ -1072,9 +1340,11 @@ var uiProps = __toESM(require("@radix-ui/themes/dist/cjs/props/index.js"), 1);
   FieldErrorWrapper,
   FileIcon,
   Flex,
+  Form,
   GearIcon,
   Grid,
   Heading,
+  HorizontalBarChart,
   HoverCard,
   IconButton,
   InfoCircledIcon,
@@ -1115,6 +1385,7 @@ var uiProps = __toESM(require("@radix-ui/themes/dist/cjs/props/index.js"), 1);
   TrashIcon,
   Trigger,
   Typo,
+  chartTheme,
   createColumnHelper,
   toast,
   uiProps,