@deepnoid/ui 0.1.167 → 0.1.169

package/dist/components/toast/index.mjs

@@ -3,11 +3,11 @@ import "../../chunk-LUWGOKLG.mjs";
 import {
   ToastProvider,
   useToast
-} from "../../chunk-EQLBG32V.mjs";
-import "../../chunk-ZOTHPHXA.mjs";
+} from "../../chunk-4OOHXMJH.mjs";
 import {
   toast_default
 } from "../../chunk-6574ITBF.mjs";
+import "../../chunk-ZOTHPHXA.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-R7KUEH3N.mjs";
 import "../../chunk-E3G5QXSH.mjs";

package/dist/components/toast/use-toast.mjs

@@ -2,9 +2,9 @@
 import {
   ToastProvider,
   useToast
-} from "../../chunk-EQLBG32V.mjs";
-import "../../chunk-ZOTHPHXA.mjs";
+} from "../../chunk-4OOHXMJH.mjs";
 import "../../chunk-6574ITBF.mjs";
+import "../../chunk-ZOTHPHXA.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-R7KUEH3N.mjs";
 import "../../chunk-E3G5QXSH.mjs";

package/dist/index.d.mts

@@ -37,6 +37,7 @@ export { default as CircularProgress } from './components/charts/circularProgres
 export { default as AreaChart } from './components/charts/areaChart.mjs';
 export { default as BarChart, BarChartTooltip } from './components/charts/barChart.mjs';
 export { default as RadarChart } from './components/charts/radarChart.mjs';
+export { default as SimpleBarChart } from './components/charts/simpleBarChart.mjs';
 export { default as Progress } from './components/progress/progress.mjs';
 export { default as StarRating, StarRatingProps } from './components/starRating/starRating.mjs';
 export { tv } from './utils/tailwind-variants.mjs';

package/dist/index.d.ts

@@ -37,6 +37,7 @@ export { default as CircularProgress } from './components/charts/circularProgres
 export { default as AreaChart } from './components/charts/areaChart.js';
 export { default as BarChart, BarChartTooltip } from './components/charts/barChart.js';
 export { default as RadarChart } from './components/charts/radarChart.js';
+export { default as SimpleBarChart } from './components/charts/simpleBarChart.js';
 export { default as Progress } from './components/progress/progress.js';
 export { default as StarRating, StarRatingProps } from './components/starRating/starRating.js';
 export { tv } from './utils/tailwind-variants.js';

package/dist/index.js

