@andreagiugni/tailwind-dashboard-ui 0.5.0 → 0.5.1

package/dist/{chunk-OSIOO5AE.cjs → chunk-2C5QY3Z2.cjs}

@@ -29,10 +29,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: [
@@ -54,13 +56,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: {
@@ -126,5 +142,5 @@ var BarChart = ({
 };
 
 exports.BarChart = BarChart;
-//# sourceMappingURL=chunk-OSIOO5AE.cjs.map
-//# sourceMappingURL=chunk-OSIOO5AE.cjs.map
+//# sourceMappingURL=chunk-2C5QY3Z2.cjs.map
+//# sourceMappingURL=chunk-2C5QY3Z2.cjs.map

package/dist/chunk-2C5QY3Z2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Charts/BarChart.tsx"],"names":["jsx","Chart"],"mappings":"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","file":"chunk-2C5QY3Z2.cjs","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/{chunk-BGA7AECV.cjs → chunk-3EE6CPHW.cjs}

@@ -12,7 +12,15 @@ var defaultOptions = {
   legend: {
     show: false,
     position: "top",
-    horizontalAlign: "left"
+    horizontalAlign: "left",
+    // Rounded, border-less swatches (visible when the legend is enabled).
+    // ApexCharts sets the marker span's `color` to the series color, so
+    // `currentColor` picks it up; `customHTML` rounds the corners.
+    markers: {
+      size: 7,
+      strokeWidth: 0,
+      customHTML: () => '<span style="display:block;height:100%;width:100%;border-radius:3px;background:currentColor"></span>'
+    }
   },
   colors: ["#465FFF", "#9CB9FF"],
   chart: {
@@ -148,5 +156,5 @@ var LineChart = ({
 };
 
 exports.LineChart = LineChart;
-//# sourceMappingURL=chunk-BGA7AECV.cjs.map
-//# sourceMappingURL=chunk-BGA7AECV.cjs.map
+//# sourceMappingURL=chunk-3EE6CPHW.cjs.map
+//# sourceMappingURL=chunk-3EE6CPHW.cjs.map

package/dist/chunk-3EE6CPHW.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Charts/LineChart.tsx"],"names":["jsx","Chart"],"mappings":";;;;;;;;;AAaA,IAAM,cAAA,GAA8B;AAAA,EAClC,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM,KAAA;AAAA,IACN,QAAA,EAAU,KAAA;AAAA,IACV,eAAA,EAAiB,MAAA;AAAA;AAAA;AAAA;AAAA,IAIjB,OAAA,EAAS;AAAA,MACP,IAAA,EAAM,CAAA;AAAA,MACN,WAAA,EAAa,CAAA;AAAA,MACb,YAAY,MACV;AAAA;AACJ,GACF;AAAA,EACA,MAAA,EAAQ,CAAC,SAAA,EAAW,SAAS,CAAA;AAAA,EAC7B,KAAA,EAAO;AAAA,IACL,UAAA,EAAY,oBAAA;AAAA,IACZ,MAAA,EAAQ,GAAA;AAAA,IACR,IAAA,EAAM,MAAA;AAAA,IACN,OAAA,EAAS;AAAA,MACP,IAAA,EAAM;AAAA;AACR,GACF;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,KAAA,EAAO,UAAA;AAAA,IACP,KAAA,EAAO,CAAC,CAAA,EAAG,CAAC;AAAA,GACd;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,IAAA,EAAM,UAAA;AAAA,IACN,QAAA,EAAU;AAAA,MACR,WAAA,EAAa,IAAA;AAAA,MACb,SAAA,EAAW;AAAA;AACb,GACF;AAAA,EACA,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,CAAA;AAAA,IACN,YAAA,EAAc,MAAA;AAAA,IACd,WAAA,EAAa,CAAA;AAAA,IACb,KAAA,EAAO;AAAA,MACL,IAAA,EAAM;AAAA;AACR,GACF;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,KAAA,EAAO;AAAA,MACL,KAAA,EAAO;AAAA,QACL,IAAA,EAAM;AAAA;AACR,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,KAAA,EAAO;AAAA,QACL,IAAA,EAAM;AAAA;AACR;AACF,GACF;AAAA,EACA,UAAA,EAAY;AAAA,IACV,OAAA,EAAS;AAAA,GACX;AAAA,EACA,OAAA,EAAS;AAAA,IACP,OAAA,EAAS,IAAA;AAAA,IACT,CAAA,EAAG;AAAA,MACD,MAAA,EAAQ;AAAA;AACV,GACF;AAAA,EACA,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,UAAA;AAAA,IACN,UAAA,EAAY;AAAA,MACV,KAAA;AAAA,MACA,KAAA;AAAA,MACA,KAAA;AAAA,MACA,KAAA;AAAA,MACA,KAAA;AAAA,MACA,KAAA;AAAA,MACA,KAAA;AAAA,MACA,KAAA;AAAA,MACA,KAAA;AAAA,MACA,KAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA,KACR;AAAA,IACA,SAAA,EAAW;AAAA,MACT,IAAA,EAAM;AAAA,KACR;AAAA,IACA,OAAA,EAAS;AAAA,MACP,OAAA,EAAS;AAAA;AACX,GACF;AAAA,EACA,KAAA,EAAO;AAAA,IACL,MAAA,EAAQ;AAAA,MACN,KAAA,EAAO;AAAA,QACL,QAAA,EAAU,MAAA;AAAA,QACV,MAAA,EAAQ,CAAC,SAAS;AAAA;AACpB,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,IAAA,EAAM,EAAA;AAAA,MACN,KAAA,EAAO;AAAA,QACL,QAAA,EAAU;AAAA;AACZ;AACF;AAEJ,CAAA;AAEA,IAAM,aAAA,GAAqC;AAAA,EACzC;AAAA,IACE,IAAA,EAAM,OAAA;AAAA,IACN,IAAA,EAAM,CAAC,GAAA,EAAK,GAAA,EAAK,GAAA,EAAK,GAAA,EAAK,GAAA,EAAK,GAAA,EAAK,GAAA,EAAK,GAAA,EAAK,GAAA,EAAK,GAAA,EAAK,KAAK,GAAG;AAAA,GACnE;AAAA,EACA;AAAA,IACE,IAAA,EAAM,SAAA;AAAA,IACN,IAAA,EAAM,CAAC,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,GAAA,EAAK,GAAA,EAAK,GAAA,EAAK,KAAK,GAAG;AAAA;AAE9D,CAAA;AAEO,IAAM,YAAsC,CAAC;AAAA,EAClD,MAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,aAAA,GAA6B;AAAA,IACjC,GAAG,cAAA;AAAA,IACH,GAAG,OAAA;AAAA,IACH,MAAA,EAAQ,MAAA,IAAU,OAAA,EAAS,MAAA,IAAU,cAAA,CAAe,MAAA;AAAA,IACpD,KAAA,EAAO;AAAA,MACL,GAAG,cAAA,CAAe,KAAA;AAAA,MAClB,GAAG,OAAA,EAAS,KAAA;AAAA,MACZ,QAAQ,MAAA,IAAU,OAAA,EAAS,KAAA,EAAO,MAAA,IAAU,eAAe,KAAA,EAAO;AAAA,KACpE;AAAA,IACA,KAAA,EAAO;AAAA,MACL,GAAG,cAAA,CAAe,KAAA;AAAA,MAClB,GAAG,OAAA,EAAS,KAAA;AAAA,MACZ,YACE,UAAA,IACA,OAAA,EAAS,KAAA,EAAO,UAAA,IAChB,eAAe,KAAA,EAAO;AAAA;AAC1B,GACF;AAEA,EAAA,uBACEA,cAAA;AAAA,IAACC,sBAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,aAAA;AAAA,MACT,QAAQ,MAAA,IAAU,aAAA;AAAA,MAClB,IAAA,EAAK,MAAA;AAAA,MACL,QAAQ,MAAA,IAAU;AAAA;AAAA,GACpB;AAEJ","file":"chunk-3EE6CPHW.cjs","sourcesContent":["\"use client\";\nimport React from \"react\";\nimport Chart from \"react-apexcharts\";\nimport type { ApexOptions } from \"apexcharts\";\n\nexport interface LineChartProps {\n  series?: ApexAxisChartSeries;\n  categories?: string[];\n  colors?: string[];\n  height?: number;\n  options?: ApexOptions;\n}\n\nconst defaultOptions: ApexOptions = {\n  legend: {\n    show: false,\n    position: \"top\",\n    horizontalAlign: \"left\",\n    // Rounded, border-less swatches (visible when the legend is enabled).\n    // ApexCharts sets the marker span's `color` to the series color, so\n    // `currentColor` picks it up; `customHTML` rounds the corners.\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  colors: [\"#465FFF\", \"#9CB9FF\"],\n  chart: {\n    fontFamily: \"Outfit, sans-serif\",\n    height: 310,\n    type: \"line\",\n    toolbar: {\n      show: false,\n    },\n  },\n  stroke: {\n    curve: \"straight\",\n    width: [2, 2],\n  },\n  fill: {\n    type: \"gradient\",\n    gradient: {\n      opacityFrom: 0.55,\n      opacityTo: 0,\n    },\n  },\n  markers: {\n    size: 0,\n    strokeColors: \"#fff\",\n    strokeWidth: 2,\n    hover: {\n      size: 6,\n    },\n  },\n  grid: {\n    xaxis: {\n      lines: {\n        show: false,\n      },\n    },\n    yaxis: {\n      lines: {\n        show: true,\n      },\n    },\n  },\n  dataLabels: {\n    enabled: false,\n  },\n  tooltip: {\n    enabled: true,\n    x: {\n      format: \"dd MMM yyyy\",\n    },\n  },\n  xaxis: {\n    type: \"category\",\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    tooltip: {\n      enabled: false,\n    },\n  },\n  yaxis: {\n    labels: {\n      style: {\n        fontSize: \"12px\",\n        colors: [\"#6B7280\"],\n      },\n    },\n    title: {\n      text: \"\",\n      style: {\n        fontSize: \"0px\",\n      },\n    },\n  },\n};\n\nconst defaultSeries: ApexAxisChartSeries = [\n  {\n    name: \"Sales\",\n    data: [180, 190, 170, 160, 175, 165, 170, 205, 230, 210, 240, 235],\n  },\n  {\n    name: \"Revenue\",\n    data: [40, 30, 50, 40, 55, 40, 70, 100, 110, 120, 150, 140],\n  },\n];\n\nexport const LineChart: React.FC<LineChartProps> = ({\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=\"area\"\n      height={height ?? 310}\n    />\n  );\n};\n"]}

package/dist/{chunk-3T6AZMUZ.cjs → chunk-MYN5LDMO.cjs}

@@ -21,38 +21,32 @@ function parseValue(text, format) {
     return { type: "hsla", h: n[0], s: n[1], l: n[2], a: n[3] };
   return null;
 }
-function inputToString(input) {
-  switch (input.type) {
-    case "hex":
-      return input.value;
-    case "rgb":
-      return `rgb(${input.r}, ${input.g}, ${input.b})`;
-    case "rgba":
-      return `rgba(${input.r}, ${input.g}, ${input.b}, ${input.a})`;
-    case "hsl":
-      return `hsl(${input.h}, ${input.s}%, ${input.l}%)`;
-    case "hsla":
-      return `hsla(${input.h}, ${input.s}%, ${input.l}%, ${input.a})`;
-    case "hsv":
-      return `hsv(${input.h}, ${input.s}%, ${input.v}%)`;
-    case "hsva":
-      return `hsva(${input.h}, ${input.s}%, ${input.v}%, ${input.a})`;
-  }
-}
-function stateToString(state, format) {
+function colorToString(color, format) {
   switch (format) {
-    case "hex":
-      return state.hex;
-    case "rgb":
-      return `rgb(${state.rgb.r}, ${state.rgb.g}, ${state.rgb.b})`;
-    case "rgba":
-      return `rgba(${state.rgba.r}, ${state.rgba.g}, ${state.rgba.b}, ${state.rgba.a})`;
-    case "hsl":
-      return `hsl(${state.hsl.h}, ${state.hsl.s}%, ${state.hsl.l}%)`;
-    case "hsla":
-      return `hsla(${state.hsla.h}, ${state.hsla.s}%, ${state.hsla.l}%, ${state.hsla.a})`;
+    case "hex": {
+      const { r, g, b } = color.getRgb();
+      const a = color.getRgba().a;
+      const hex = `#${[r, g, b].map((v) => Math.round(v).toString(16).padStart(2, "0")).join("")}`;
+      return a < 1 ? `${hex}${Math.round(a * 255).toString(16).padStart(2, "0")}` : hex;
+    }
+    case "rgb": {
+      const { r, g, b } = color.getRgb();
+      return `rgb(${r}, ${g}, ${b})`;
+    }
+    case "rgba": {
+      const { r, g, b, a } = color.getRgba();
+      return `rgba(${r}, ${g}, ${b}, ${a})`;
+    }
+    case "hsl": {
+      const { h, s, l } = color.getHsl();
+      return `hsl(${h}, ${s}%, ${l}%)`;
+    }
+    case "hsla": {
+      const { h, s, l, a } = color.getHsla();
+      return `hsla(${h}, ${s}%, ${l}%, ${a})`;
+    }
     default:
-      return state.hex;
+      return color.getHex();
   }
 }
 var pipetteIcon = /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -73,32 +67,50 @@ var ColorPicker = ({
   className,
   ...rest
 }) => {
-  const [{ colorInput, colorState }, setColor] = reactBeautifulColor.useColorState({
-    type: "hex",
-    value: defaultValue
-  });
+  const [hsva, setHsva] = react.useState(
+    () => new reactBeautifulColor.Color({ type: "hex", value: defaultValue }).getHsva()
+  );
   const [format, setFormat] = react.useState(defaultFormat);
   const [draft, setDraft] = react.useState(null);
+  const [exact, setExact] = react.useState(
+    () => ({ format: "hex", value: defaultValue })
+  );
+  const colorInput = react.useMemo(() => ({ type: "hsva", ...hsva }), [hsva]);
   const currentColor = react.useMemo(() => new reactBeautifulColor.Color(colorInput), [colorInput]);
-  const display = colorInput.type === format ? inputToString(colorInput) : stateToString(colorState, format);
+  const display = exact && exact.format === format ? exact.value : colorToString(currentColor, format);
   const inputValue = draft ?? display;
-  const apply = (input) => {
-    setColor(input);
-    onChange?.(inputToString(input), new reactBeautifulColor.Color(input));
-  };
-  const handlePickerChange = (next) => {
-    setColor(next);
-    onChange?.(next.format(format), next);
-  };
+  const hsvaRef = react.useRef(hsva);
+  hsvaRef.current = hsva;
+  const formatRef = react.useRef(format);
+  formatRef.current = format;
+  const onChangeRef = react.useRef(onChange);
+  onChangeRef.current = onChange;
+  const handlePickerChange = react.useCallback((next) => {
+    const nv = next.getHsva();
+    const cur = hsvaRef.current;
+    if (nv.h === cur.h && nv.s === cur.s && nv.v === cur.v && nv.a === cur.a) return;
+    setHsva(nv);
+    setExact(null);
+    setDraft(null);
+    onChangeRef.current?.(colorToString(next, formatRef.current), next);
+  }, []);
   const handleFormatChange = (f) => {
     setFormat(f);
     setDraft(null);
-    onChange?.(stateToString(colorState, f), currentColor);
+    onChange?.(
+      exact && exact.format === f ? exact.value : colorToString(currentColor, f),
+      currentColor
+    );
   };
   const handleInputChange = (text) => {
     setDraft(text);
     const parsed = parseValue(text, format);
-    if (parsed) apply(parsed);
+    if (parsed) {
+      const c = new reactBeautifulColor.Color(parsed);
+      setHsva(c.getHsva());
+      setExact({ format, value: text.trim() });
+      onChange?.(text.trim(), c);
+    }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkYERNSNT4_cjs.cn("w-full max-w-xs", className), ...rest, children: [
     label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400", children: label }),
@@ -107,14 +119,14 @@ var ColorPicker = ({
       {
         color: colorInput,
         onChange: handlePickerChange,
-        className: "rounded-2xl border border-gray-200 bg-white p-3 dark:border-gray-800 dark:bg-white/[0.03]",
+        className: "h-auto w-full rounded-2xl border border-gray-200 bg-white p-3 shadow-none dark:border-gray-800 dark:bg-white/[0.03]",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactBeautifulColor.ColorPicker.Saturation, { className: "mb-3 h-40 overflow-hidden rounded-lg" }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactBeautifulColor.ColorPicker.Saturation, { className: "mb-4 h-40 rounded-lg" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
             withEyeDropper && /* @__PURE__ */ jsxRuntime.jsx(reactBeautifulColor.ColorPicker.EyeDropper, { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-white/[0.03]", children: pipetteIcon }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(reactBeautifulColor.ColorPicker.Hue, { className: "h-3 overflow-hidden rounded-full" }),
-              /* @__PURE__ */ jsxRuntime.jsx(reactBeautifulColor.ColorPicker.Alpha, { className: "h-3 overflow-hidden rounded-full" })
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(reactBeautifulColor.ColorPicker.Hue, { className: "h-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx(reactBeautifulColor.ColorPicker.Alpha, { className: "h-4" })
             ] })
           ] })
         ]
@@ -129,16 +141,30 @@ var ColorPicker = ({
           style: { backgroundColor: currentColor.format("rgba") }
         }
       ),
-      formats.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-        "select",
-        {
-          "aria-label": "Color format",
-          value: format,
-          onChange: (e) => handleFormatChange(e.target.value),
-          className: "h-11 shrink-0 rounded-lg border border-gray-300 bg-transparent px-2 text-sm text-gray-700 focus:outline-hidden dark:border-gray-700 dark:text-gray-300",
-          children: formats.map((f) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: f, children: f.toUpperCase() }, f))
-        }
-      ),
+      formats.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative shrink-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "select",
+          {
+            "aria-label": "Color format",
+            value: format,
+            onChange: (e) => handleFormatChange(e.target.value),
+            className: "h-11 appearance-none rounded-lg border border-gray-300 bg-transparent pl-3 pr-8 text-sm text-gray-700 focus:outline-hidden dark:border-gray-700 dark:text-gray-300",
+            children: formats.map((f) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: f, children: f.toUpperCase() }, f))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400",
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -154,5 +180,5 @@ var ColorPicker = ({
 };
 
 exports.ColorPicker = ColorPicker;
-//# sourceMappingURL=chunk-3T6AZMUZ.cjs.map
-//# sourceMappingURL=chunk-3T6AZMUZ.cjs.map
+//# sourceMappingURL=chunk-MYN5LDMO.cjs.map
+//# sourceMappingURL=chunk-MYN5LDMO.cjs.map

package/dist/chunk-MYN5LDMO.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorPicker/ColorPicker.tsx"],"names":["jsx","useState","Color","useMemo","useRef","useCallback","jsxs","cn","RBColorPicker"],"mappings":";;;;;;;AA8BA,IAAM,cAAmC,CAAC,KAAA,EAAO,KAAA,EAAO,MAAA,EAAQ,OAAO,MAAM,CAAA;AAG7E,SAAS,UAAA,CAAW,MAAc,MAAA,EAA8C;AAC9E,EAAA,MAAM,CAAA,GAAI,KAAK,IAAA,EAAK;AACpB,EAAA,IAAI,WAAW,KAAA,EAAO;AACpB,IAAA,OAAO,2CAAA,CAA4C,KAAK,CAAC,CAAA,GACrD,EAAE,IAAA,EAAM,KAAA,EAAO,KAAA,EAAO,CAAA,EAAE,GACxB,IAAA;AAAA,EACN;AACA,EAAA,MAAM,CAAA,GAAI,EAAE,KAAA,CAAM,cAAc,GAAG,GAAA,CAAI,MAAM,KAAK,EAAC;AACnD,EAAA,IAAI,MAAA,KAAW,SAAS,CAAA,CAAE,MAAA,IAAU,GAAG,OAAO,EAAE,MAAM,KAAA,EAAO,CAAA,EAAG,EAAE,CAAC,CAAA,EAAG,GAAG,CAAA,CAAE,CAAC,GAAG,CAAA,EAAG,CAAA,CAAE,CAAC,CAAA,EAAE;AACvF,EAAA,IAAI,MAAA,KAAW,MAAA,IAAU,CAAA,CAAE,MAAA,IAAU,CAAA;AACnC,IAAA,OAAO,EAAE,IAAA,EAAM,MAAA,EAAQ,GAAG,CAAA,CAAE,CAAC,GAAG,CAAA,EAAG,CAAA,CAAE,CAAC,CAAA,EAAG,GAAG,CAAA,CAAE,CAAC,GAAG,CAAA,EAAG,CAAA,CAAE,CAAC,CAAA,EAAE;AAC5D,EAAA,IAAI,MAAA,KAAW,SAAS,CAAA,CAAE,MAAA,IAAU,GAAG,OAAO,EAAE,MAAM,KAAA,EAAO,CAAA,EAAG,EAAE,CAAC,CAAA,EAAG,GAAG,CAAA,CAAE,CAAC,GAAG,CAAA,EAAG,CAAA,CAAE,CAAC,CAAA,EAAE;AACvF,EAAA,IAAI,MAAA,KAAW,MAAA,IAAU,CAAA,CAAE,MAAA,IAAU,CAAA;AACnC,IAAA,OAAO,EAAE,IAAA,EAAM,MAAA,EAAQ,GAAG,CAAA,CAAE,CAAC,GAAG,CAAA,EAAG,CAAA,CAAE,CAAC,CAAA,EAAG,GAAG,CAAA,CAAE,CAAC,GAAG,CAAA,EAAG,CAAA,CAAE,CAAC,CAAA,EAAE;AAC5D,EAAA,OAAO,IAAA;AACT;AAGA,SAAS,aAAA,CAAc,OAAc,MAAA,EAAmC;AACtE,EAAA,QAAQ,MAAA;AAAQ,IACd,KAAK,KAAA,EAAO;AACV,MAAA,MAAM,EAAE,CAAA,EAAG,CAAA,EAAG,CAAA,EAAE,GAAI,MAAM,MAAA,EAAO;AACjC,MAAA,MAAM,CAAA,GAAI,KAAA,CAAM,OAAA,EAAQ,CAAE,CAAA;AAC1B,MAAA,MAAM,GAAA,GAAM,CAAA,CAAA,EAAI,CAAC,CAAA,EAAG,CAAA,EAAG,CAAC,CAAA,CAAE,GAAA,CAAI,CAAC,CAAA,KAAM,IAAA,CAAK,KAAA,CAAM,CAAC,CAAA,CAAE,QAAA,CAAS,EAAE,CAAA,CAAE,QAAA,CAAS,CAAA,EAAG,GAAG,CAAC,CAAA,CAAE,IAAA,CAAK,EAAE,CAAC,CAAA,CAAA;AAC1F,MAAA,OAAO,IAAI,CAAA,GACP,CAAA,EAAG,GAAG,CAAA,EAAG,KAAK,KAAA,CAAM,CAAA,GAAI,GAAG,CAAA,CAAE,SAAS,EAAE,CAAA,CAAE,SAAS,CAAA,EAAG,GAAG,CAAC,CAAA,CAAA,GAC1D,GAAA;AAAA,IACN;AAAA,IACA,KAAK,KAAA,EAAO;AACV,MAAA,MAAM,EAAE,CAAA,EAAG,CAAA,EAAG,CAAA,EAAE,GAAI,MAAM,MAAA,EAAO;AACjC,MAAA,OAAO,CAAA,IAAA,EAAO,CAAC,CAAA,EAAA,EAAK,CAAC,KAAK,CAAC,CAAA,CAAA,CAAA;AAAA,IAC7B;AAAA,IACA,KAAK,MAAA,EAAQ;AACX,MAAA,MAAM,EAAE,CAAA,EAAG,CAAA,EAAG,GAAG,CAAA,EAAE,GAAI,MAAM,OAAA,EAAQ;AACrC,MAAA,OAAO,QAAQ,CAAC,CAAA,EAAA,EAAK,CAAC,CAAA,EAAA,EAAK,CAAC,KAAK,CAAC,CAAA,CAAA,CAAA;AAAA,IACpC;AAAA,IACA,KAAK,KAAA,EAAO;AACV,MAAA,MAAM,EAAE,CAAA,EAAG,CAAA,EAAG,CAAA,EAAE,GAAI,MAAM,MAAA,EAAO;AACjC,MAAA,OAAO,CAAA,IAAA,EAAO,CAAC,CAAA,EAAA,EAAK,CAAC,MAAM,CAAC,CAAA,EAAA,CAAA;AAAA,IAC9B;AAAA,IACA,KAAK,MAAA,EAAQ;AACX,MAAA,MAAM,EAAE,CAAA,EAAG,CAAA,EAAG,GAAG,CAAA,EAAE,GAAI,MAAM,OAAA,EAAQ;AACrC,MAAA,OAAO,QAAQ,CAAC,CAAA,EAAA,EAAK,CAAC,CAAA,GAAA,EAAM,CAAC,MAAM,CAAC,CAAA,CAAA,CAAA;AAAA,IACtC;AAAA,IACA;AACE,MAAA,OAAO,MAAM,MAAA,EAAO;AAAA;AAE1B;AAEA,IAAM,WAAA,mBACJA,cAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EAAO,aAAA,EAAY,MAAA,EACtE,QAAA,kBAAAA,cAAA;AAAA,EAAC,MAAA;AAAA,EAAA;AAAA,IACC,CAAA,EAAE,oKAAA;AAAA,IACF,IAAA,EAAK;AAAA;AACP,CAAA,EACF,CAAA;AAGK,IAAM,cAA0C,CAAC;AAAA,EACtD,YAAA,GAAe,SAAA;AAAA,EACf,aAAA,GAAgB,KAAA;AAAA,EAChB,OAAA,GAAU,WAAA;AAAA,EACV,SAAA,GAAY,IAAA;AAAA,EACZ,cAAA,GAAiB,KAAA;AAAA,EACjB,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AAKJ,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,cAAA;AAAA,IAAe,MACrC,IAAIC,yBAAA,CAAM,EAAE,IAAA,EAAM,OAAO,KAAA,EAAO,YAAA,EAAc,CAAA,CAAE,OAAA;AAAQ,GAC1D;AACA,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAID,eAA4B,aAAa,CAAA;AAGrE,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,eAAwB,IAAI,CAAA;AAGtD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,cAAA;AAAA,IACxB,OAAO,EAAE,MAAA,EAAQ,KAAA,EAAO,OAAO,YAAA,EAAa;AAAA,GAC9C;AAEA,EAAA,MAAM,UAAA,GAAaE,aAAA,CAAQ,OAAO,EAAE,IAAA,EAAM,MAAA,EAAiB,GAAG,IAAA,EAAK,CAAA,EAAI,CAAC,IAAI,CAAC,CAAA;AAC7E,EAAA,MAAM,YAAA,GAAeA,cAAQ,MAAM,IAAID,0BAAM,UAAU,CAAA,EAAG,CAAC,UAAU,CAAC,CAAA;AACtE,EAAA,MAAM,OAAA,GACJ,SAAS,KAAA,CAAM,MAAA,KAAW,SAAS,KAAA,CAAM,KAAA,GAAQ,aAAA,CAAc,YAAA,EAAc,MAAM,CAAA;AACrF,EAAA,MAAM,aAAa,KAAA,IAAS,OAAA;AAM5B,EAAA,MAAM,OAAA,GAAUE,aAAO,IAAI,CAAA;AAC3B,EAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAClB,EAAA,MAAM,SAAA,GAAYA,aAAO,MAAM,CAAA;AAC/B,EAAA,SAAA,CAAU,OAAA,GAAU,MAAA;AACpB,EAAA,MAAM,WAAA,GAAcA,aAAO,QAAQ,CAAA;AACnC,EAAA,WAAA,CAAY,OAAA,GAAU,QAAA;AAEtB,EAAA,MAAM,kBAAA,GAAqBC,iBAAA,CAAY,CAAC,IAAA,KAAgB;AACtD,IAAA,MAAM,EAAA,GAAK,KAAK,OAAA,EAAQ;AACxB,IAAA,MAAM,MAAM,OAAA,CAAQ,OAAA;AAGpB,IAAA,IAAI,EAAA,CAAG,CAAA,KAAM,GAAA,CAAI,CAAA,IAAK,GAAG,CAAA,KAAM,GAAA,CAAI,CAAA,IAAK,EAAA,CAAG,MAAM,GAAA,CAAI,CAAA,IAAK,EAAA,CAAG,CAAA,KAAM,IAAI,CAAA,EAAG;AAC1E,IAAA,OAAA,CAAQ,EAAE,CAAA;AACV,IAAA,QAAA,CAAS,IAAI,CAAA;AACb,IAAA,QAAA,CAAS,IAAI,CAAA;AACb,IAAA,WAAA,CAAY,UAAU,aAAA,CAAc,IAAA,EAAM,SAAA,CAAU,OAAO,GAAG,IAAI,CAAA;AAAA,EACpE,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,kBAAA,GAAqB,CAAC,CAAA,KAAyB;AACnD,IAAA,SAAA,CAAU,CAAC,CAAA;AACX,IAAA,QAAA,CAAS,IAAI,CAAA;AACb,IAAA,QAAA;AAAA,MACE,KAAA,IAAS,MAAM,MAAA,KAAW,CAAA,GAAI,MAAM,KAAA,GAAQ,aAAA,CAAc,cAAc,CAAC,CAAA;AAAA,MACzE;AAAA,KACF;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,iBAAA,GAAoB,CAAC,IAAA,KAAiB;AAC1C,IAAA,QAAA,CAAS,IAAI,CAAA;AACb,IAAA,MAAM,MAAA,GAAS,UAAA,CAAW,IAAA,EAAM,MAAM,CAAA;AACtC,IAAA,IAAI,MAAA,EAAQ;AACV,MAAA,MAAM,CAAA,GAAI,IAAIH,yBAAA,CAAM,MAAM,CAAA;AAC1B,MAAA,OAAA,CAAQ,CAAA,CAAE,SAAS,CAAA;AACnB,MAAA,QAAA,CAAS,EAAE,MAAA,EAAQ,KAAA,EAAO,IAAA,CAAK,IAAA,IAAQ,CAAA;AACvC,MAAA,QAAA,GAAW,IAAA,CAAK,IAAA,EAAK,EAAG,CAAC,CAAA;AAAA,IAC3B;AAAA,EACF,CAAA;AAEA,EAAA,uBACEI,eAAA,CAAC,SAAI,SAAA,EAAWC,oBAAA,CAAG,mBAAmB,SAAS,CAAA,EAAI,GAAG,IAAA,EACnD,QAAA,EAAA;AAAA,IAAA,KAAA,oBACCP,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mEAAA,EACb,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,oBAEFM,eAAA;AAAA,MAACE,+BAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,UAAA;AAAA,QACP,QAAA,EAAU,kBAAA;AAAA,QACV,SAAA,EAAU,qHAAA;AAAA,QAIV,QAAA,EAAA;AAAA,0BAAAR,cAAA,CAACQ,+BAAA,CAAc,UAAA,EAAd,EAAyB,SAAA,EAAU,sBAAA,EAAuB,CAAA;AAAA,0BAC3DF,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACZ,QAAA,EAAA;AAAA,YAAA,cAAA,mCACEE,+BAAA,CAAc,UAAA,EAAd,EAAyB,SAAA,EAAU,yLACjC,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,4BAEFF,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4BAAA,EACb,QAAA,EAAA;AAAA,8BAAAN,cAAA,CAACQ,+BAAA,CAAc,GAAA,EAAd,EAAkB,SAAA,EAAU,KAAA,EAAM,CAAA;AAAA,8BACnCR,cAAA,CAACQ,+BAAA,CAAc,KAAA,EAAd,EAAoB,WAAU,KAAA,EAAM;AAAA,aAAA,EACvC;AAAA,WAAA,EACF;AAAA;AAAA;AAAA,KACF;AAAA,IAEC,SAAA,oBACCF,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+BAAA,EACb,QAAA,EAAA;AAAA,sBAAAN,cAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,aAAA,EAAY,MAAA;AAAA,UACZ,SAAA,EAAU,2EAAA;AAAA,UACV,OAAO,EAAE,eAAA,EAAiB,YAAA,CAAa,MAAA,CAAO,MAAM,CAAA;AAAE;AAAA,OACxD;AAAA,MACC,QAAQ,MAAA,GAAS,CAAA,oBAChBM,eAAA,CAAC,MAAA,EAAA,EAAK,WAAU,mBAAA,EACd,QAAA,EAAA;AAAA,wBAAAN,cAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,YAAA,EAAW,cAAA;AAAA,YACX,KAAA,EAAO,MAAA;AAAA,YACP,UAAU,CAAC,CAAA,KAAM,kBAAA,CAAmB,CAAA,CAAE,OAAO,KAA0B,CAAA;AAAA,YACvE,SAAA,EAAU,oKAAA;AAAA,YAET,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,CAAA,qBACZA,cAAA,CAAC,QAAA,EAAA,EAAe,KAAA,EAAO,CAAA,EACpB,QAAA,EAAA,CAAA,CAAE,WAAA,EAAY,EAAA,EADJ,CAEb,CACD;AAAA;AAAA,SACH;AAAA,wBACAA,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAY,MAAA;AAAA,YACZ,SAAA,EAAU,kGAAA;AAAA,YACV,KAAA,EAAM,IAAA;AAAA,YACN,MAAA,EAAO,IAAA;AAAA,YACP,OAAA,EAAQ,WAAA;AAAA,YACR,IAAA,EAAK,MAAA;AAAA,YAEL,QAAA,kBAAAA,cAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,cAAA,EAAe,MAAA,EAAO,cAAA,EAAe,WAAA,EAAY,GAAA,EAAI,aAAA,EAAc,OAAA,EAAQ,cAAA,EAAe,OAAA,EAAQ;AAAA;AAAA;AAC5G,OAAA,EACF,CAAA;AAAA,sBAEFA,cAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,YAAA,EAAW,aAAA;AAAA,UACX,KAAA,EAAO,UAAA;AAAA,UACP,UAAU,CAAC,CAAA,KAAM,iBAAA,CAAkB,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,UACjD,MAAA,EAAQ,MAAM,QAAA,CAAS,IAAI,CAAA;AAAA,UAC3B,SAAA,EAAU;AAAA;AAAA;AACZ,KAAA,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ","file":"chunk-MYN5LDMO.cjs","sourcesContent":["\"use client\";\nimport React, { useCallback, useMemo, useRef, useState } from \"react\";\nimport { ColorPicker as RBColorPicker, Color } from \"react-beautiful-color\";\nimport { cn } from \"../../lib/cn\";\n\n// `react-beautiful-color` doesn't re-export these types from its entry, so\n// derive them from the values its API does expose.\ntype Hsva = ReturnType<Color[\"getHsva\"]>;\ntype ColorInput = ConstructorParameters<typeof Color>[0] & { type: string };\n\nexport type ColorPickerFormat = \"hex\" | \"rgb\" | \"rgba\" | \"hsl\" | \"hsla\";\n\nexport interface ColorPickerProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Initial color (uncontrolled). Any hex string, e.g. `\"#3641f5\"`. */\n  defaultValue?: string;\n  /** Format selected on first render. Default: `\"hex\"`. */\n  defaultFormat?: ColorPickerFormat;\n  /** Formats offered in the switcher. Default: all five. */\n  formats?: ColorPickerFormat[];\n  /** Render the value input + format switcher. Default: `true`. */\n  showInput?: boolean;\n  /** Show the native eye-dropper button (browser support varies). */\n  withEyeDropper?: boolean;\n  /** Optional label rendered above the picker. */\n  label?: string;\n  /** Fires on every change with the formatted string and the `Color` instance. */\n  onChange?: (value: string, color: Color) => void;\n}\n\nconst ALL_FORMATS: ColorPickerFormat[] = [\"hex\", \"rgb\", \"rgba\", \"hsl\", \"hsla\"];\n\n/** Parse the text in the input back into a `ColorInput`, or `null` if invalid. */\nfunction parseValue(text: string, format: ColorPickerFormat): ColorInput | null {\n  const t = text.trim();\n  if (format === \"hex\") {\n    return /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t)\n      ? { type: \"hex\", value: t }\n      : null;\n  }\n  const n = t.match(/-?\\d*\\.?\\d+/g)?.map(Number) ?? [];\n  if (format === \"rgb\" && n.length >= 3) return { type: \"rgb\", r: n[0], g: n[1], b: n[2] };\n  if (format === \"rgba\" && n.length >= 4)\n    return { type: \"rgba\", r: n[0], g: n[1], b: n[2], a: n[3] };\n  if (format === \"hsl\" && n.length >= 3) return { type: \"hsl\", h: n[0], s: n[1], l: n[2] };\n  if (format === \"hsla\" && n.length >= 4)\n    return { type: \"hsla\", h: n[0], s: n[1], l: n[2], a: n[3] };\n  return null;\n}\n\n/** Format a `Color` into the requested CSS string. */\nfunction colorToString(color: Color, format: ColorPickerFormat): string {\n  switch (format) {\n    case \"hex\": {\n      const { r, g, b } = color.getRgb();\n      const a = color.getRgba().a;\n      const hex = `#${[r, g, b].map((v) => Math.round(v).toString(16).padStart(2, \"0\")).join(\"\")}`;\n      return a < 1\n        ? `${hex}${Math.round(a * 255).toString(16).padStart(2, \"0\")}`\n        : hex;\n    }\n    case \"rgb\": {\n      const { r, g, b } = color.getRgb();\n      return `rgb(${r}, ${g}, ${b})`;\n    }\n    case \"rgba\": {\n      const { r, g, b, a } = color.getRgba();\n      return `rgba(${r}, ${g}, ${b}, ${a})`;\n    }\n    case \"hsl\": {\n      const { h, s, l } = color.getHsl();\n      return `hsl(${h}, ${s}%, ${l}%)`;\n    }\n    case \"hsla\": {\n      const { h, s, l, a } = color.getHsla();\n      return `hsla(${h}, ${s}%, ${l}%, ${a})`;\n    }\n    default:\n      return color.getHex();\n  }\n}\n\nconst pipetteIcon = (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n    <path\n      d=\"M19.5 3.5a2.12 2.12 0 0 0-3 0l-2.3 2.3-1-1-1.4 1.4 1 1L4 14.9V19h4.1l7.7-7.7 1 1 1.4-1.4-1-1 2.3-2.3a2.12 2.12 0 0 0 0-3ZM7.3 17.6H6v-1.3l6.6-6.6 1.3 1.3-6.6 6.6Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n\nexport const ColorPicker: React.FC<ColorPickerProps> = ({\n  defaultValue = \"#3641f5\",\n  defaultFormat = \"hex\",\n  formats = ALL_FORMATS,\n  showInput = true,\n  withEyeDropper = false,\n  label,\n  onChange,\n  className,\n  ...rest\n}) => {\n  // Internal state lives in full-fidelity HSVA — the picker's native space.\n  // Feeding anything lossier (e.g. hex) back into the controlled picker makes\n  // the knobs fight the cursor (hue/alpha collapse on round-trip), which is\n  // why drag would freeze or snap.\n  const [hsva, setHsva] = useState<Hsva>(() =>\n    new Color({ type: \"hex\", value: defaultValue }).getHsva()\n  );\n  const [format, setFormat] = useState<ColorPickerFormat>(defaultFormat);\n  // While the input is focused we keep a raw draft so partial/invalid typing\n  // isn't clobbered by the normalized value.\n  const [draft, setDraft] = useState<string | null>(null);\n  // HSVA is integer-quantized, so we keep the user's exact text (defaultValue\n  // or typed) and show it verbatim until the picker actually changes color.\n  const [exact, setExact] = useState<{ format: ColorPickerFormat; value: string } | null>(\n    () => ({ format: \"hex\", value: defaultValue })\n  );\n\n  const colorInput = useMemo(() => ({ type: \"hsva\" as const, ...hsva }), [hsva]);\n  const currentColor = useMemo(() => new Color(colorInput), [colorInput]);\n  const display =\n    exact && exact.format === format ? exact.value : colorToString(currentColor, format);\n  const inputValue = draft ?? display;\n\n  // The picker's internal drag layer unbinds its document listeners whenever\n  // the `onChange` identity changes (its cleanup effect depends on it), which\n  // would kill an in-flight drag after the first tick. Keep the handler\n  // identity-stable and read mutable values through refs.\n  const hsvaRef = useRef(hsva);\n  hsvaRef.current = hsva;\n  const formatRef = useRef(format);\n  formatRef.current = format;\n  const onChangeRef = useRef(onChange);\n  onChangeRef.current = onChange;\n\n  const handlePickerChange = useCallback((next: Color) => {\n    const nv = next.getHsva();\n    const cur = hsvaRef.current;\n    // The picker re-emits the current color on mount; ignore no-op changes so\n    // the exact defaultValue isn't clobbered.\n    if (nv.h === cur.h && nv.s === cur.s && nv.v === cur.v && nv.a === cur.a) return;\n    setHsva(nv);\n    setExact(null);\n    setDraft(null);\n    onChangeRef.current?.(colorToString(next, formatRef.current), next);\n  }, []);\n\n  const handleFormatChange = (f: ColorPickerFormat) => {\n    setFormat(f);\n    setDraft(null);\n    onChange?.(\n      exact && exact.format === f ? exact.value : colorToString(currentColor, f),\n      currentColor\n    );\n  };\n\n  const handleInputChange = (text: string) => {\n    setDraft(text);\n    const parsed = parseValue(text, format);\n    if (parsed) {\n      const c = new Color(parsed);\n      setHsva(c.getHsva());\n      setExact({ format, value: text.trim() });\n      onChange?.(text.trim(), c);\n    }\n  };\n\n  return (\n    <div className={cn(\"w-full max-w-xs\", className)} {...rest}>\n      {label && (\n        <span className=\"mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400\">\n          {label}\n        </span>\n      )}\n      <RBColorPicker\n        color={colorInput}\n        onChange={handlePickerChange}\n        className=\"h-auto w-full rounded-2xl border border-gray-200 bg-white p-3 shadow-none dark:border-gray-800 dark:bg-white/[0.03]\"\n      >\n        {/* no overflow-hidden here: it would clip the drag knobs (24px) beyond\n            the track bounds, shrinking their visible/grabbable area */}\n        <RBColorPicker.Saturation className=\"mb-4 h-40 rounded-lg\" />\n        <div className=\"flex items-center gap-3\">\n          {withEyeDropper && (\n            <RBColorPicker.EyeDropper className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-white/[0.03]\">\n              {pipetteIcon}\n            </RBColorPicker.EyeDropper>\n          )}\n          <div className=\"flex flex-1 flex-col gap-3\">\n            <RBColorPicker.Hue className=\"h-4\" />\n            <RBColorPicker.Alpha className=\"h-4\" />\n          </div>\n        </div>\n      </RBColorPicker>\n\n      {showInput && (\n        <div className=\"mt-3 flex items-stretch gap-2\">\n          <span\n            aria-hidden=\"true\"\n            className=\"h-11 w-11 shrink-0 rounded-lg border border-gray-200 dark:border-gray-700\"\n            style={{ backgroundColor: currentColor.format(\"rgba\") }}\n          />\n          {formats.length > 1 && (\n            <span className=\"relative shrink-0\">\n              <select\n                aria-label=\"Color format\"\n                value={format}\n                onChange={(e) => handleFormatChange(e.target.value as ColorPickerFormat)}\n                className=\"h-11 appearance-none rounded-lg border border-gray-300 bg-transparent pl-3 pr-8 text-sm text-gray-700 focus:outline-hidden dark:border-gray-700 dark:text-gray-300\"\n              >\n                {formats.map((f) => (\n                  <option key={f} value={f}>\n                    {f.toUpperCase()}\n                  </option>\n                ))}\n              </select>\n              <svg\n                aria-hidden=\"true\"\n                className=\"pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400\"\n                width=\"14\"\n                height=\"14\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n              >\n                <path d=\"m6 9 6 6 6-6\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              </svg>\n            </span>\n          )}\n          <input\n            aria-label=\"Color value\"\n            value={inputValue}\n            onChange={(e) => handleInputChange(e.target.value)}\n            onBlur={() => setDraft(null)}\n            className=\"h-11 w-full rounded-lg border border-gray-300 bg-transparent px-3 text-sm text-gray-800 focus:outline-hidden dark:border-gray-700 dark:text-white/90\"\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"]}

package/dist/{chunk-MEU4PMP5.js → chunk-NWIOJGF7.js}

@@ -6,7 +6,15 @@ var defaultOptions = {
   legend: {
     show: false,
     position: "top",
-    horizontalAlign: "left"
+    horizontalAlign: "left",
+    // Rounded, border-less swatches (visible when the legend is enabled).
+    // ApexCharts sets the marker span's `color` to the series color, so
+    // `currentColor` picks it up; `customHTML` rounds the corners.
+    markers: {
+      size: 7,
+      strokeWidth: 0,
+      customHTML: () => '<span style="display:block;height:100%;width:100%;border-radius:3px;background:currentColor"></span>'
+    }
   },
   colors: ["#465FFF", "#9CB9FF"],
   chart: {
@@ -142,5 +150,5 @@ var LineChart = ({
 };
 
 export { LineChart };
-//# sourceMappingURL=chunk-MEU4PMP5.js.map
-//# sourceMappingURL=chunk-MEU4PMP5.js.map
+//# sourceMappingURL=chunk-NWIOJGF7.js.map
+//# sourceMappingURL=chunk-NWIOJGF7.js.map

package/dist/chunk-NWIOJGF7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Charts/LineChart.tsx"],"names":[],"mappings":"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","file":"chunk-NWIOJGF7.js","sourcesContent":["\"use client\";\nimport React from \"react\";\nimport Chart from \"react-apexcharts\";\nimport type { ApexOptions } from \"apexcharts\";\n\nexport interface LineChartProps {\n  series?: ApexAxisChartSeries;\n  categories?: string[];\n  colors?: string[];\n  height?: number;\n  options?: ApexOptions;\n}\n\nconst defaultOptions: ApexOptions = {\n  legend: {\n    show: false,\n    position: \"top\",\n    horizontalAlign: \"left\",\n    // Rounded, border-less swatches (visible when the legend is enabled).\n    // ApexCharts sets the marker span's `color` to the series color, so\n    // `currentColor` picks it up; `customHTML` rounds the corners.\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  colors: [\"#465FFF\", \"#9CB9FF\"],\n  chart: {\n    fontFamily: \"Outfit, sans-serif\",\n    height: 310,\n    type: \"line\",\n    toolbar: {\n      show: false,\n    },\n  },\n  stroke: {\n    curve: \"straight\",\n    width: [2, 2],\n  },\n  fill: {\n    type: \"gradient\",\n    gradient: {\n      opacityFrom: 0.55,\n      opacityTo: 0,\n    },\n  },\n  markers: {\n    size: 0,\n    strokeColors: \"#fff\",\n    strokeWidth: 2,\n    hover: {\n      size: 6,\n    },\n  },\n  grid: {\n    xaxis: {\n      lines: {\n        show: false,\n      },\n    },\n    yaxis: {\n      lines: {\n        show: true,\n      },\n    },\n  },\n  dataLabels: {\n    enabled: false,\n  },\n  tooltip: {\n    enabled: true,\n    x: {\n      format: \"dd MMM yyyy\",\n    },\n  },\n  xaxis: {\n    type: \"category\",\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    tooltip: {\n      enabled: false,\n    },\n  },\n  yaxis: {\n    labels: {\n      style: {\n        fontSize: \"12px\",\n        colors: [\"#6B7280\"],\n      },\n    },\n    title: {\n      text: \"\",\n      style: {\n        fontSize: \"0px\",\n      },\n    },\n  },\n};\n\nconst defaultSeries: ApexAxisChartSeries = [\n  {\n    name: \"Sales\",\n    data: [180, 190, 170, 160, 175, 165, 170, 205, 230, 210, 240, 235],\n  },\n  {\n    name: \"Revenue\",\n    data: [40, 30, 50, 40, 55, 40, 70, 100, 110, 120, 150, 140],\n  },\n];\n\nexport const LineChart: React.FC<LineChartProps> = ({\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=\"area\"\n      height={height ?? 310}\n    />\n  );\n};\n"]}

package/dist/{chunk-AGRX5ZR6.js → chunk-P7LI2FSR.js}

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from './chunk-ZLIYUUA4.js';
-import { useState, useMemo } from 'react';
-import { useColorState, Color, ColorPicker as ColorPicker$1 } from 'react-beautiful-color';
+import { useState, useMemo, useRef, useCallback } from 'react';
+import { Color, ColorPicker as ColorPicker$1 } from 'react-beautiful-color';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var ALL_FORMATS = ["hex", "rgb", "rgba", "hsl", "hsla"];
@@ -19,38 +19,32 @@ function parseValue(text, format) {
     return { type: "hsla", h: n[0], s: n[1], l: n[2], a: n[3] };
   return null;
 }
-function inputToString(input) {
-  switch (input.type) {
-    case "hex":
-      return input.value;
-    case "rgb":
-      return `rgb(${input.r}, ${input.g}, ${input.b})`;
-    case "rgba":
-      return `rgba(${input.r}, ${input.g}, ${input.b}, ${input.a})`;
-    case "hsl":
-      return `hsl(${input.h}, ${input.s}%, ${input.l}%)`;
-    case "hsla":
-      return `hsla(${input.h}, ${input.s}%, ${input.l}%, ${input.a})`;
-    case "hsv":
-      return `hsv(${input.h}, ${input.s}%, ${input.v}%)`;
-    case "hsva":
-      return `hsva(${input.h}, ${input.s}%, ${input.v}%, ${input.a})`;
-  }
-}
-function stateToString(state, format) {
+function colorToString(color, format) {
   switch (format) {
-    case "hex":
-      return state.hex;
-    case "rgb":
-      return `rgb(${state.rgb.r}, ${state.rgb.g}, ${state.rgb.b})`;
-    case "rgba":
-      return `rgba(${state.rgba.r}, ${state.rgba.g}, ${state.rgba.b}, ${state.rgba.a})`;
-    case "hsl":
-      return `hsl(${state.hsl.h}, ${state.hsl.s}%, ${state.hsl.l}%)`;
-    case "hsla":
-      return `hsla(${state.hsla.h}, ${state.hsla.s}%, ${state.hsla.l}%, ${state.hsla.a})`;
+    case "hex": {
+      const { r, g, b } = color.getRgb();
+      const a = color.getRgba().a;
+      const hex = `#${[r, g, b].map((v) => Math.round(v).toString(16).padStart(2, "0")).join("")}`;
+      return a < 1 ? `${hex}${Math.round(a * 255).toString(16).padStart(2, "0")}` : hex;
+    }
+    case "rgb": {
+      const { r, g, b } = color.getRgb();
+      return `rgb(${r}, ${g}, ${b})`;
+    }
+    case "rgba": {
+      const { r, g, b, a } = color.getRgba();
+      return `rgba(${r}, ${g}, ${b}, ${a})`;
+    }
+    case "hsl": {
+      const { h, s, l } = color.getHsl();
+      return `hsl(${h}, ${s}%, ${l}%)`;
+    }
+    case "hsla": {
+      const { h, s, l, a } = color.getHsla();
+      return `hsla(${h}, ${s}%, ${l}%, ${a})`;
+    }
     default:
-      return state.hex;
+      return color.getHex();
   }
 }
 var pipetteIcon = /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
@@ -71,32 +65,50 @@ var ColorPicker = ({
   className,
   ...rest
 }) => {
-  const [{ colorInput, colorState }, setColor] = useColorState({
-    type: "hex",
-    value: defaultValue
-  });
+  const [hsva, setHsva] = useState(
+    () => new Color({ type: "hex", value: defaultValue }).getHsva()
+  );
   const [format, setFormat] = useState(defaultFormat);
   const [draft, setDraft] = useState(null);
+  const [exact, setExact] = useState(
+    () => ({ format: "hex", value: defaultValue })
+  );
+  const colorInput = useMemo(() => ({ type: "hsva", ...hsva }), [hsva]);
   const currentColor = useMemo(() => new Color(colorInput), [colorInput]);
-  const display = colorInput.type === format ? inputToString(colorInput) : stateToString(colorState, format);
+  const display = exact && exact.format === format ? exact.value : colorToString(currentColor, format);
   const inputValue = draft ?? display;
-  const apply = (input) => {
-    setColor(input);
-    onChange?.(inputToString(input), new Color(input));
-  };
-  const handlePickerChange = (next) => {
-    setColor(next);
-    onChange?.(next.format(format), next);
-  };
+  const hsvaRef = useRef(hsva);
+  hsvaRef.current = hsva;
+  const formatRef = useRef(format);
+  formatRef.current = format;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const handlePickerChange = useCallback((next) => {
+    const nv = next.getHsva();
+    const cur = hsvaRef.current;
+    if (nv.h === cur.h && nv.s === cur.s && nv.v === cur.v && nv.a === cur.a) return;
+    setHsva(nv);
+    setExact(null);
+    setDraft(null);
+    onChangeRef.current?.(colorToString(next, formatRef.current), next);
+  }, []);
   const handleFormatChange = (f) => {
     setFormat(f);
     setDraft(null);
-    onChange?.(stateToString(colorState, f), currentColor);
+    onChange?.(
+      exact && exact.format === f ? exact.value : colorToString(currentColor, f),
+      currentColor
+    );
   };
   const handleInputChange = (text) => {
     setDraft(text);
     const parsed = parseValue(text, format);
-    if (parsed) apply(parsed);
+    if (parsed) {
+      const c = new Color(parsed);
+      setHsva(c.getHsva());
+      setExact({ format, value: text.trim() });
+      onChange?.(text.trim(), c);
+    }
   };
   return /* @__PURE__ */ jsxs("div", { className: cn("w-full max-w-xs", className), ...rest, children: [
     label && /* @__PURE__ */ jsx("span", { className: "mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400", children: label }),
@@ -105,14 +117,14 @@ var ColorPicker = ({
       {
         color: colorInput,
         onChange: handlePickerChange,
-        className: "rounded-2xl border border-gray-200 bg-white p-3 dark:border-gray-800 dark:bg-white/[0.03]",
+        className: "h-auto w-full rounded-2xl border border-gray-200 bg-white p-3 shadow-none dark:border-gray-800 dark:bg-white/[0.03]",
         children: [
-          /* @__PURE__ */ jsx(ColorPicker$1.Saturation, { className: "mb-3 h-40 overflow-hidden rounded-lg" }),
+          /* @__PURE__ */ jsx(ColorPicker$1.Saturation, { className: "mb-4 h-40 rounded-lg" }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
             withEyeDropper && /* @__PURE__ */ jsx(ColorPicker$1.EyeDropper, { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-white/[0.03]", children: pipetteIcon }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-2", children: [
-              /* @__PURE__ */ jsx(ColorPicker$1.Hue, { className: "h-3 overflow-hidden rounded-full" }),
-              /* @__PURE__ */ jsx(ColorPicker$1.Alpha, { className: "h-3 overflow-hidden rounded-full" })
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-3", children: [
+              /* @__PURE__ */ jsx(ColorPicker$1.Hue, { className: "h-4" }),
+              /* @__PURE__ */ jsx(ColorPicker$1.Alpha, { className: "h-4" })
             ] })
           ] })
         ]
@@ -127,16 +139,30 @@ var ColorPicker = ({
           style: { backgroundColor: currentColor.format("rgba") }
         }
       ),
-      formats.length > 1 && /* @__PURE__ */ jsx(
-        "select",
-        {
-          "aria-label": "Color format",
-          value: format,
-          onChange: (e) => handleFormatChange(e.target.value),
-          className: "h-11 shrink-0 rounded-lg border border-gray-300 bg-transparent px-2 text-sm text-gray-700 focus:outline-hidden dark:border-gray-700 dark:text-gray-300",
-          children: formats.map((f) => /* @__PURE__ */ jsx("option", { value: f, children: f.toUpperCase() }, f))
-        }
-      ),
+      formats.length > 1 && /* @__PURE__ */ jsxs("span", { className: "relative shrink-0", children: [
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            "aria-label": "Color format",
+            value: format,
+            onChange: (e) => handleFormatChange(e.target.value),
+            className: "h-11 appearance-none rounded-lg border border-gray-300 bg-transparent pl-3 pr-8 text-sm text-gray-700 focus:outline-hidden dark:border-gray-700 dark:text-gray-300",
+            children: formats.map((f) => /* @__PURE__ */ jsx("option", { value: f, children: f.toUpperCase() }, f))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400",
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -152,5 +178,5 @@ var ColorPicker = ({
 };
 
 export { ColorPicker };
-//# sourceMappingURL=chunk-AGRX5ZR6.js.map
-//# sourceMappingURL=chunk-AGRX5ZR6.js.map
+//# sourceMappingURL=chunk-P7LI2FSR.js.map
+//# sourceMappingURL=chunk-P7LI2FSR.js.map