@andreagiugni/tailwind-dashboard-ui 0.5.0 → 0.5.1

package/dist/chunk-P7LI2FSR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorPicker/ColorPicker.tsx"],"names":["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,mBACJ,GAAA,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,kBAAA,GAAA;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,GAAI,QAAA;AAAA,IAAe,MACrC,IAAI,KAAA,CAAM,EAAE,IAAA,EAAM,OAAO,KAAA,EAAO,YAAA,EAAc,CAAA,CAAE,OAAA;AAAQ,GAC1D;AACA,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAA4B,aAAa,CAAA;AAGrE,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAwB,IAAI,CAAA;AAGtD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,QAAA;AAAA,IACxB,OAAO,EAAE,MAAA,EAAQ,KAAA,EAAO,OAAO,YAAA,EAAa;AAAA,GAC9C;AAEA,EAAA,MAAM,UAAA,GAAa,OAAA,CAAQ,OAAO,EAAE,IAAA,EAAM,MAAA,EAAiB,GAAG,IAAA,EAAK,CAAA,EAAI,CAAC,IAAI,CAAC,CAAA;AAC7E,EAAA,MAAM,YAAA,GAAe,QAAQ,MAAM,IAAI,MAAM,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,GAAU,OAAO,IAAI,CAAA;AAC3B,EAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAClB,EAAA,MAAM,SAAA,GAAY,OAAO,MAAM,CAAA;AAC/B,EAAA,SAAA,CAAU,OAAA,GAAU,MAAA;AACpB,EAAA,MAAM,WAAA,GAAc,OAAO,QAAQ,CAAA;AACnC,EAAA,WAAA,CAAY,OAAA,GAAU,QAAA;AAEtB,EAAA,MAAM,kBAAA,GAAqB,WAAA,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,IAAI,KAAA,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,uBACE,IAAA,CAAC,SAAI,SAAA,EAAW,EAAA,CAAG,mBAAmB,SAAS,CAAA,EAAI,GAAG,IAAA,EACnD,QAAA,EAAA;AAAA,IAAA,KAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mEAAA,EACb,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,oBAEF,IAAA;AAAA,MAACA,aAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,UAAA;AAAA,QACP,QAAA,EAAU,kBAAA;AAAA,QACV,SAAA,EAAU,qHAAA;AAAA,QAIV,QAAA,EAAA;AAAA,0BAAA,GAAA,CAACA,aAAA,CAAc,UAAA,EAAd,EAAyB,SAAA,EAAU,sBAAA,EAAuB,CAAA;AAAA,0BAC3D,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACZ,QAAA,EAAA;AAAA,YAAA,cAAA,wBACEA,aAAA,CAAc,UAAA,EAAd,EAAyB,SAAA,EAAU,yLACjC,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,4BAEF,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4BAAA,EACb,QAAA,EAAA;AAAA,8BAAA,GAAA,CAACA,aAAA,CAAc,GAAA,EAAd,EAAkB,SAAA,EAAU,KAAA,EAAM,CAAA;AAAA,8BACnC,GAAA,CAACA,aAAA,CAAc,KAAA,EAAd,EAAoB,WAAU,KAAA,EAAM;AAAA,aAAA,EACvC;AAAA,WAAA,EACF;AAAA;AAAA;AAAA,KACF;AAAA,IAEC,SAAA,oBACC,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+BAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA;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,oBAChB,IAAA,CAAC,MAAA,EAAA,EAAK,WAAU,mBAAA,EACd,QAAA,EAAA;AAAA,wBAAA,GAAA;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,qBACZ,GAAA,CAAC,QAAA,EAAA,EAAe,KAAA,EAAO,CAAA,EACpB,QAAA,EAAA,CAAA,CAAE,WAAA,EAAY,EAAA,EADJ,CAEb,CACD;AAAA;AAAA,SACH;AAAA,wBACA,GAAA;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,kBAAA,GAAA,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,sBAEF,GAAA;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-P7LI2FSR.js","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-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

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

package/dist/components/ColorPicker/ColorPicker.js

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

package/dist/index.cjs

@@ -1,12 +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 chunk3T6AZMUZ_cjs = require('./chunk-3T6AZMUZ.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');
@@ -2464,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"
   };
@@ -3136,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,
@@ -3160,7 +3161,7 @@ Object.defineProperty(exports, "Editor", {
 });
 Object.defineProperty(exports, "ColorPicker", {
   enumerable: true,
-  get: function () { return chunk3T6AZMUZ_cjs.ColorPicker; }
+  get: function () { return chunkMYN5LDMO_cjs.ColorPicker; }
 });
 Object.defineProperty(exports, "cn", {
   enumerable: true,