@puzzle-ui/ui 0.2.0 → 0.4.0

package/dist/components/forms/color-picker/color-picker.css

@@ -0,0 +1,351 @@
+.puzzle-color-picker {
+  gap: var(--puzzle-space-1, .25rem);
+  min-width: 0;
+  color: var(--puzzle-color-text);
+  flex-direction: column;
+  font-family: inherit;
+  display: inline-flex;
+}
+
+.puzzle-color-picker__label {
+  color: var(--puzzle-color-text);
+  font-size: var(--puzzle-font-size-sm, .875rem);
+  font-weight: var(--puzzle-font-weight-medium, 500);
+}
+
+.puzzle-color-picker__description {
+  color: var(--puzzle-color-text-muted);
+  font-size: var(--puzzle-font-size-xs, .75rem);
+}
+
+.puzzle-color-picker__trigger {
+  box-sizing: border-box;
+  align-items: center;
+  gap: var(--puzzle-space-2, .5rem);
+  width: 100%;
+  min-height: 2.5rem;
+  padding: var(--puzzle-space-2, .5rem) var(--puzzle-space-3, .75rem);
+  border: 1px solid var(--puzzle-color-border);
+  border-radius: var(--puzzle-radius-md, .5rem);
+  color: var(--puzzle-color-text);
+  background: var(--puzzle-color-surface);
+  font: inherit;
+  font-size: var(--puzzle-font-size-sm, .875rem);
+  text-align: start;
+  cursor: pointer;
+  transition: border-color var(--puzzle-duration-fast, .15s) ease,
+        background-color var(--puzzle-duration-fast, .15s) ease;
+  display: inline-flex;
+}
+
+.puzzle-color-picker__trigger:hover:not(:disabled) {
+  border-color: var(--puzzle-color-primary);
+}
+
+.puzzle-color-picker__trigger:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: 2px;
+}
+
+.puzzle-color-picker__trigger:disabled {
+  opacity: .5;
+  cursor: not-allowed;
+}
+
+.puzzle-color-picker__trigger-swatch {
+  border: 1px solid var(--puzzle-color-border);
+  border-radius: var(--puzzle-radius-sm, .25rem);
+  flex: 0 0 1.25rem;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.puzzle-color-picker__trigger-value {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.puzzle-color-picker__trigger-chevron {
+  color: var(--puzzle-color-text-muted);
+}
+
+.puzzle-color-picker__popover {
+  width: 17rem;
+  max-width: calc(100vw - 1rem);
+  padding: var(--puzzle-space-3, .75rem);
+}
+
+.puzzle-color-picker__panel {
+  gap: var(--puzzle-space-3, .75rem);
+  min-width: 0;
+  color: var(--puzzle-color-text);
+  font-size: var(--puzzle-font-size-sm, .875rem);
+  flex-direction: column;
+  display: flex;
+}
+
+.puzzle-color-picker__area {
+  border-radius: var(--puzzle-radius-md, .5rem);
+  background: var(--puzzle-color-picker-hue);
+  cursor: crosshair;
+  touch-action: none;
+  user-select: none;
+  width: 100%;
+  height: 10rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.puzzle-color-picker__area-saturation {
+  background: linear-gradient(to right, #fff, #0000);
+  position: absolute;
+  inset: 0;
+}
+
+.puzzle-color-picker__area-brightness {
+  background: linear-gradient(to top, #000, #0000);
+  position: absolute;
+  inset: 0;
+}
+
+.puzzle-color-picker__area-indicator {
+  z-index: 1;
+  pointer-events: none;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  width: .875rem;
+  height: .875rem;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 0 0 1px #00000073;
+}
+
+.puzzle-color-picker__area:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: 3px;
+}
+
+.puzzle-color-picker__sliders {
+  gap: var(--puzzle-space-2, .5rem);
+  flex-direction: column;
+  display: flex;
+}
+
+.puzzle-color-picker__slider-row {
+  align-items: center;
+  gap: var(--puzzle-space-3, .75rem);
+  color: var(--puzzle-color-text-muted);
+  font-size: var(--puzzle-font-size-xs, .75rem);
+  display: flex;
+}
+
+.puzzle-color-picker__slider-row span {
+  flex: 0 0 3.5rem;
+}
+
+.puzzle-color-picker__slider-row input {
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  border: 0;
+  border-radius: 999px;
+  flex: 1;
+  min-width: 0;
+  height: 1rem;
+  margin: 0;
+}
+
+.puzzle-color-picker__slider-row input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  background: var(--puzzle-color-text);
+  border: 2px solid #fff;
+  border-radius: 50%;
+  width: .875rem;
+  height: .875rem;
+  box-shadow: 0 0 0 1px #00000059;
+}
+
+.puzzle-color-picker__slider-row input::-moz-range-thumb {
+  background: var(--puzzle-color-text);
+  border: 2px solid #fff;
+  border-radius: 50%;
+  width: .75rem;
+  height: .75rem;
+  box-shadow: 0 0 0 1px #00000059;
+}
+
+.puzzle-color-picker__slider-row input:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: 3px;
+}
+
+.puzzle-color-picker__hue-slider {
+  background: linear-gradient(to right, red, #ff0, #0f0, #0ff, #00f, #f0f, red);
+}
+
+.puzzle-color-picker__opacity-slider {
+  background-color: #fff;
+  background-image: linear-gradient(to right, transparent, var(--puzzle-color-picker-hue)),
+        conic-gradient(#ccc 25%, #fff 0 50%, #ccc 0 75%, #fff 0);
+  background-size: 100% 100%, .5rem .5rem;
+}
+
+.puzzle-color-picker__input-section {
+  gap: var(--puzzle-space-2, .5rem);
+  padding-top: var(--puzzle-space-3, .75rem);
+  border-top: 1px solid var(--puzzle-color-border);
+  flex-direction: column;
+  display: flex;
+}
+
+.puzzle-color-picker__input-label, .puzzle-color-picker__section-label {
+  color: var(--puzzle-color-text-muted);
+  font-size: var(--puzzle-font-size-xs, .75rem);
+  font-weight: var(--puzzle-font-weight-medium, 500);
+}
+
+.puzzle-color-picker__input-row {
+  gap: var(--puzzle-space-2, .5rem);
+  display: flex;
+}
+
+.puzzle-color-picker__input-row input {
+  box-sizing: border-box;
+  min-width: 0;
+  height: 2.25rem;
+  padding-inline: var(--puzzle-space-2, .5rem);
+  border: 1px solid var(--puzzle-color-border);
+  border-radius: var(--puzzle-radius-sm, .25rem);
+  color: var(--puzzle-color-text);
+  background: var(--puzzle-color-surface);
+  font-family: monospace;
+  font-size: var(--puzzle-font-size-sm, .875rem);
+  flex: 1;
+}
+
+.puzzle-color-picker__input-row input:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: 2px;
+}
+
+.puzzle-color-picker__input-row input[aria-invalid="true"] {
+  border-color: var(--puzzle-color-danger);
+}
+
+.puzzle-color-picker__apply {
+  padding-inline: var(--puzzle-space-3, .75rem);
+  border: 1px solid var(--puzzle-color-border);
+  border-radius: var(--puzzle-radius-sm, .25rem);
+  color: var(--puzzle-color-text);
+  background: var(--puzzle-color-surface);
+  font: inherit;
+  font-size: var(--puzzle-font-size-xs, .75rem);
+  cursor: pointer;
+}
+
+.puzzle-color-picker__apply:hover {
+  background: var(--puzzle-color-surface-secondary, var(--puzzle-color-border));
+}
+
+.puzzle-color-picker__apply:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: 2px;
+}
+
+.puzzle-color-picker__error {
+  color: var(--puzzle-color-danger);
+  font-size: var(--puzzle-font-size-xs, .75rem);
+  margin: 0;
+}
+
+.puzzle-color-picker__swatches-section {
+  gap: var(--puzzle-space-2, .5rem);
+  padding-top: var(--puzzle-space-3, .75rem);
+  border-top: 1px solid var(--puzzle-color-border);
+  flex-direction: column;
+  display: flex;
+}
+
+.puzzle-color-picker__swatches {
+  gap: var(--puzzle-space-2, .5rem);
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+  display: grid;
+}
+
+.puzzle-color-picker__swatch {
+  box-sizing: border-box;
+  aspect-ratio: 1;
+  border-radius: var(--puzzle-radius-sm, .25rem);
+  cursor: pointer;
+  width: 100%;
+  transition: outline-color var(--puzzle-duration-fast, .15s) ease,
+        transform var(--puzzle-duration-fast, .15s) ease;
+  border: 1px solid #0000001f;
+  padding: 0;
+  position: relative;
+}
+
+.puzzle-color-picker__swatch:hover {
+  transform: scale(1.08);
+}
+
+.puzzle-color-picker__swatch:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: 2px;
+}
+
+.puzzle-color-picker__swatch[data-selected="true"]:after {
+  border: 2px solid var(--puzzle-color-primary);
+  border-radius: calc(var(--puzzle-radius-sm, .25rem) + .2rem);
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  inset: -.2rem;
+}
+
+.puzzle-color-picker__clear {
+  background-color: #fff;
+  background-image: linear-gradient(45deg, #ccc 25%, #0000 25%), linear-gradient(-45deg, #ccc 25%, #0000 25%), linear-gradient(45deg, #0000 75%, #ccc 75%), linear-gradient(-45deg, #0000 75%, #ccc 75%);
+  background-position: 0 0, 0 .25rem, .25rem -.25rem, -.25rem 0;
+  background-size: .5rem .5rem;
+  overflow: hidden;
+}
+
+.puzzle-color-picker__clear span {
+  pointer-events: none;
+  background: #dc2626;
+  width: 130%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: -15%;
+  transform: rotate(-45deg);
+}
+
+.puzzle-color-picker[data-disabled="true"] {
+  opacity: .55;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-color-picker__trigger, .puzzle-color-picker__swatch {
+    transition: none;
+  }
+
+  .puzzle-color-picker__swatch:hover {
+    transform: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .puzzle-color-picker__trigger:focus-visible, .puzzle-color-picker__area:focus-visible, .puzzle-color-picker__swatch:focus-visible {
+    outline: 2px solid highlight;
+  }
+
+  .puzzle-color-picker__swatch[data-selected="true"]:after {
+    border-color: highlight;
+  }
+}

package/dist/components/forms/color-picker/color-picker.types.d.cts

@@ -0,0 +1,25 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+export type ColorPickerFormat = "hex" | "hexa" | "rgb" | "hsl";
+export type ColorPickerSwatch = string | {
+  value: string;
+  label?: string;
+};
+export type ColorPickerProps = Omit<ComponentPropsWithRef<"button">, "children" | "value" | "defaultValue" | "onChange" | "type"> & {
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string | undefined) => void;
+  label?: ReactNode;
+  description?: ReactNode;
+  placeholder?: string;
+  colors?: readonly ColorPickerSwatch[];
+  format?: ColorPickerFormat;
+  clearable?: boolean;
+  clearLabel?: string;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  position?: "top" | "right" | "bottom" | "left";
+  align?: "start" | "center" | "end";
+  rootClassName?: string;
+  popoverClassName?: string;
+};

package/dist/components/forms/color-picker/color-picker.types.d.ts

@@ -0,0 +1,25 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+export type ColorPickerFormat = "hex" | "hexa" | "rgb" | "hsl";
+export type ColorPickerSwatch = string | {
+  value: string;
+  label?: string;
+};
+export type ColorPickerProps = Omit<ComponentPropsWithRef<"button">, "children" | "value" | "defaultValue" | "onChange" | "type"> & {
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string | undefined) => void;
+  label?: ReactNode;
+  description?: ReactNode;
+  placeholder?: string;
+  colors?: readonly ColorPickerSwatch[];
+  format?: ColorPickerFormat;
+  clearable?: boolean;
+  clearLabel?: string;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  position?: "top" | "right" | "bottom" | "left";
+  align?: "start" | "center" | "end";
+  rootClassName?: string;
+  popoverClassName?: string;
+};

package/dist/components/forms/color-picker/color-picker.utils.cjs

@@ -0,0 +1,116 @@
+let _puzzle_ui_core = require("@puzzle-ui/core");
+// src/components/forms/color-picker/color-picker.utils.ts
+const DEFAULT_HSV = {
+	h: 0,
+	s: 100,
+	v: 100,
+	a: 1
+};
+const rgbToHsv = ({ r, g, b, a = 1 }) => {
+	const red = r / 255;
+	const green = g / 255;
+	const blue = b / 255;
+	const max = Math.max(red, green, blue);
+	const delta = max - Math.min(red, green, blue);
+	let h = 0;
+	if (delta !== 0) {
+		if (max === red) h = 60 * ((green - blue) / delta % 6);
+		else if (max === green) h = 60 * ((blue - red) / delta + 2);
+		else h = 60 * ((red - green) / delta + 4);
+	}
+	return {
+		h: (h + 360) % 360,
+		s: max === 0 ? 0 : delta / max * 100,
+		v: max * 100,
+		a
+	};
+};
+const hsvToRgb = ({ h, s, v, a }) => {
+	const hue = (h % 360 + 360) % 360;
+	const saturation = (0, _puzzle_ui_core.clamp)(s / 100, 0, 1);
+	const value = (0, _puzzle_ui_core.clamp)(v / 100, 0, 1);
+	const chroma = value * saturation;
+	const x = chroma * (1 - Math.abs(hue / 60 % 2 - 1));
+	const m = value - chroma;
+	let channels;
+	if (hue < 60) channels = [
+		chroma,
+		x,
+		0
+	];
+	else if (hue < 120) channels = [
+		x,
+		chroma,
+		0
+	];
+	else if (hue < 180) channels = [
+		0,
+		chroma,
+		x
+	];
+	else if (hue < 240) channels = [
+		0,
+		x,
+		chroma
+	];
+	else if (hue < 300) channels = [
+		x,
+		0,
+		chroma
+	];
+	else channels = [
+		chroma,
+		0,
+		x
+	];
+	return {
+		r: Math.round((channels[0] + m) * 255),
+		g: Math.round((channels[1] + m) * 255),
+		b: Math.round((channels[2] + m) * 255),
+		a: (0, _puzzle_ui_core.clamp)(a, 0, 1)
+	};
+};
+const rgbToFormat = (rgb, format) => {
+	switch (format) {
+		case "rgb": return (0, _puzzle_ui_core.rgbToCss)(rgb);
+		case "hsl": return (0, _puzzle_ui_core.hslToCss)((0, _puzzle_ui_core.rgbToHsl)(rgb));
+		default: return (0, _puzzle_ui_core.rgbToHex)(rgb.r, rgb.g, rgb.b, rgb.a);
+	}
+};
+const hsvToFormat = (hsv, format) => rgbToFormat(hsvToRgb(hsv), format);
+const parseColorToHsv = (color) => {
+	const rgb = (0, _puzzle_ui_core.parseColor)(color);
+	return rgb ? rgbToHsv(rgb) : null;
+};
+/**
+* Resolves a CSS color in browser context.
+* Core stays framework/browser independent.
+*/
+const resolveCssColor = (color) => {
+	if (typeof document === "undefined") return null;
+	const element = document.createElement("span");
+	element.style.color = color;
+	if (!element.style.color) return null;
+	element.style.position = "absolute";
+	element.style.visibility = "hidden";
+	document.body.appendChild(element);
+	const resolved = getComputedStyle(element).color;
+	element.remove();
+	return resolved || null;
+};
+const parseColorToHsvInBrowser = (color) => {
+	const direct = parseColorToHsv(color);
+	if (direct) return direct;
+	const resolved = resolveCssColor(color);
+	return resolved ? parseColorToHsv(resolved) : null;
+};
+exports.DEFAULT_HSV = DEFAULT_HSV;
+exports.hsvToFormat = hsvToFormat;
+exports.hsvToRgb = hsvToRgb;
+exports.parseColorToHsv = parseColorToHsv;
+exports.parseColorToHsvInBrowser = parseColorToHsvInBrowser;
+exports.resolveCssColor = resolveCssColor;
+exports.rgbToFormat = rgbToFormat;
+exports.rgbToHsv = rgbToHsv;
+
+//# sourceMappingURL=color-picker.utils.cjs.map

package/dist/components/forms/color-picker/color-picker.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.utils.cjs","names":["clamp","rgbToCss","hslToCss","rgbToHsl","rgbToHex","parseColor"],"sources":["../../../../src/components/forms/color-picker/color-picker.utils.ts"],"sourcesContent":["import {\n  clamp,\n  hslToRgb,\n  rgbToHsl,\n  parseColor,\n  rgbToHex,\n  rgbToCss,\n  hslToCss,\n  type RGBColor,\n  type HSLColor,\n} from \"@puzzle-ui/core\";\n\nimport type { ColorPickerFormat } from \"./color-picker.types\";\n\nexport type HSVColor = {\n  h: number;\n  s: number;\n  v: number;\n  a: number;\n};\n\nexport const DEFAULT_HSV: HSVColor = {\n  h: 0,\n  s: 100,\n  v: 100,\n  a: 1,\n};\n\nexport const rgbToHsv = ({ r, g, b, a = 1 }: RGBColor): HSVColor => {\n  const red = r / 255;\n  const green = g / 255;\n  const blue = b / 255;\n\n  const max = Math.max(red, green, blue);\n  const min = Math.min(red, green, blue);\n  const delta = max - min;\n\n  let h = 0;\n\n  if (delta !== 0) {\n    if (max === red) {\n      h = 60 * (((green - blue) / delta) % 6);\n    } else if (max === green) {\n      h = 60 * ((blue - red) / delta + 2);\n    } else {\n      h = 60 * ((red - green) / delta + 4);\n    }\n  }\n\n  return {\n    h: (h + 360) % 360,\n    s: max === 0 ? 0 : (delta / max) * 100,\n    v: max * 100,\n    a,\n  };\n};\n\nexport const hsvToRgb = ({ h, s, v, a }: HSVColor): RGBColor => {\n  const hue = ((h % 360) + 360) % 360;\n\n  const saturation = clamp(s / 100, 0, 1);\n  const value = clamp(v / 100, 0, 1);\n\n  const chroma = value * saturation;\n  const x = chroma * (1 - Math.abs(((hue / 60) % 2) - 1));\n  const m = value - chroma;\n\n  let channels: [number, number, number];\n\n  if (hue < 60) channels = [chroma, x, 0];\n  else if (hue < 120) channels = [x, chroma, 0];\n  else if (hue < 180) channels = [0, chroma, x];\n  else if (hue < 240) channels = [0, x, chroma];\n  else if (hue < 300) channels = [x, 0, chroma];\n  else channels = [chroma, 0, x];\n\n  return {\n    r: Math.round((channels[0] + m) * 255),\n    g: Math.round((channels[1] + m) * 255),\n    b: Math.round((channels[2] + m) * 255),\n    a: clamp(a, 0, 1),\n  };\n};\n\nexport const rgbToFormat = (\n  rgb: RGBColor,\n  format: ColorPickerFormat,\n): string => {\n  switch (format) {\n    case \"rgb\":\n      return rgbToCss(rgb);\n    case \"hsl\":\n      return hslToCss(rgbToHsl(rgb));\n    case \"hexa\":\n    case \"hex\":\n    default:\n      return rgbToHex(rgb.r, rgb.g, rgb.b, rgb.a);\n  }\n};\n\nexport const hsvToFormat = (hsv: HSVColor, format: ColorPickerFormat): string =>\n  rgbToFormat(hsvToRgb(hsv), format);\n\nexport const parseColorToHsv = (color: string): HSVColor | null => {\n  const rgb = parseColor(color);\n\n  return rgb ? rgbToHsv(rgb) : null;\n};\n\nexport const hslToFormat = (hsl: HSLColor, format: ColorPickerFormat): string =>\n  rgbToFormat(hslToRgb(hsl), format);\n\n/**\n * Resolves a CSS color in browser context.\n * Core stays framework/browser independent.\n */\nexport const resolveCssColor = (color: string): string | null => {\n  if (typeof document === \"undefined\") return null;\n\n  const element = document.createElement(\"span\");\n\n  element.style.color = color;\n\n  if (!element.style.color) return null;\n\n  element.style.position = \"absolute\";\n  element.style.visibility = \"hidden\";\n\n  document.body.appendChild(element);\n\n  const resolved = getComputedStyle(element).color;\n\n  element.remove();\n\n  return resolved || null;\n};\n\nexport const parseColorToHsvInBrowser = (color: string): HSVColor | null => {\n  const direct = parseColorToHsv(color);\n\n  if (direct) return direct;\n\n  const resolved = resolveCssColor(color);\n\n  return resolved ? parseColorToHsv(resolved) : null;\n};\n"],"mappings":"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"}

