@andreagiugni/tailwind-dashboard-ui 0.4.0 → 0.5.1

package/dist/{chunk-HZQZC5CK.js → chunk-YAKIMPXZ.js}

@@ -23,10 +23,12 @@ var defaultOptions = {
   dataLabels: {
     enabled: false
   },
+  // No transparent stroke around the columns: it shrinks and shifts the
+  // painted bar inside its allocated slot, so the hover highlight band
+  // (crosshairs width "barWidth" = the allocated width) would render wider
+  // than — and offset from — the visible bar.
   stroke: {
-    show: true,
-    width: 4,
-    colors: ["transparent"]
+    show: false
   },
   xaxis: {
     categories: [
@@ -48,13 +50,27 @@ var defaultOptions = {
     },
     axisTicks: {
       show: false
+    },
+    // Match the hover highlight band to the bar width (the default band spans
+    // the whole category slot, looking ~3x wider than the 39% columns).
+    crosshairs: {
+      width: "barWidth"
     }
   },
   legend: {
     show: true,
     position: "top",
     horizontalAlign: "left",
-    fontFamily: "Outfit"
+    fontFamily: "Outfit",
+    // Rounded, border-less swatches that echo the column styling. ApexCharts
+    // sets the marker span's `color` to the series color, so `currentColor`
+    // picks it up; `customHTML` lets us round the corners (the built-in shapes
+    // are sharp SVG paths that CSS border-radius can't touch).
+    markers: {
+      size: 7,
+      strokeWidth: 0,
+      customHTML: () => '<span style="display:block;height:100%;width:100%;border-radius:3px;background:currentColor"></span>'
+    }
   },
   yaxis: {
     title: {
@@ -120,5 +136,5 @@ var BarChart = ({
 };
 
 export { BarChart };
-//# sourceMappingURL=chunk-HZQZC5CK.js.map
-//# sourceMappingURL=chunk-HZQZC5CK.js.map
+//# sourceMappingURL=chunk-YAKIMPXZ.js.map
+//# sourceMappingURL=chunk-YAKIMPXZ.js.map

package/dist/chunk-YAKIMPXZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Charts/BarChart.tsx"],"names":[],"mappings":"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","file":"chunk-YAKIMPXZ.js","sourcesContent":["\"use client\";\nimport React from \"react\";\nimport Chart from \"react-apexcharts\";\nimport type { ApexOptions } from \"apexcharts\";\n\nexport interface BarChartProps {\n  series?: ApexAxisChartSeries;\n  categories?: string[];\n  colors?: string[];\n  height?: number;\n  options?: ApexOptions;\n}\n\nconst defaultOptions: ApexOptions = {\n  colors: [\"#465fff\"],\n  chart: {\n    fontFamily: \"Outfit, sans-serif\",\n    type: \"bar\",\n    height: 180,\n    toolbar: {\n      show: false,\n    },\n  },\n  plotOptions: {\n    bar: {\n      horizontal: false,\n      columnWidth: \"39%\",\n      borderRadius: 5,\n      borderRadiusApplication: \"end\",\n    },\n  },\n  dataLabels: {\n    enabled: false,\n  },\n  // No transparent stroke around the columns: it shrinks and shifts the\n  // painted bar inside its allocated slot, so the hover highlight band\n  // (crosshairs width \"barWidth\" = the allocated width) would render wider\n  // than — and offset from — the visible bar.\n  stroke: {\n    show: false,\n  },\n  xaxis: {\n    categories: [\n      \"Jan\",\n      \"Feb\",\n      \"Mar\",\n      \"Apr\",\n      \"May\",\n      \"Jun\",\n      \"Jul\",\n      \"Aug\",\n      \"Sep\",\n      \"Oct\",\n      \"Nov\",\n      \"Dec\",\n    ],\n    axisBorder: {\n      show: false,\n    },\n    axisTicks: {\n      show: false,\n    },\n    // Match the hover highlight band to the bar width (the default band spans\n    // the whole category slot, looking ~3x wider than the 39% columns).\n    crosshairs: {\n      width: \"barWidth\",\n    },\n  },\n  legend: {\n    show: true,\n    position: \"top\",\n    horizontalAlign: \"left\",\n    fontFamily: \"Outfit\",\n    // Rounded, border-less swatches that echo the column styling. ApexCharts\n    // sets the marker span's `color` to the series color, so `currentColor`\n    // picks it up; `customHTML` lets us round the corners (the built-in shapes\n    // are sharp SVG paths that CSS border-radius can't touch).\n    markers: {\n      size: 7,\n      strokeWidth: 0,\n      customHTML: () =>\n        '<span style=\"display:block;height:100%;width:100%;border-radius:3px;background:currentColor\"></span>',\n    },\n  },\n  yaxis: {\n    title: {\n      text: undefined,\n    },\n  },\n  grid: {\n    yaxis: {\n      lines: {\n        show: true,\n      },\n    },\n  },\n  fill: {\n    opacity: 1,\n  },\n  tooltip: {\n    x: {\n      show: false,\n    },\n    y: {\n      formatter: (val: number) => `${val}`,\n    },\n  },\n};\n\nconst defaultSeries: ApexAxisChartSeries = [\n  {\n    name: \"Sales\",\n    data: [168, 385, 201, 298, 187, 195, 291, 110, 215, 390, 280, 112],\n  },\n];\n\nexport const BarChart: React.FC<BarChartProps> = ({\n  series,\n  categories,\n  colors,\n  height,\n  options,\n}) => {\n  const mergedOptions: ApexOptions = {\n    ...defaultOptions,\n    ...options,\n    colors: colors ?? options?.colors ?? defaultOptions.colors,\n    chart: {\n      ...defaultOptions.chart,\n      ...options?.chart,\n      height: height ?? options?.chart?.height ?? defaultOptions.chart?.height,\n    },\n    xaxis: {\n      ...defaultOptions.xaxis,\n      ...options?.xaxis,\n      categories:\n        categories ??\n        options?.xaxis?.categories ??\n        defaultOptions.xaxis?.categories,\n    },\n  };\n\n  return (\n    <Chart\n      options={mergedOptions}\n      series={series ?? defaultSeries}\n      type=\"bar\"\n      height={height ?? 180}\n    />\n  );\n};\n"]}

package/dist/components/Charts/BarChart.cjs

@@ -1,13 +1,13 @@
 "use client";
 'use strict';
 
-var chunkOSIOO5AE_cjs = require('../../chunk-OSIOO5AE.cjs');
+var chunk2C5QY3Z2_cjs = require('../../chunk-2C5QY3Z2.cjs');
 
 
 
 Object.defineProperty(exports, "BarChart", {
   enumerable: true,
-  get: function () { return chunkOSIOO5AE_cjs.BarChart; }
+  get: function () { return chunk2C5QY3Z2_cjs.BarChart; }
 });
 //# sourceMappingURL=BarChart.cjs.map
 //# sourceMappingURL=BarChart.cjs.map

package/dist/components/Charts/BarChart.js

@@ -1,4 +1,4 @@
 "use client";
-export { BarChart } from '../../chunk-HZQZC5CK.js';
+export { BarChart } from '../../chunk-YAKIMPXZ.js';
 //# sourceMappingURL=BarChart.js.map
 //# sourceMappingURL=BarChart.js.map

package/dist/components/Charts/LineChart.cjs

@@ -1,13 +1,13 @@
 "use client";
 'use strict';
 
-var chunkBGA7AECV_cjs = require('../../chunk-BGA7AECV.cjs');
+var chunk3EE6CPHW_cjs = require('../../chunk-3EE6CPHW.cjs');
 
 
 
 Object.defineProperty(exports, "LineChart", {
   enumerable: true,
-  get: function () { return chunkBGA7AECV_cjs.LineChart; }
+  get: function () { return chunk3EE6CPHW_cjs.LineChart; }
 });
 //# sourceMappingURL=LineChart.cjs.map
 //# sourceMappingURL=LineChart.cjs.map

package/dist/components/Charts/LineChart.js

@@ -1,4 +1,4 @@
 "use client";
-export { LineChart } from '../../chunk-MEU4PMP5.js';
+export { LineChart } from '../../chunk-NWIOJGF7.js';
 //# sourceMappingURL=LineChart.js.map
 //# sourceMappingURL=LineChart.js.map

package/dist/components/ColorPicker/ColorPicker.cjs

@@ -0,0 +1,14 @@
+"use client";
+'use strict';
+
+var chunkMYN5LDMO_cjs = require('../../chunk-MYN5LDMO.cjs');
+require('../../chunk-YERNSNT4.cjs');
+
+
+
+Object.defineProperty(exports, "ColorPicker", {
+  enumerable: true,
+  get: function () { return chunkMYN5LDMO_cjs.ColorPicker; }
+});
+//# sourceMappingURL=ColorPicker.cjs.map
+//# sourceMappingURL=ColorPicker.cjs.map

package/dist/components/ColorPicker/ColorPicker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"ColorPicker.cjs"}

package/dist/components/ColorPicker/ColorPicker.d.cts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Color } from 'react-beautiful-color';
+
+type ColorPickerFormat = "hex" | "rgb" | "rgba" | "hsl" | "hsla";
+interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Initial color (uncontrolled). Any hex string, e.g. `"#3641f5"`. */
+    defaultValue?: string;
+    /** Format selected on first render. Default: `"hex"`. */
+    defaultFormat?: ColorPickerFormat;
+    /** Formats offered in the switcher. Default: all five. */
+    formats?: ColorPickerFormat[];
+    /** Render the value input + format switcher. Default: `true`. */
+    showInput?: boolean;
+    /** Show the native eye-dropper button (browser support varies). */
+    withEyeDropper?: boolean;
+    /** Optional label rendered above the picker. */
+    label?: string;
+    /** Fires on every change with the formatted string and the `Color` instance. */
+    onChange?: (value: string, color: Color) => void;
+}
+declare const ColorPicker: React.FC<ColorPickerProps>;
+
+export { ColorPicker, type ColorPickerFormat, type ColorPickerProps };

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Color } from 'react-beautiful-color';
+
+type ColorPickerFormat = "hex" | "rgb" | "rgba" | "hsl" | "hsla";
+interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Initial color (uncontrolled). Any hex string, e.g. `"#3641f5"`. */
+    defaultValue?: string;
+    /** Format selected on first render. Default: `"hex"`. */
+    defaultFormat?: ColorPickerFormat;
+    /** Formats offered in the switcher. Default: all five. */
+    formats?: ColorPickerFormat[];
+    /** Render the value input + format switcher. Default: `true`. */
+    showInput?: boolean;
+    /** Show the native eye-dropper button (browser support varies). */
+    withEyeDropper?: boolean;
+    /** Optional label rendered above the picker. */
+    label?: string;
+    /** Fires on every change with the formatted string and the `Color` instance. */
+    onChange?: (value: string, color: Color) => void;
+}
+declare const ColorPicker: React.FC<ColorPickerProps>;
+
+export { ColorPicker, type ColorPickerFormat, type ColorPickerProps };

