@tipp/ui 1.0.7 → 1.0.8

package/dist/chunk-TG7PURWS.js

@@ -0,0 +1,18 @@
+// src/charts/horizontal-bar-chart.tsx
+import { jsx } from "react/jsx-runtime";
+function HorizontalBarChart(props) {
+  const { total, value, backgroundColor, barColor, height } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "tipp_horizontal-bar-chart bar-wrapper",
+      style: { height, backgroundColor },
+      children: /* @__PURE__ */ jsx("div", { style: { width: `${Math.round(value / total * 100)}%`, height }, children: /* @__PURE__ */ jsx("div", { className: "bar", style: { backgroundColor: barColor } }) })
+    }
+  );
+}
+
+export {
+  HorizontalBarChart
+};
+//# sourceMappingURL=chunk-TG7PURWS.js.map

package/dist/chunk-TG7PURWS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/charts/horizontal-bar-chart.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface HorizontalBarChartProps {\n  /** 100% 바가 뜻하는 전체 값 */\n  total: number;\n  /** 화면에 채워져보이는 값 */\n  value: number;\n  /** 배경 색상 */\n  backgroundColor?: string;\n  /** 바의 색상 */\n  barColor?: string;\n  /** 바의 높이 */\n  height?: number;\n}\n\nexport function HorizontalBarChart(\n  props: HorizontalBarChartProps\n): React.ReactNode {\n  const { total, value, backgroundColor, barColor, height } = props;\n  return (\n    <div\n      className=\"tipp_horizontal-bar-chart bar-wrapper\"\n      style={{ height, backgroundColor }}\n    >\n      <div style={{ width: `${Math.round((value / total) * 100)}%`, height }}>\n        <div className=\"bar\" style={{ backgroundColor: barColor }} />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAyBQ;AAVD,SAAS,mBACd,OACiB;AACjB,QAAM,EAAE,OAAO,OAAO,iBAAiB,UAAU,OAAO,IAAI;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,QAAQ,gBAAgB;AAAA,MAEjC,8BAAC,SAAI,OAAO,EAAE,OAAO,GAAG,KAAK,MAAO,QAAQ,QAAS,GAAG,CAAC,KAAK,OAAO,GACnE,8BAAC,SAAI,WAAU,OAAM,OAAO,EAAE,iBAAiB,SAAS,GAAG,GAC7D;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/index.css

@@ -27857,3 +27857,30 @@ h2.react-datepicker__current-month{
 .tipp-navigation-button.active{
   background-color: var(--white-a3);
 }
+@keyframes bar-scale-change {
+  0%{
+    width: 0;
+  }
+  100%{
+    width: 100%;
+  }
+}
+.tipp_horizontal-bar-chart.bar-wrapper{
+  width: 100%;
+  height: 8px;
+  overflow: hidden;
+  position: relative;
+  border-radius: 9999px;
+  background-color: var(--gray-5);
+}
+.tipp_horizontal-bar-chart.bar-wrapper .bar{
+  height: 100%;
+  width: 0;
+  background-color: var(--yellow-9);
+  animation-name: bar-scale-change;
+  animation-duration: 0.5s;
+  animation-delay: 0.5s;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: forwards;
+  transform-origin: left center;
+}

package/dist/index.js

@@ -1,27 +1,36 @@
+import {
+  uiProps
+} from "./chunk-NVKNDAIN.js";
 import "./chunk-DF7LG3AO.js";
 import {
   ExpandTable,
   createColumnHelper
-} from "./chunk-K66WIGIV.js";
+} from "./chunk-7FQZ3OZO.js";
 import "./chunk-PBPRWY2V.js";
+import "./chunk-BSTJBBEX.js";
 import "./chunk-NDUKDKGB.js";
 import {
   Navigation
-} from "./chunk-IBR5PQVX.js";
+} from "./chunk-QOY42XM2.js";
 import {
   ThemeProvider
 } from "./chunk-PL3Q4UVY.js";
 import {
   useThemeContext
 } from "./chunk-MMGP4GEQ.js";
-import {
-  uiProps
-} from "./chunk-NVKNDAIN.js";
-import "./chunk-BSTJBBEX.js";
 import "./chunk-MASTHXWN.js";
 import {
   DatePicker
 } from "./chunk-IIBITN2G.js";
+import {
+  Spinner
+} from "./chunk-FR2GDOU2.js";
+import {
+  Strong
+} from "./chunk-74DX4CU7.js";
+import {
+  Switch
+} from "./chunk-OYM4XCHQ.js";
 import {
   TabNav
 } from "./chunk-YJ7ZFOYL.js";
@@ -34,6 +43,15 @@ import {
 import {
   TextField
 } from "./chunk-JPIZP2PZ.js";
+import {
+  RadioGroup
+} from "./chunk-6DJOIRMF.js";
+import {
+  Radio
+} from "./chunk-FPD73OHW.js";
+import {
+  ScrollArea
+} from "./chunk-ZKZDVS7G.js";
 import {
   Section
 } from "./chunk-MUNMDHRF.js";
@@ -50,17 +68,17 @@ import {
   Skeleton
 } from "./chunk-5H3YPCZK.js";
 import {
-  Spinner
-} from "./chunk-FR2GDOU2.js";
+  Inset
+} from "./chunk-XQOL7UBI.js";
 import {
-  Strong
-} from "./chunk-74DX4CU7.js";
+  Kbd
+} from "./chunk-TULWX7D6.js";
 import {
-  Switch
-} from "./chunk-OYM4XCHQ.js";
+  Link
+} from "./chunk-XQOZWYUA.js";
 import {
   Pagination
-} from "./chunk-LPUSIN3M.js";
+} from "./chunk-R6PYUH56.js";
 import {
   Popover
 } from "./chunk-5AVBYDPB.js";