@@ -132,6 +132,7 @@ __export(index_exports, {
   Radio: () => radio_default,
   ScrollArea: () => scrollArea_default,
   Select: () => select_default,
+  SimpleBarChart: () => simpleBarChart_default,
   Skeleton: () => skeleton_default,
   StarRating: () => starRating_default,
   Switch: () => switch_default,
@@ -12804,7 +12805,7 @@ var AreaChartComponent = (0, import_react39.forwardRef)((originalProps, ref) =>
               {
                 vertical: true,
                 horizontal: false,
-                strokeDasharray: "3 3",
+                strokeDasharray: "4 4",
                 className: "stroke-neutral-light",
                 verticalPoints: tickPositions
               }
@@ -13021,7 +13022,7 @@ var BarChartComponent = (0, import_react40.forwardRef)((originalProps, ref) => {
             {
               vertical: true,
               horizontal: false,
-              strokeDasharray: "3 3",
+              strokeDasharray: "4 4",
               className: "stroke-neutral-light",
               verticalPoints: tickPositions
             }
@@ -13110,8 +13111,14 @@ var barChartStyle = tv({
   variants: {},
   defaultVariants: {}
 });
-function BarChartTooltip({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "text-md text-common-white bg-common-black max-w-[160px] whitespace-nowrap rounded-[5px] px-[10px] py-[6px] text-center font-bold", children });
+function BarChartTooltip({ className = "", children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    "div",
+    {
+      className: `text-md text-common-white bg-common-black flex max-w-[160px] whitespace-nowrap rounded-[5px] px-[10px] py-[6px] text-center font-bold ${className}`,
+      children
+    }
+  );
 }
 
 // src/components/charts/radarChart.tsx
@@ -13218,10 +13225,191 @@ var radarChartStyle = tv({
   }
 });
 
-// src/components/starRating/starRating.tsx
+// src/components/charts/simpleBarChart.tsx
 var import_react42 = require("react");
+var import_recharts5 = require("recharts");
 var import_jsx_runtime45 = require("react/jsx-runtime");
-var StarRating = (0, import_react42.forwardRef)((originalProps, ref) => {
+var SimpleBarChartComponent = (0, import_react42.forwardRef)((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, simpleBarChartStyle.variantKeys);
+  const {
+    data = [],
+    label,
+    classNames,
+    yAxisTicks = [0, 20, 40, 60, 80, 100],
+    yAxisDomain = [0, 100],
+    barGap = 20,
+    tooltipFormatter
+  } = { ...props, ...variantProps };
+  const slots = (0, import_react42.useMemo)(() => simpleBarChartStyle({ ...variantProps }), [variantProps]);
+  const chartRef = (0, import_react42.useRef)(null);
+  const tooltipRef = (0, import_react42.useRef)(null);
+  const [tooltipLeft, setTooltipLeft] = (0, import_react42.useState)(0);
+  const [tickPositions, setTickPositions] = (0, import_react42.useState)([]);
+  const tickRef = (0, import_react42.useRef)([]);
+  const [tooltipState, setTooltipState] = (0, import_react42.useState)(null);
+  const handleMouseEnter = (e) => {
+    if (!tooltipFormatter || !chartRef.current) return;
+    const { payload, x, y } = e;
+    if (!payload) return;
+    setTooltipState({
+      x,
+      y,
+      value: payload.value,
+      label: payload.title
+    });
+  };
+  const handleMouseLeave = () => {
+    setTooltipState(null);
+  };
+  const CustomBarShape = ({ x, y, width, height, fill }) => {
+    const radius = 4;
+    const extraHeight = 10;
+    const adjustedHeight = height + extraHeight;
+    const adjustedY = y - extraHeight;
+    const bottomY = adjustedY + adjustedHeight;
+    return height > 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      "path",
+      {
+        d: `M${x},${bottomY} L${x},${adjustedY + radius} Q${x},${adjustedY} ${x + radius},${adjustedY} L${x + width - radius},${adjustedY} Q${x + width},${adjustedY} ${x + width},${adjustedY + radius} L${x + width},${bottomY} Z`,
+        fill
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("rect", { x, y, width, height: 0, fill });
+  };
+  const CustomTick = ({ x, y, payload }) => {
+    if (x !== void 0) tickRef.current.push(x);
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      "text",
+      {
+        x,
+        y: y + 14,
+        textAnchor: "middle",
+        fontSize: 12,
+        fontWeight: 700,
+        fill: "currentColor",
+        className: "text-body-foreground",
+        children: payload.value
+      }
+    );
+  };
+  (0, import_react42.useEffect)(() => {
+    const raf = requestAnimationFrame(() => {
+      const unique = [...new Set(tickRef.current)].sort((a, b) => a - b);
+      const mids = [];
+      for (let i = 0; i < unique.length - 1; i++) {
+        mids.push((unique[i] + unique[i + 1]) / 2);
+      }
+      setTickPositions(mids);
+      tickRef.current = [];
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [data]);
+  (0, import_react42.useLayoutEffect)(() => {
+    if (!tooltipState || !chartRef.current || !tooltipRef.current) return;
+    const chartRect = chartRef.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    const chartWidth = chartRect.width;
+    const tooltipWidth = tooltipRect.width;
+    let left = tooltipState.x - tooltipWidth / 2;
+    const padding2 = 8;
+    if (left < padding2) {
+      left = padding2;
+    } else if (left + tooltipWidth > chartWidth - padding2) {
+      left = chartWidth - tooltipWidth - padding2;
+    }
+    setTooltipLeft(left);
+  }, [tooltipState]);
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { ref: chartRef, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), onMouseLeave: handleMouseLeave, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_recharts5.ResponsiveContainer, { width: "100%", height: 140, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+      import_recharts5.BarChart,
+      {
+        data,
+        margin: { left: 0, right: 0, top: 0, bottom: 0 },
+        barSize: 10,
+        barGap,
+        className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            import_recharts5.CartesianGrid,
+            {
+              vertical: true,
+              horizontal: false,
+              strokeDasharray: "4 4",
+              className: "stroke-neutral-light",
+              verticalPoints: tickPositions
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            import_recharts5.CartesianGrid,
+            {
+              vertical: true,
+              horizontal: false,
+              strokeDasharray: "0",
+              strokeWidth: 2,
+              className: "stroke-neutral-light",
+              verticalPoints: [0]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            import_recharts5.XAxis,
+            {
+              dataKey: "title",
+              axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
+              tickLine: false,
+              tick: CustomTick,
+              padding: { left: 0, right: 0 }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_recharts5.YAxis, { hide: true, ticks: yAxisTicks, domain: yAxisDomain }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            import_recharts5.Bar,
+            {
+              dataKey: "value",
+              fill: "#C7E5FA",
+              shape: CustomBarShape,
+              onMouseEnter: handleMouseEnter,
+              onMouseLeave: handleMouseLeave
+            }
+          )
+        ]
+      }
+    ) }),
+    tooltipFormatter && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      "div",
+      {
+        ref: tooltipRef,
+        style: {
+          position: "absolute",
+          left: tooltipLeft + 5,
+          top: (tooltipState == null ? void 0 : tooltipState.y) ? tooltipState.y - 20 : 0,
+          pointerEvents: "none",
+          zIndex: 10,
+          opacity: tooltipState ? 1 : 0,
+          transition: "opacity 0.1s ease-out",
+          visibility: tooltipState ? "visible" : "hidden",
+          width: "fit-content",
+          whiteSpace: "nowrap"
+        },
+        children: tooltipState && tooltipFormatter(tooltipState)
+      }
+    )
+  ] });
+});
+SimpleBarChartComponent.displayName = "simpleBarChart";
+var simpleBarChart_default = SimpleBarChartComponent;
+var simpleBarChartStyle = tv({
+  slots: {
+    base: ["flex", "flex-col", "gap-[10px]", "select-none", "relative", "w-full"],
+    label: ["text-md", "font-bold", "text-common-black"]
+  },
+  variants: {},
+  defaultVariants: {}
+});
+
+// src/components/starRating/starRating.tsx
+var import_react43 = require("react");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var StarRating = (0, import_react43.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, starRatingStyle.variantKeys);
   const {
     stars,
@@ -13234,8 +13422,8 @@ var StarRating = (0, import_react42.forwardRef)((originalProps, ref) => {
     filledColor = "text-primary-main",
     emptyColor = "text-neutral-soft"
   } = { ...props, ...variantProps };
-  const slots = (0, import_react42.useMemo)(() => starRatingStyle({ ...variantProps }), [variantProps]);
-  const [hoverRating, setHoverRating] = (0, import_react42.useState)(0);
+  const slots = (0, import_react43.useMemo)(() => starRatingStyle({ ...variantProps }), [variantProps]);
+  const [hoverRating, setHoverRating] = (0, import_react43.useState)(0);
   const handleStarClick = (starIndex, isHalf = false) => {
     if (readOnly || !onChange) return;
     let newRating;
@@ -13269,9 +13457,9 @@ var StarRating = (0, import_react42.forwardRef)((originalProps, ref) => {
     const isEmpty = currentRating < starIndex - 1;
     const isPartial = !isFull && !isEmpty;
     const fillPercentage = isPartial ? (currentRating - (starIndex - 1)) * 100 : 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: slots.starWrapper({ class: classNames == null ? void 0 : classNames.starWrapper }), children: [
-      !readOnly && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: slots.starWrapper({ class: classNames == null ? void 0 : classNames.starWrapper }), children: [
+      !readOnly && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "div",
           {
             className: slots.star({ class: classNames == null ? void 0 : classNames.star }),
@@ -13279,7 +13467,7 @@ var StarRating = (0, import_react42.forwardRef)((originalProps, ref) => {
             onMouseEnter: () => handleStarHover(starIndex)
           }
         ),
-        allowHalf && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        allowHalf && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "div",
           {
             className: slots.starHalf({ class: classNames == null ? void 0 : classNames.starHalf }),
@@ -13288,25 +13476,25 @@ var StarRating = (0, import_react42.forwardRef)((originalProps, ref) => {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "relative", children: [
-        (isFull || isPartial) && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Icon_default, { name: "star", fill: true, className: emptyColor, size }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "relative", children: [
+        (isFull || isPartial) && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Icon_default, { name: "star", fill: true, className: emptyColor, size }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
             "div",
             {
               className: "absolute left-0 top-0 overflow-hidden",
               style: {
                 width: isFull ? "100%" : `${fillPercentage}%`
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Icon_default, { name: "star", fill: true, className: filledColor, size })
+              children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Icon_default, { name: "star", fill: true, className: filledColor, size })
             }
           )
         ] }),
-        isEmpty && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Icon_default, { name: "star", fill: true, className: emptyColor, size })
+        isEmpty && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Icon_default, { name: "star", fill: true, className: emptyColor, size })
       ] })
     ] }, starIndex);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), onMouseLeave: handleMouseLeave, children: createRange(stars).map(renderStar) });
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), onMouseLeave: handleMouseLeave, children: createRange(stars).map(renderStar) });
 });
 StarRating.displayName = "StarRating";
 var starRating_default = StarRating;