package/dist/components/forms/color-picker/color-picker.utils.js

@@ -0,0 +1,109 @@
+import { clamp, hslToCss, parseColor, rgbToCss, rgbToHex, rgbToHsl } from "@puzzle-ui/core";
+// src/components/forms/color-picker/color-picker.utils.ts
+const DEFAULT_HSV = {
+	h: 0,
+	s: 100,
+	v: 100,
+	a: 1
+};
+const rgbToHsv = ({ r, g, b, a = 1 }) => {
+	const red = r / 255;
+	const green = g / 255;
+	const blue = b / 255;
+	const max = Math.max(red, green, blue);
+	const delta = max - Math.min(red, green, blue);
+	let h = 0;
+	if (delta !== 0) {
+		if (max === red) h = 60 * ((green - blue) / delta % 6);
+		else if (max === green) h = 60 * ((blue - red) / delta + 2);
+		else h = 60 * ((red - green) / delta + 4);
+	}
+	return {
+		h: (h + 360) % 360,
+		s: max === 0 ? 0 : delta / max * 100,
+		v: max * 100,
+		a
+	};
+};
+const hsvToRgb = ({ h, s, v, a }) => {
+	const hue = (h % 360 + 360) % 360;
+	const saturation = clamp(s / 100, 0, 1);
+	const value = clamp(v / 100, 0, 1);
+	const chroma = value * saturation;
+	const x = chroma * (1 - Math.abs(hue / 60 % 2 - 1));
+	const m = value - chroma;
+	let channels;
+	if (hue < 60) channels = [
+		chroma,
+		x,
+		0
+	];
+	else if (hue < 120) channels = [
+		x,
+		chroma,
+		0
+	];
+	else if (hue < 180) channels = [
+		0,
+		chroma,
+		x
+	];
+	else if (hue < 240) channels = [
+		0,
+		x,
+		chroma
+	];
+	else if (hue < 300) channels = [
+		x,
+		0,
+		chroma
+	];
+	else channels = [
+		chroma,
+		0,
+		x
+	];
+	return {
+		r: Math.round((channels[0] + m) * 255),
+		g: Math.round((channels[1] + m) * 255),
+		b: Math.round((channels[2] + m) * 255),
+		a: clamp(a, 0, 1)
+	};
+};
+const rgbToFormat = (rgb, format) => {
+	switch (format) {
+		case "rgb": return rgbToCss(rgb);
+		case "hsl": return hslToCss(rgbToHsl(rgb));
+		default: return rgbToHex(rgb.r, rgb.g, rgb.b, rgb.a);
+	}
+};
+const hsvToFormat = (hsv, format) => rgbToFormat(hsvToRgb(hsv), format);
+const parseColorToHsv = (color) => {
+	const rgb = parseColor(color);
+	return rgb ? rgbToHsv(rgb) : null;
+};
+/**
+* Resolves a CSS color in browser context.
+* Core stays framework/browser independent.
+*/
+const resolveCssColor = (color) => {
+	if (typeof document === "undefined") return null;
+	const element = document.createElement("span");
+	element.style.color = color;
+	if (!element.style.color) return null;
+	element.style.position = "absolute";
+	element.style.visibility = "hidden";
+	document.body.appendChild(element);
+	const resolved = getComputedStyle(element).color;
+	element.remove();
+	return resolved || null;
+};
+const parseColorToHsvInBrowser = (color) => {
+	const direct = parseColorToHsv(color);
+	if (direct) return direct;
+	const resolved = resolveCssColor(color);
+	return resolved ? parseColorToHsv(resolved) : null;
+};
+export { DEFAULT_HSV, hsvToFormat, hsvToRgb, parseColorToHsv, parseColorToHsvInBrowser, resolveCssColor, rgbToFormat, rgbToHsv };
+
+//# sourceMappingURL=color-picker.utils.js.map

