@particle-academy/react-fancy 1.3.1 → 1.3.3

package/dist/index.js

@@ -2220,7 +2220,6 @@ var SingleSlider = forwardRef(
     );
     const slider = /* @__PURE__ */ jsxs("div", { "data-react-fancy-slider": "", className: cn("flex flex-col gap-1", className), children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        prefix && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm text-zinc-500 dark:text-zinc-400", "data-react-fancy-slider-prefix": "", children: prefix }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -2247,8 +2246,11 @@ var SingleSlider = forwardRef(
             )
           }
         ),
-        suffix && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm text-zinc-500 dark:text-zinc-400", "data-react-fancy-slider-suffix": "", children: suffix }),
-        showValue && /* @__PURE__ */ jsx("span", { className: "min-w-[3ch] text-right text-sm font-medium text-zinc-700 dark:text-zinc-300", children: value })
+        showValue && /* @__PURE__ */ jsxs("span", { className: "min-w-[3ch] shrink-0 whitespace-nowrap text-right text-sm font-medium text-zinc-700 dark:text-zinc-300", children: [
+          prefix,
+          value,
+          suffix
+        ] })
       ] }),
       marks && marks.length > 0 && /* @__PURE__ */ jsx(SliderMarks, { marks, min, max })
     ] });
@@ -2296,7 +2298,6 @@ var RangeSlider = forwardRef(
     const rightPercent = (value[1] - min) / (max - min) * 100;
     const slider = /* @__PURE__ */ jsxs("div", { "data-react-fancy-slider": "", className: cn("flex flex-col gap-1", className), children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        prefix && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm text-zinc-500 dark:text-zinc-400", "data-react-fancy-slider-prefix": "", children: prefix }),
         /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
           /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute top-1/2 h-1.5 w-full -translate-y-1/2 rounded-full bg-zinc-200 dark:bg-zinc-700" }),
           /* @__PURE__ */ jsx(
@@ -2338,11 +2339,14 @@ var RangeSlider = forwardRef(
           ),
           /* @__PURE__ */ jsx("div", { className: "h-6" })
         ] }),
-        suffix && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm text-zinc-500 dark:text-zinc-400", "data-react-fancy-slider-suffix": "", children: suffix }),
-        showValue && /* @__PURE__ */ jsxs("span", { className: "min-w-[6ch] whitespace-nowrap text-right text-sm font-medium text-zinc-700 dark:text-zinc-300", children: [
+        showValue && /* @__PURE__ */ jsxs("span", { className: "min-w-[6ch] shrink-0 whitespace-nowrap text-right text-sm font-medium text-zinc-700 dark:text-zinc-300", children: [
+          prefix,
           value[0],
+          suffix,
           "\u2013",
-          value[1]
+          prefix,
+          value[1],
+          suffix
         ] })
       ] }),
       marks && marks.length > 0 && /* @__PURE__ */ jsx(SliderMarks, { marks, min, max })
@@ -6811,6 +6815,14 @@ function ChartBar({
     [data]
   );
   return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), "data-react-fancy-chart-bar": "", children: [
+    showValues && /* @__PURE__ */ jsx("div", { className: "mb-1 flex gap-2", children: data.map((item) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex-1 text-center text-xs font-medium text-zinc-500 dark:text-zinc-400",
+        children: item.value
+      },
+      item.label
+    )) }),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -6819,26 +6831,23 @@ function ChartBar({
         children: data.map((item, i) => {
           const barHeight = item.value / maxValue * 100;
           const color = item.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length];
-          return /* @__PURE__ */ jsxs(
+          return /* @__PURE__ */ jsx(
             "div",
             {
-              className: "flex h-full flex-1 flex-col items-center justify-end gap-1",
+              className: "flex h-full flex-1 items-end justify-center",
               "data-react-fancy-chart-bar-column": "",
-              children: [
-                showValues && /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-zinc-500", children: item.value }),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    "data-react-fancy-chart-bar-item": "",
-                    className: "w-full rounded-t-md transition-all duration-500",
-                    style: {
-                      height: `${barHeight}%`,
-                      backgroundColor: color,
-                      minHeight: 4
-                    }
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-react-fancy-chart-bar-item": "",
+                  className: "w-full rounded-t-md transition-all duration-500",
+                  style: {
+                    height: `${barHeight}%`,
+                    backgroundColor: color,
+                    minHeight: 4
                   }
-                )
-              ]
+                }
+              )
             },
             item.label
           );