@@ -74,14 +92,14 @@ import {
   RadioCards
 } from "./chunk-6IVCARWS.js";
 import {
-  RadioGroup
-} from "./chunk-6DJOIRMF.js";
+  Em
+} from "./chunk-2DZ2Y3JI.js";
 import {
-  Radio
-} from "./chunk-FPD73OHW.js";
+  FieldErrorWrapper
+} from "./chunk-CHHLIPDN.js";
 import {
-  ScrollArea
-} from "./chunk-ZKZDVS7G.js";
+  Flex
+} from "./chunk-25HMMI7R.js";
 import {
   Grid
 } from "./chunk-EGEQY3KT.js";
@@ -95,14 +113,14 @@ import {
   IconButton
 } from "./chunk-O3DNDMV3.js";
 import {
-  Inset
-} from "./chunk-XQOL7UBI.js";
+  Checkbox
+} from "./chunk-JEHDCZQU.js";
 import {
-  Kbd
-} from "./chunk-TULWX7D6.js";
+  Code
+} from "./chunk-OHMOP5PV.js";
 import {
-  Link
-} from "./chunk-XQOZWYUA.js";
+  Collapse
+} from "./chunk-OCJNQGHN.js";
 import {
   Container
 } from "./chunk-Q37G2GS6.js";
@@ -121,18 +139,18 @@ import {
 import {
   Tooltip
 } from "./chunk-ACVANQJ4.js";
-import {
-  Em
-} from "./chunk-2DZ2Y3JI.js";
-import {
-  FieldErrorWrapper
-} from "./chunk-CNQ7RNNY.js";
 import {
   Typo
 } from "./chunk-O3XTRD7R.js";
 import {
-  Flex
-} from "./chunk-25HMMI7R.js";
+  Badge
+} from "./chunk-ALOPZ54P.js";
+import {
+  Blockquote
+} from "./chunk-YGL6SWKN.js";
+import {
+  Box
+} from "./chunk-4Y5BEXVN.js";
 import {
   Button
 } from "./chunk-AQX7DQLI.js";
