@particle-academy/react-fancy 1.3.0 → 1.3.2

package/README.md

@@ -5,12 +5,21 @@ React UI component library — the React port of the `fancy-flux` Blade/Livewire
 ## Installation
 
 ```bash
+# npm
+npm install @particle-academy/react-fancy
+
+# pnpm
 pnpm add @particle-academy/react-fancy
+
+# yarn
+yarn add @particle-academy/react-fancy
 ```
 
-Peer dependencies: `react >= 18`, `react-dom >= 18`.
+**Peer dependencies:** `react >= 18`, `react-dom >= 18`, `tailwindcss >= 4`
+
+**Bundled dependencies:** `clsx`, `tailwind-merge`, `marked`
 
-Dependencies: `lucide-react` (default icon library, bundled externally).
+**External dependency:** `lucide-react` (default icon library)
 
 ## Usage
 

package/dist/index.cjs

@@ -7121,6 +7121,14 @@ function ChartBar({
     [data]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", className), "data-react-fancy-chart-bar": "", children: [
+    showValues && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 flex gap-2", children: data.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "flex-1 text-center text-xs font-medium text-zinc-500 dark:text-zinc-400",
+        children: item.value
+      },
+      item.label
+    )) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -7129,26 +7137,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__ */ jsxRuntime.jsxs(
+          return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-zinc-500", children: item.value }),
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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
           );