package/dist/components/forms/color-picker/color-picker.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.utils.js","names":[],"sources":["../../../../src/components/forms/color-picker/color-picker.utils.ts"],"sourcesContent":["import {\n  clamp,\n  hslToRgb,\n  rgbToHsl,\n  parseColor,\n  rgbToHex,\n  rgbToCss,\n  hslToCss,\n  type RGBColor,\n  type HSLColor,\n} from \"@puzzle-ui/core\";\n\nimport type { ColorPickerFormat } from \"./color-picker.types\";\n\nexport type HSVColor = {\n  h: number;\n  s: number;\n  v: number;\n  a: number;\n};\n\nexport const DEFAULT_HSV: HSVColor = {\n  h: 0,\n  s: 100,\n  v: 100,\n  a: 1,\n};\n\nexport const rgbToHsv = ({ r, g, b, a = 1 }: RGBColor): HSVColor => {\n  const red = r / 255;\n  const green = g / 255;\n  const blue = b / 255;\n\n  const max = Math.max(red, green, blue);\n  const min = Math.min(red, green, blue);\n  const delta = max - min;\n\n  let h = 0;\n\n  if (delta !== 0) {\n    if (max === red) {\n      h = 60 * (((green - blue) / delta) % 6);\n    } else if (max === green) {\n      h = 60 * ((blue - red) / delta + 2);\n    } else {\n      h = 60 * ((red - green) / delta + 4);\n    }\n  }\n\n  return {\n    h: (h + 360) % 360,\n    s: max === 0 ? 0 : (delta / max) * 100,\n    v: max * 100,\n    a,\n  };\n};\n\nexport const hsvToRgb = ({ h, s, v, a }: HSVColor): RGBColor => {\n  const hue = ((h % 360) + 360) % 360;\n\n  const saturation = clamp(s / 100, 0, 1);\n  const value = clamp(v / 100, 0, 1);\n\n  const chroma = value * saturation;\n  const x = chroma * (1 - Math.abs(((hue / 60) % 2) - 1));\n  const m = value - chroma;\n\n  let channels: [number, number, number];\n\n  if (hue < 60) channels = [chroma, x, 0];\n  else if (hue < 120) channels = [x, chroma, 0];\n  else if (hue < 180) channels = [0, chroma, x];\n  else if (hue < 240) channels = [0, x, chroma];\n  else if (hue < 300) channels = [x, 0, chroma];\n  else channels = [chroma, 0, x];\n\n  return {\n    r: Math.round((channels[0] + m) * 255),\n    g: Math.round((channels[1] + m) * 255),\n    b: Math.round((channels[2] + m) * 255),\n    a: clamp(a, 0, 1),\n  };\n};\n\nexport const rgbToFormat = (\n  rgb: RGBColor,\n  format: ColorPickerFormat,\n): string => {\n  switch (format) {\n    case \"rgb\":\n      return rgbToCss(rgb);\n    case \"hsl\":\n      return hslToCss(rgbToHsl(rgb));\n    case \"hexa\":\n    case \"hex\":\n    default:\n      return rgbToHex(rgb.r, rgb.g, rgb.b, rgb.a);\n  }\n};\n\nexport const hsvToFormat = (hsv: HSVColor, format: ColorPickerFormat): string =>\n  rgbToFormat(hsvToRgb(hsv), format);\n\nexport const parseColorToHsv = (color: string): HSVColor | null => {\n  const rgb = parseColor(color);\n\n  return rgb ? rgbToHsv(rgb) : null;\n};\n\nexport const hslToFormat = (hsl: HSLColor, format: ColorPickerFormat): string =>\n  rgbToFormat(hslToRgb(hsl), format);\n\n/**\n * Resolves a CSS color in browser context.\n * Core stays framework/browser independent.\n */\nexport const resolveCssColor = (color: string): string | null => {\n  if (typeof document === \"undefined\") return null;\n\n  const element = document.createElement(\"span\");\n\n  element.style.color = color;\n\n  if (!element.style.color) return null;\n\n  element.style.position = \"absolute\";\n  element.style.visibility = \"hidden\";\n\n  document.body.appendChild(element);\n\n  const resolved = getComputedStyle(element).color;\n\n  element.remove();\n\n  return resolved || null;\n};\n\nexport const parseColorToHsvInBrowser = (color: string): HSVColor | null => {\n  const direct = parseColorToHsv(color);\n\n  if (direct) return direct;\n\n  const resolved = resolveCssColor(color);\n\n  return resolved ? parseColorToHsv(resolved) : null;\n};\n"],"mappings":";;AAqBA,MAAa,cAAwB;CACnC,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL;AAEA,MAAa,YAAY,EAAE,GAAG,GAAG,GAAG,IAAI,QAA4B;CAClE,MAAM,MAAM,IAAI;CAChB,MAAM,QAAQ,IAAI;CAClB,MAAM,OAAO,IAAI;CAEjB,MAAM,MAAM,KAAK,IAAI,KAAK,OAAO,IAAI;CAErC,MAAM,QAAQ,MADF,KAAK,IAAI,KAAK,OAAO,IACX;CAEtB,IAAI,IAAI;CAER,IAAI,UAAU,GAAG;EACf,IAAI,QAAQ,KACV,IAAI,OAAQ,QAAQ,QAAQ,QAAS;OAChC,IAAI,QAAQ,OACjB,IAAI,OAAO,OAAO,OAAO,QAAQ;OAEjC,IAAI,OAAO,MAAM,SAAS,QAAQ;CAEtC;CAEA,OAAO;EACL,IAAI,IAAI,OAAO;EACf,GAAG,QAAQ,IAAI,IAAK,QAAQ,MAAO;EACnC,GAAG,MAAM;EACT;CACF;AACF;AAEA,MAAa,YAAY,EAAE,GAAG,GAAG,GAAG,QAA4B;CAC9D,MAAM,OAAQ,IAAI,MAAO,OAAO;CAEhC,MAAM,aAAa,MAAM,IAAI,KAAK,GAAG,CAAC;CACtC,MAAM,QAAQ,MAAM,IAAI,KAAK,GAAG,CAAC;CAEjC,MAAM,SAAS,QAAQ;CACvB,MAAM,IAAI,UAAU,IAAI,KAAK,IAAM,MAAM,KAAM,IAAK,CAAC;CACrD,MAAM,IAAI,QAAQ;CAElB,IAAI;CAEJ,IAAI,MAAM,IAAI,WAAW;EAAC;EAAQ;EAAG;CAAC;MACjC,IAAI,MAAM,KAAK,WAAW;EAAC;EAAG;EAAQ;CAAC;MACvC,IAAI,MAAM,KAAK,WAAW;EAAC;EAAG;EAAQ;CAAC;MACvC,IAAI,MAAM,KAAK,WAAW;EAAC;EAAG;EAAG;CAAM;MACvC,IAAI,MAAM,KAAK,WAAW;EAAC;EAAG;EAAG;CAAM;MACvC,WAAW;EAAC;EAAQ;EAAG;CAAC;CAE7B,OAAO;EACL,GAAG,KAAK,OAAO,SAAS,KAAK,KAAK,GAAG;EACrC,GAAG,KAAK,OAAO,SAAS,KAAK,KAAK,GAAG;EACrC,GAAG,KAAK,OAAO,SAAS,KAAK,KAAK,GAAG;EACrC,GAAG,MAAM,GAAG,GAAG,CAAC;CAClB;AACF;AAEA,MAAa,eACX,KACA,WACW;CACX,QAAQ,QAAR;EACE,KAAK,OACH,OAAO,SAAS,GAAG;EACrB,KAAK,OACH,OAAO,SAAS,SAAS,GAAG,CAAC;EAG/B,SACE,OAAO,SAAS,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC9C;AACF;AAEA,MAAa,eAAe,KAAe,WACzC,YAAY,SAAS,GAAG,GAAG,MAAM;AAEnC,MAAa,mBAAmB,UAAmC;CACjE,MAAM,MAAM,WAAW,KAAK;CAE5B,OAAO,MAAM,SAAS,GAAG,IAAI;AAC/B;;;;;AASA,MAAa,mBAAmB,UAAiC;CAC/D,IAAI,OAAO,aAAa,aAAa,OAAO;CAE5C,MAAM,UAAU,SAAS,cAAc,MAAM;CAE7C,QAAQ,MAAM,QAAQ;CAEtB,IAAI,CAAC,QAAQ,MAAM,OAAO,OAAO;CAEjC,QAAQ,MAAM,WAAW;CACzB,QAAQ,MAAM,aAAa;CAE3B,SAAS,KAAK,YAAY,OAAO;CAEjC,MAAM,WAAW,iBAAiB,OAAO,CAAC,CAAC;CAE3C,QAAQ,OAAO;CAEf,OAAO,YAAY;AACrB;AAEA,MAAa,4BAA4B,UAAmC;CAC1E,MAAM,SAAS,gBAAgB,KAAK;CAEpC,IAAI,QAAQ,OAAO;CAEnB,MAAM,WAAW,gBAAgB,KAAK;CAEtC,OAAO,WAAW,gBAAgB,QAAQ,IAAI;AAChD"}