@@ -148,15 +166,6 @@ import {
 import {
   CheckboxGroup
 } from "./chunk-IQEEPHOY.js";
-import {
-  Checkbox
-} from "./chunk-JEHDCZQU.js";
-import {
-  Code
-} from "./chunk-OHMOP5PV.js";
-import {
-  Collapse
-} from "./chunk-OCJNQGHN.js";
 import {
   BarChartIcon,
   BookmarkFilledIcon,
@@ -184,15 +193,6 @@ import {
 import {
   Avatar
 } from "./chunk-CZEGRZBK.js";
-import {
-  Badge
-} from "./chunk-ALOPZ54P.js";
-import {
-  Blockquote
-} from "./chunk-YGL6SWKN.js";
-import {
-  Box
-} from "./chunk-4Y5BEXVN.js";
 import "./chunk-N552FDTV.js";
 export {
   AlertDialog,

package/dist/molecules/expand-table/index.js

@@ -1,64 +1,64 @@
 import {
   ExpandTable,
   createColumnHelper
-} from "../../chunk-K66WIGIV.js";
+} from "../../chunk-7FQZ3OZO.js";
 import "../../chunk-PBPRWY2V.js";
-import "../../chunk-NDUKDKGB.js";
 import "../../chunk-BSTJBBEX.js";
+import "../../chunk-NDUKDKGB.js";
 import "../../chunk-MASTHXWN.js";
 import "../../chunk-IIBITN2G.js";
+import "../../chunk-FR2GDOU2.js";
+import "../../chunk-74DX4CU7.js";
+import "../../chunk-OYM4XCHQ.js";
 import "../../chunk-YJ7ZFOYL.js";
 import "../../chunk-5ZITU5L7.js";
 import "../../chunk-ILRUXI2E.js";
 import "../../chunk-JPIZP2PZ.js";
+import "../../chunk-6DJOIRMF.js";
+import "../../chunk-FPD73OHW.js";
+import "../../chunk-ZKZDVS7G.js";
 import "../../chunk-MUNMDHRF.js";
 import "../../chunk-TVDKGMBI.js";
 import "../../chunk-355MU6BH.js";
 import "../../chunk-HYITAA4J.js";
 import "../../chunk-5H3YPCZK.js";
-import "../../chunk-FR2GDOU2.js";
-import "../../chunk-74DX4CU7.js";
-import "../../chunk-OYM4XCHQ.js";
-import "../../chunk-LPUSIN3M.js";
+import "../../chunk-XQOL7UBI.js";
+import "../../chunk-TULWX7D6.js";
+import "../../chunk-XQOZWYUA.js";
+import "../../chunk-R6PYUH56.js";
 import "../../chunk-5AVBYDPB.js";
 import "../../chunk-365QMK4D.js";
 import "../../chunk-YO3BQW6S.js";
 import "../../chunk-6IVCARWS.js";
-import "../../chunk-6DJOIRMF.js";
-import "../../chunk-FPD73OHW.js";
-import "../../chunk-ZKZDVS7G.js";
+import "../../chunk-2DZ2Y3JI.js";
+import "../../chunk-CHHLIPDN.js";
+import "../../chunk-25HMMI7R.js";
 import "../../chunk-EGEQY3KT.js";
 import "../../chunk-HLOY6BIP.js";
 import "../../chunk-O3T3TM3V.js";
 import "../../chunk-O3DNDMV3.js";
-import "../../chunk-XQOL7UBI.js";
-import "../../chunk-TULWX7D6.js";
-import "../../chunk-XQOZWYUA.js";
+import "../../chunk-JEHDCZQU.js";
+import "../../chunk-OHMOP5PV.js";
+import "../../chunk-OCJNQGHN.js";
 import "../../chunk-Q37G2GS6.js";
 import "../../chunk-VTJZMOSP.js";
 import "../../chunk-P6B2PNYI.js";
 import "../../chunk-YTZSKMX3.js";
 import "../../chunk-4IKPNQV5.js";
 import "../../chunk-ACVANQJ4.js";
-import "../../chunk-2DZ2Y3JI.js";
-import "../../chunk-CNQ7RNNY.js";
 import "../../chunk-O3XTRD7R.js";
-import "../../chunk-25HMMI7R.js";
+import "../../chunk-ALOPZ54P.js";
+import "../../chunk-YGL6SWKN.js";
+import "../../chunk-4Y5BEXVN.js";
 import "../../chunk-AQX7DQLI.js";
 import "../../chunk-B6XJN6EC.js";
 import "../../chunk-FYEASFUU.js";
 import "../../chunk-MIMJ7LON.js";
 import "../../chunk-IQEEPHOY.js";
-import "../../chunk-JEHDCZQU.js";
-import "../../chunk-OHMOP5PV.js";
-import "../../chunk-OCJNQGHN.js";
 import "../../chunk-EK4ZFDYD.js";
 import "../../chunk-J242TTFH.js";
 import "../../chunk-EAXUQEO5.js";
 import "../../chunk-CZEGRZBK.js";
-import "../../chunk-ALOPZ54P.js";
-import "../../chunk-YGL6SWKN.js";
-import "../../chunk-4Y5BEXVN.js";
 import "../../chunk-N552FDTV.js";
 export {
   ExpandTable,

package/dist/molecules/expand-table/row.js

@@ -3,58 +3,58 @@ import {
 } from "../../chunk-PBPRWY2V.js";
 import "../../chunk-MASTHXWN.js";
 import "../../chunk-IIBITN2G.js";
+import "../../chunk-FR2GDOU2.js";
+import "../../chunk-74DX4CU7.js";
+import "../../chunk-OYM4XCHQ.js";
 import "../../chunk-YJ7ZFOYL.js";
 import "../../chunk-5ZITU5L7.js";
 import "../../chunk-ILRUXI2E.js";
 import "../../chunk-JPIZP2PZ.js";
+import "../../chunk-6DJOIRMF.js";
+import "../../chunk-FPD73OHW.js";
+import "../../chunk-ZKZDVS7G.js";
 import "../../chunk-MUNMDHRF.js";
 import "../../chunk-TVDKGMBI.js";
 import "../../chunk-355MU6BH.js";
 import "../../chunk-HYITAA4J.js";
 import "../../chunk-5H3YPCZK.js";
-import "../../chunk-FR2GDOU2.js";
-import "../../chunk-74DX4CU7.js";
-import "../../chunk-OYM4XCHQ.js";
-import "../../chunk-LPUSIN3M.js";
+import "../../chunk-XQOL7UBI.js";
+import "../../chunk-TULWX7D6.js";
+import "../../chunk-XQOZWYUA.js";
+import "../../chunk-R6PYUH56.js";
 import "../../chunk-5AVBYDPB.js";
 import "../../chunk-365QMK4D.js";
 import "../../chunk-YO3BQW6S.js";
 import "../../chunk-6IVCARWS.js";
-import "../../chunk-6DJOIRMF.js";
-import "../../chunk-FPD73OHW.js";
-import "../../chunk-ZKZDVS7G.js";
+import "../../chunk-2DZ2Y3JI.js";
+import "../../chunk-CHHLIPDN.js";
+import "../../chunk-25HMMI7R.js";
 import "../../chunk-EGEQY3KT.js";
 import "../../chunk-HLOY6BIP.js";
 import "../../chunk-O3T3TM3V.js";
 import "../../chunk-O3DNDMV3.js";
-import "../../chunk-XQOL7UBI.js";
-import "../../chunk-TULWX7D6.js";
-import "../../chunk-XQOZWYUA.js";
+import "../../chunk-JEHDCZQU.js";
+import "../../chunk-OHMOP5PV.js";
+import "../../chunk-OCJNQGHN.js";
 import "../../chunk-Q37G2GS6.js";
 import "../../chunk-VTJZMOSP.js";
 import "../../chunk-P6B2PNYI.js";
 import "../../chunk-YTZSKMX3.js";
 import "../../chunk-4IKPNQV5.js";
 import "../../chunk-ACVANQJ4.js";
-import "../../chunk-2DZ2Y3JI.js";
-import "../../chunk-CNQ7RNNY.js";
 import "../../chunk-O3XTRD7R.js";
-import "../../chunk-25HMMI7R.js";
+import "../../chunk-ALOPZ54P.js";
+import "../../chunk-YGL6SWKN.js";
+import "../../chunk-4Y5BEXVN.js";
 import "../../chunk-AQX7DQLI.js";
 import "../../chunk-B6XJN6EC.js";
 import "../../chunk-FYEASFUU.js";
 import "../../chunk-MIMJ7LON.js";
 import "../../chunk-IQEEPHOY.js";
-import "../../chunk-JEHDCZQU.js";
-import "../../chunk-OHMOP5PV.js";
-import "../../chunk-OCJNQGHN.js";
 import "../../chunk-EK4ZFDYD.js";
 import "../../chunk-J242TTFH.js";
 import "../../chunk-EAXUQEO5.js";
 import "../../chunk-CZEGRZBK.js";
-import "../../chunk-ALOPZ54P.js";
-import "../../chunk-YGL6SWKN.js";
-import "../../chunk-4Y5BEXVN.js";
 import "../../chunk-N552FDTV.js";
 export {
   Row

package/dist/molecules/index.js

@@ -2,67 +2,67 @@ import "../chunk-DF7LG3AO.js";
 import {
   ExpandTable,
   createColumnHelper
-} from "../chunk-K66WIGIV.js";
+} from "../chunk-7FQZ3OZO.js";
 import "../chunk-PBPRWY2V.js";
+import "../chunk-BSTJBBEX.js";
 import "../chunk-NDUKDKGB.js";
 import {
   Navigation
-} from "../chunk-IBR5PQVX.js";
-import "../chunk-BSTJBBEX.js";
+} from "../chunk-QOY42XM2.js";
 import "../chunk-MASTHXWN.js";
 import "../chunk-IIBITN2G.js";
+import "../chunk-FR2GDOU2.js";
+import "../chunk-74DX4CU7.js";
+import "../chunk-OYM4XCHQ.js";
 import "../chunk-YJ7ZFOYL.js";
 import "../chunk-5ZITU5L7.js";
 import "../chunk-ILRUXI2E.js";
 import "../chunk-JPIZP2PZ.js";
+import "../chunk-6DJOIRMF.js";
+import "../chunk-FPD73OHW.js";
+import "../chunk-ZKZDVS7G.js";
 import "../chunk-MUNMDHRF.js";
 import "../chunk-TVDKGMBI.js";
 import "../chunk-355MU6BH.js";
 import "../chunk-HYITAA4J.js";
 import "../chunk-5H3YPCZK.js";
-import "../chunk-FR2GDOU2.js";
-import "../chunk-74DX4CU7.js";
-import "../chunk-OYM4XCHQ.js";
-import "../chunk-LPUSIN3M.js";
+import "../chunk-XQOL7UBI.js";
+import "../chunk-TULWX7D6.js";
+import "../chunk-XQOZWYUA.js";
+import "../chunk-R6PYUH56.js";
 import "../chunk-5AVBYDPB.js";
 import "../chunk-365QMK4D.js";
 import "../chunk-YO3BQW6S.js";
 import "../chunk-6IVCARWS.js";
-import "../chunk-6DJOIRMF.js";
-import "../chunk-FPD73OHW.js";
-import "../chunk-ZKZDVS7G.js";
+import "../chunk-2DZ2Y3JI.js";
+import "../chunk-CHHLIPDN.js";
+import "../chunk-25HMMI7R.js";
 import "../chunk-EGEQY3KT.js";
 import "../chunk-HLOY6BIP.js";
 import "../chunk-O3T3TM3V.js";
 import "../chunk-O3DNDMV3.js";
-import "../chunk-XQOL7UBI.js";
-import "../chunk-TULWX7D6.js";
-import "../chunk-XQOZWYUA.js";
+import "../chunk-JEHDCZQU.js";
+import "../chunk-OHMOP5PV.js";
+import "../chunk-OCJNQGHN.js";
 import "../chunk-Q37G2GS6.js";
 import "../chunk-VTJZMOSP.js";
 import "../chunk-P6B2PNYI.js";
 import "../chunk-YTZSKMX3.js";
 import "../chunk-4IKPNQV5.js";
 import "../chunk-ACVANQJ4.js";
-import "../chunk-2DZ2Y3JI.js";
-import "../chunk-CNQ7RNNY.js";
 import "../chunk-O3XTRD7R.js";
-import "../chunk-25HMMI7R.js";
+import "../chunk-ALOPZ54P.js";
+import "../chunk-YGL6SWKN.js";
+import "../chunk-4Y5BEXVN.js";
 import "../chunk-AQX7DQLI.js";
 import "../chunk-B6XJN6EC.js";
 import "../chunk-FYEASFUU.js";
 import "../chunk-MIMJ7LON.js";
 import "../chunk-IQEEPHOY.js";
-import "../chunk-JEHDCZQU.js";
-import "../chunk-OHMOP5PV.js";
-import "../chunk-OCJNQGHN.js";
 import "../chunk-EK4ZFDYD.js";
 import "../chunk-J242TTFH.js";
 import "../chunk-EAXUQEO5.js";
 import "../chunk-CZEGRZBK.js";
-import "../chunk-ALOPZ54P.js";
-import "../chunk-YGL6SWKN.js";
-import "../chunk-4Y5BEXVN.js";
 import "../chunk-N552FDTV.js";
 export {
   ExpandTable,

package/dist/molecules/navigation.js

@@ -1,60 +1,60 @@
 import {
   Navigation
-} from "../chunk-IBR5PQVX.js";
+} from "../chunk-QOY42XM2.js";
 import "../chunk-MASTHXWN.js";
 import "../chunk-IIBITN2G.js";
+import "../chunk-FR2GDOU2.js";
+import "../chunk-74DX4CU7.js";
+import "../chunk-OYM4XCHQ.js";
 import "../chunk-YJ7ZFOYL.js";
 import "../chunk-5ZITU5L7.js";
 import "../chunk-ILRUXI2E.js";
 import "../chunk-JPIZP2PZ.js";
+import "../chunk-6DJOIRMF.js";
+import "../chunk-FPD73OHW.js";
+import "../chunk-ZKZDVS7G.js";
 import "../chunk-MUNMDHRF.js";
 import "../chunk-TVDKGMBI.js";
 import "../chunk-355MU6BH.js";
 import "../chunk-HYITAA4J.js";
 import "../chunk-5H3YPCZK.js";
-import "../chunk-FR2GDOU2.js";
-import "../chunk-74DX4CU7.js";
-import "../chunk-OYM4XCHQ.js";
-import "../chunk-LPUSIN3M.js";
+import "../chunk-XQOL7UBI.js";
+import "../chunk-TULWX7D6.js";
+import "../chunk-XQOZWYUA.js";
+import "../chunk-R6PYUH56.js";
 import "../chunk-5AVBYDPB.js";
 import "../chunk-365QMK4D.js";
 import "../chunk-YO3BQW6S.js";
 import "../chunk-6IVCARWS.js";
-import "../chunk-6DJOIRMF.js";
-import "../chunk-FPD73OHW.js";
-import "../chunk-ZKZDVS7G.js";
+import "../chunk-2DZ2Y3JI.js";
+import "../chunk-CHHLIPDN.js";
+import "../chunk-25HMMI7R.js";
 import "../chunk-EGEQY3KT.js";
 import "../chunk-HLOY6BIP.js";
 import "../chunk-O3T3TM3V.js";
 import "../chunk-O3DNDMV3.js";
-import "../chunk-XQOL7UBI.js";
-import "../chunk-TULWX7D6.js";
-import "../chunk-XQOZWYUA.js";
+import "../chunk-JEHDCZQU.js";
+import "../chunk-OHMOP5PV.js";
+import "../chunk-OCJNQGHN.js";
 import "../chunk-Q37G2GS6.js";
 import "../chunk-VTJZMOSP.js";
 import "../chunk-P6B2PNYI.js";
 import "../chunk-YTZSKMX3.js";
 import "../chunk-4IKPNQV5.js";
 import "../chunk-ACVANQJ4.js";
-import "../chunk-2DZ2Y3JI.js";
-import "../chunk-CNQ7RNNY.js";
 import "../chunk-O3XTRD7R.js";
-import "../chunk-25HMMI7R.js";
+import "../chunk-ALOPZ54P.js";
+import "../chunk-YGL6SWKN.js";
+import "../chunk-4Y5BEXVN.js";
 import "../chunk-AQX7DQLI.js";
 import "../chunk-B6XJN6EC.js";
 import "../chunk-FYEASFUU.js";
 import "../chunk-MIMJ7LON.js";
 import "../chunk-IQEEPHOY.js";
-import "../chunk-JEHDCZQU.js";
-import "../chunk-OHMOP5PV.js";
-import "../chunk-OCJNQGHN.js";
 import "../chunk-EK4ZFDYD.js";
 import "../chunk-J242TTFH.js";
 import "../chunk-EAXUQEO5.js";
 import "../chunk-CZEGRZBK.js";
-import "../chunk-ALOPZ54P.js";
-import "../chunk-YGL6SWKN.js";
-import "../chunk-4Y5BEXVN.js";
 import "../chunk-N552FDTV.js";
 export {
   Navigation

package/package.json

@@ -1,19 +1,9 @@
 {
   "name": "@tipp/ui",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "private": false,
   "type": "module",
   "exports": {
-    ".": {
-      "require": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.cjs"
-      },
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      }
-    },
     "./icon": {
       "require": {
         "types": "./dist/icon.d.ts",
@@ -34,14 +24,24 @@
         "default": "./dist/theme/theme-provider.js"
       }
     },
-    "./chart": {
+    "./charts": {
       "require": {
-        "types": "./dist/chart/chart.d.ts",
-        "default": "./dist/chart/chart.cjs"
+        "types": "./dist/charts/index.d.ts",
+        "default": "./dist/charts/index.cjs"
       },
       "import": {
-        "types": "./dist/chart/chart.d.ts",
-        "default": "./dist/chart/chart.js"
+        "types": "./dist/charts/index.d.ts",
+        "default": "./dist/charts/index.js"
+      }
+    },
+    ".": {
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      },
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
       }
     },
     "./*": "./*"

package/src/charts/horizontal-bar-chart.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+export interface HorizontalBarChartProps {
+  /** 100% 바가 뜻하는 전체 값 */
+  total: number;
+  /** 화면에 채워져보이는 값 */
+  value: number;
+  /** 배경 색상 */
+  backgroundColor?: string;
+  /** 바의 색상 */
+  barColor?: string;
+  /** 바의 높이 */
+  height?: number;
+}
+
+export function HorizontalBarChart(
+  props: HorizontalBarChartProps
+): React.ReactNode {
+  const { total, value, backgroundColor, barColor, height } = props;
+  return (
+    <div
+      className="tipp_horizontal-bar-chart bar-wrapper"
+      style={{ height, backgroundColor }}
+    >
+      <div style={{ width: `${Math.round((value / total) * 100)}%`, height }}>
+        <div className="bar" style={{ backgroundColor: barColor }} />
+      </div>
+    </div>
+  );
+}

package/src/charts/index.ts

@@ -0,0 +1,2 @@
+export * from './chart';
+export * from './horizontal-bar-chart';