@@ -13361,6 +13549,7 @@ var starRatingStyle = tv({
   Radio,
   ScrollArea,
   Select,
+  SimpleBarChart,
   Skeleton,
   StarRating,
   Switch,

package/dist/index.mjs

@@ -1,27 +1,35 @@
 "use client";
+import "./chunk-HIE2YRGA.mjs";
+import {
+  tooltip_default
+} from "./chunk-5KC3IFNR.mjs";
+import "./chunk-ZMOAFSYE.mjs";
+import "./chunk-WSIADHVC.mjs";
 import "./chunk-MBLZYQCN.mjs";
 import {
   tree_default
 } from "./chunk-WSBUOY2M.mjs";
+import "./chunk-3MY6LO7N.mjs";
+import {
+  tabs_default
+} from "./chunk-DW3BX4M2.mjs";
 import "./chunk-RRAZM5D3.mjs";
 import {
   textarea_default
 } from "./chunk-3CRSSRCH.mjs";
-import "./chunk-HIE2YRGA.mjs";
-import {
-  tooltip_default
-} from "./chunk-5KC3IFNR.mjs";
-import "./chunk-ZMOAFSYE.mjs";
-import "./chunk-WSIADHVC.mjs";
 import "./chunk-LUWGOKLG.mjs";
 import {
   ToastProvider,
   useToast
-} from "./chunk-EQLBG32V.mjs";
-import "./chunk-ZOTHPHXA.mjs";
+} from "./chunk-4OOHXMJH.mjs";
 import {
   toast_default
 } from "./chunk-6574ITBF.mjs";
+import "./chunk-ZOTHPHXA.mjs";
+import "./chunk-LVFI2NOH.mjs";
+import {
+  switch_default
+} from "./chunk-AGE57VDD.mjs";
 import "./chunk-DX3KXNP6.mjs";
 import {
   definition_table_default
@@ -29,10 +37,6 @@ import {
 import {
   table_default
 } from "./chunk-PX4RCHOE.mjs";
-import "./chunk-3MY6LO7N.mjs";
-import {
-  tabs_default
-} from "./chunk-DW3BX4M2.mjs";
 import "./chunk-MZ76AA76.mjs";
 import {
   skeleton_default
@@ -41,10 +45,6 @@ import "./chunk-OLQOLLKG.mjs";
 import {
   starRating_default
 } from "./chunk-XTS6WKFD.mjs";
-import "./chunk-LVFI2NOH.mjs";
-import {
-  switch_default
-} from "./chunk-AGE57VDD.mjs";
 import "./chunk-TPFN22HR.mjs";
 import {
   radio_default
@@ -57,7 +57,8 @@ import "./chunk-F3HENRVM.mjs";
 import "./chunk-4VWG4726.mjs";
 import {
   datePicker_default
-} from "./chunk-NJFJJIWK.mjs";
+} from "./chunk-W66K4FK5.mjs";
+import "./chunk-FWFEKWWD.mjs";
 import {
   day_default
 } from "./chunk-XZYQFBCT.mjs";
@@ -68,7 +69,6 @@ import "./chunk-QCEKPS7U.mjs";
 import {
   select_default
 } from "./chunk-5G6CCE55.mjs";
-import "./chunk-FWFEKWWD.mjs";
 import "./chunk-7MVEAQ7Z.mjs";
 import {
   list_default
@@ -80,6 +80,7 @@ import "./chunk-DJOG6Z35.mjs";
 import {
   modal_default
 } from "./chunk-SCQCMQDP.mjs";
+import "./chunk-QZ3LVYJW.mjs";
 import "./chunk-MGEWSREV.mjs";
 import {
   chip_default
@@ -100,10 +101,10 @@ import "./chunk-2GCSFWHD.mjs";
 import {
   input_default
 } from "./chunk-VNRGOOSY.mjs";
-import "./chunk-VYNBJBXD.mjs";
+import "./chunk-3OCNT22V.mjs";
 import {
   areaChart_default
-} from "./chunk-ARNMOGRH.mjs";
+} from "./chunk-LH6Z7SDZ.mjs";
 import "./chunk-DQRAFUDA.mjs";
 import {
   scrollArea_default
@@ -111,14 +112,16 @@ import {
 import {
   BarChartTooltip,
   barChart_default
-} from "./chunk-BRVQTI2T.mjs";
+} from "./chunk-JOK735WN.mjs";
 import {
   circularProgress_default
 } from "./chunk-WA7CSZQ3.mjs";
 import {
   radarChart_default
 } from "./chunk-U7SYKG2C.mjs";
-import "./chunk-QZ3LVYJW.mjs";
+import {
+  simpleBarChart_default
+} from "./chunk-B4UNRT7U.mjs";
 import {
   checkbox_default
 } from "./chunk-OEIEALIP.mjs";
@@ -202,6 +205,7 @@ export {
   radio_default as Radio,
   scrollArea_default as ScrollArea,
   select_default as Select,
+  simpleBarChart_default as SimpleBarChart,
   skeleton_default as Skeleton,
   starRating_default as StarRating,
   switch_default as Switch,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepnoid/ui",
-  "version": "0.1.167",
+  "version": "0.1.169",
   "license": "MIT",
   "sideEffects": false,
   "exports": {

package/dist/{chunk-EQLBG32V.mjs → chunk-4OOHXMJH.mjs}

@@ -1,10 +1,10 @@
 "use client";
-import {
-  getToastPosition
-} from "./chunk-ZOTHPHXA.mjs";
 import {
   toast_default
 } from "./chunk-6574ITBF.mjs";
+import {
+  getToastPosition
+} from "./chunk-ZOTHPHXA.mjs";
 
 // src/components/toast/use-toast.tsx
 import { createContext, useContext, useState, useCallback, useEffect, useRef } from "react";

package/dist/{chunk-NJFJJIWK.mjs → chunk-W66K4FK5.mjs}

@@ -1,11 +1,11 @@
 "use client";
-import {
-  day_default
-} from "./chunk-XZYQFBCT.mjs";
 import {
   formatDateToString,
   formatStringToDate
 } from "./chunk-FWFEKWWD.mjs";
+import {
+  day_default
+} from "./chunk-XZYQFBCT.mjs";
 import {
   input_default
 } from "./chunk-VNRGOOSY.mjs";