package/dist/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,5 @@
+"use client";
+export { ColorPicker } from '../../chunk-P7LI2FSR.js';
+import '../../chunk-ZLIYUUA4.js';
+//# sourceMappingURL=ColorPicker.js.map
+//# sourceMappingURL=ColorPicker.js.map

package/dist/components/ColorPicker/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"ColorPicker.js"}

package/dist/index.cjs

@@ -1,11 +1,12 @@
 "use client";
 'use strict';
 
-var chunkOSIOO5AE_cjs = require('./chunk-OSIOO5AE.cjs');
-var chunkBGA7AECV_cjs = require('./chunk-BGA7AECV.cjs');
+var chunk2C5QY3Z2_cjs = require('./chunk-2C5QY3Z2.cjs');
+var chunk3EE6CPHW_cjs = require('./chunk-3EE6CPHW.cjs');
 var chunkMYOOZFHK_cjs = require('./chunk-MYOOZFHK.cjs');
 var chunkHT7SQXRF_cjs = require('./chunk-HT7SQXRF.cjs');
 var chunkW7SNEBD7_cjs = require('./chunk-W7SNEBD7.cjs');
+var chunkMYN5LDMO_cjs = require('./chunk-MYN5LDMO.cjs');
 var chunkYERNSNT4_cjs = require('./chunk-YERNSNT4.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var React5 = require('react');
@@ -2463,12 +2464,13 @@ var Switch = ({
       onChange(newCheckedState);
     }
   };
+  const offTrack = "bg-gray-200 ring-1 ring-inset ring-gray-300 dark:bg-white/10 dark:ring-0";
   const switchColors = color === "blue" ? {
-    background: isChecked ? "bg-brand-500 " : "bg-gray-200 dark:bg-white/10",
+    background: isChecked ? "bg-brand-500 " : offTrack,
     // Blue version
     knob: isChecked ? "translate-x-full bg-white" : "translate-x-0 bg-white"
   } : {
-    background: isChecked ? "bg-gray-800 dark:bg-white/10" : "bg-gray-200 dark:bg-white/10",
+    background: isChecked ? "bg-gray-800 dark:bg-white/10" : offTrack,
     // Gray version
     knob: isChecked ? "translate-x-full bg-white" : "translate-x-0 bg-white"
   };
@@ -3135,11 +3137,11 @@ var Slider = ({
 
 Object.defineProperty(exports, "BarChart", {
   enumerable: true,
-  get: function () { return chunkOSIOO5AE_cjs.BarChart; }
+  get: function () { return chunk2C5QY3Z2_cjs.BarChart; }
 });
 Object.defineProperty(exports, "LineChart", {
   enumerable: true,
-  get: function () { return chunkBGA7AECV_cjs.LineChart; }
+  get: function () { return chunk3EE6CPHW_cjs.LineChart; }
 });
 Object.defineProperty(exports, "Calendar", {
   enumerable: true,
@@ -3157,6 +3159,10 @@ Object.defineProperty(exports, "Editor", {
   enumerable: true,
   get: function () { return chunkW7SNEBD7_cjs.Editor; }
 });
+Object.defineProperty(exports, "ColorPicker", {
+  enumerable: true,
+  get: function () { return chunkMYN5LDMO_cjs.ColorPicker; }
+});
 Object.defineProperty(exports, "cn", {
   enumerable: true,
   get: function () { return chunkYERNSNT4_cjs.cn; }