@lobehub/ui 6.0.0-beta.1 → 6.0.0-beta.11

package/es/ColorPicker/color.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"color.mjs","names":[],"sources":["../../src/ColorPicker/color.ts"],"sourcesContent":["import chroma from 'chroma-js';\n\nexport interface Hsva {\n  a: number;\n  h: number;\n  s: number;\n  v: number;\n}\n\nexport const parseColor = (value: string | undefined, fallbackHue = 0): Hsva => {\n  if (!value || !chroma.valid(value)) return { a: 1, h: fallbackHue, s: 0, v: 0 };\n  const color = chroma(value);\n  const [h, s, v] = color.hsv();\n  return { a: color.alpha(), h: Number.isNaN(h) ? fallbackHue : h, s, v };\n};\n\nexport const formatColor = ({ a, h, s, v }: Hsva, alpha: boolean): string =>\n  chroma\n    .hsv(h, s, v)\n    .alpha(alpha ? a : 1)\n    .hex(alpha ? 'rgba' : 'rgb');\n\nexport const normalizeHexInput = (input: string): string | null => {\n  const raw = input.trim().replace(/^#/, '');\n  if (!/^([\\da-f]{3}|[\\da-f]{6}|[\\da-f]{8})$/i.test(raw)) return null;\n  return `#${raw.toLowerCase()}`;\n};\n"],"mappings":";;AASA,MAAa,cAAc,OAA2B,cAAc,MAAY;CAC9E,IAAI,CAAC,SAAS,CAAC,OAAO,MAAM,KAAK,GAAG,OAAO;EAAE,GAAG;EAAG,GAAG;EAAa,GAAG;EAAG,GAAG;CAAE;CAC9E,MAAM,QAAQ,OAAO,KAAK;CAC1B,MAAM,CAAC,GAAG,GAAG,KAAK,MAAM,IAAI;CAC5B,OAAO;EAAE,GAAG,MAAM,MAAM;EAAG,GAAG,OAAO,MAAM,CAAC,IAAI,cAAc;EAAG;EAAG;CAAE;AACxE;AAEA,MAAa,eAAe,EAAE,GAAG,GAAG,GAAG,KAAW,UAChD,OACG,IAAI,GAAG,GAAG,CAAC,CAAC,CACZ,MAAM,QAAQ,IAAI,CAAC,CAAC,CACpB,IAAI,QAAQ,SAAS,KAAK;AAE/B,MAAa,qBAAqB,UAAiC;CACjE,MAAM,MAAM,MAAM,KAAK,CAAC,CAAC,QAAQ,MAAM,EAAE;CACzC,IAAI,CAAC,wCAAwC,KAAK,GAAG,GAAG,OAAO;CAC/D,OAAO,IAAI,IAAI,YAAY;AAC7B"}
+{"version":3,"file":"color.mjs","names":[],"sources":["../../src/ColorPicker/color.ts"],"sourcesContent":["import chroma from 'chroma-js';\n\nexport interface Hsva {\n  a: number;\n  h: number;\n  s: number;\n  v: number;\n}\n\nexport const parseColor = (value: string | undefined, fallbackHue = 0): Hsva => {\n  if (!value || !chroma.valid(value)) return { a: 1, h: fallbackHue, s: 0, v: 0 };\n  const color = chroma(value);\n  const [h, s, v] = color.hsv();\n  return { a: color.alpha(), h: Number.isNaN(h) ? fallbackHue : h, s, v };\n};\n\nexport const formatColor = ({ a, h, s, v }: Hsva, alpha: boolean): string =>\n  chroma\n    .hsv(h, s, v)\n    .alpha(alpha ? a : 1)\n    .hex(alpha ? 'rgba' : 'rgb');\n\nexport const normalizeHexInput = (input: string): string | null => {\n  const raw = input.trim().replace(/^#/, '');\n  if (!/^([\\da-f]{3}|[\\da-f]{6}|[\\da-f]{8})$/i.test(raw)) return null;\n  return `#${raw.toLowerCase()}`;\n};\n\nexport type ColorFormat = 'hex' | 'rgb' | 'hsl';\n\nexport const toRgb = ({ h, s, v }: Hsva): [number, number, number] => {\n  const [r, g, b] = chroma.hsv(h, s, v).rgb();\n  return [r, g, b];\n};\n\nexport const toHsl = (hsva: Hsva): [number, number, number] => {\n  const [h, s, l] = chroma.hsv(hsva.h, hsva.s, hsva.v).hsl();\n  return [Math.round(Number.isNaN(h) ? hsva.h : h), Math.round(s * 100), Math.round(l * 100)];\n};\n\nexport const fromRgb = ([r, g, b]: [number, number, number], current: Hsva): Hsva => ({\n  ...parseColor(chroma.rgb(r, g, b).hex(), current.h),\n  a: current.a,\n});\n\nexport const fromHsl = ([h, s, l]: [number, number, number], current: Hsva): Hsva => ({\n  ...parseColor(chroma.hsl(h, s / 100, l / 100).hex(), h),\n  a: current.a,\n});\n"],"mappings":";;AASA,MAAa,cAAc,OAA2B,cAAc,MAAY;CAC9E,IAAI,CAAC,SAAS,CAAC,OAAO,MAAM,KAAK,GAAG,OAAO;EAAE,GAAG;EAAG,GAAG;EAAa,GAAG;EAAG,GAAG;CAAE;CAC9E,MAAM,QAAQ,OAAO,KAAK;CAC1B,MAAM,CAAC,GAAG,GAAG,KAAK,MAAM,IAAI;CAC5B,OAAO;EAAE,GAAG,MAAM,MAAM;EAAG,GAAG,OAAO,MAAM,CAAC,IAAI,cAAc;EAAG;EAAG;CAAE;AACxE;AAEA,MAAa,eAAe,EAAE,GAAG,GAAG,GAAG,KAAW,UAChD,OACG,IAAI,GAAG,GAAG,CAAC,CAAC,CACZ,MAAM,QAAQ,IAAI,CAAC,CAAC,CACpB,IAAI,QAAQ,SAAS,KAAK;AAE/B,MAAa,qBAAqB,UAAiC;CACjE,MAAM,MAAM,MAAM,KAAK,CAAC,CAAC,QAAQ,MAAM,EAAE;CACzC,IAAI,CAAC,wCAAwC,KAAK,GAAG,GAAG,OAAO;CAC/D,OAAO,IAAI,IAAI,YAAY;AAC7B;AAIA,MAAa,SAAS,EAAE,GAAG,GAAG,QAAwC;CACpE,MAAM,CAAC,GAAG,GAAG,KAAK,OAAO,IAAI,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI;CAC1C,OAAO;EAAC;EAAG;EAAG;CAAC;AACjB;AAEA,MAAa,SAAS,SAAyC;CAC7D,MAAM,CAAC,GAAG,GAAG,KAAK,OAAO,IAAI,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI;CACzD,OAAO;EAAC,KAAK,MAAM,OAAO,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC;EAAG,KAAK,MAAM,IAAI,GAAG;EAAG,KAAK,MAAM,IAAI,GAAG;CAAC;AAC5F;AAEA,MAAa,WAAW,CAAC,GAAG,GAAG,IAA8B,aAAyB;CACpF,GAAG,WAAW,OAAO,IAAI,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,GAAG,QAAQ,CAAC;CAClD,GAAG,QAAQ;AACb;AAEA,MAAa,WAAW,CAAC,GAAG,GAAG,IAA8B,aAAyB;CACpF,GAAG,WAAW,OAAO,IAAI,GAAG,IAAI,KAAK,IAAI,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC;CACtD,GAAG,QAAQ;AACb"}

package/es/ColorPicker/recent.mjs

@@ -0,0 +1,25 @@
+import { useSyncExternalStore } from "react";
+//#region src/ColorPicker/recent.ts
+const MAX_RECENT = 9;
+let recentColors = [];
+const listeners = /* @__PURE__ */ new Set();
+const emit = () => {
+	for (const listener of listeners) listener();
+};
+const pushRecentColor = (hex) => {
+	const key = hex.toLowerCase();
+	recentColors = [key, ...recentColors.filter((color) => color !== key)].slice(0, MAX_RECENT);
+	emit();
+};
+const subscribe = (listener) => {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+};
+const getSnapshot = () => recentColors;
+const useRecentColors = () => useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+//#endregion
+export { pushRecentColor, useRecentColors };
+
+//# sourceMappingURL=recent.mjs.map

package/es/ColorPicker/recent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"recent.mjs","names":[],"sources":["../../src/ColorPicker/recent.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react';\n\nconst MAX_RECENT = 9;\n\nlet recentColors: string[] = [];\nconst listeners = new Set<() => void>();\n\nconst emit = () => {\n  for (const listener of listeners) listener();\n};\n\nexport const pushRecentColor = (hex: string) => {\n  const key = hex.toLowerCase();\n  recentColors = [key, ...recentColors.filter((color) => color !== key)].slice(0, MAX_RECENT);\n  emit();\n};\n\nexport const clearRecentColors = () => {\n  recentColors = [];\n  emit();\n};\n\nconst subscribe = (listener: () => void) => {\n  listeners.add(listener);\n  return () => {\n    listeners.delete(listener);\n  };\n};\n\nconst getSnapshot = () => recentColors;\n\nexport const useRecentColors = () => useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n"],"mappings":";;AAEA,MAAM,aAAa;AAEnB,IAAI,eAAyB,CAAC;AAC9B,MAAM,4BAAY,IAAI,IAAgB;AAEtC,MAAM,aAAa;CACjB,KAAK,MAAM,YAAY,WAAW,SAAS;AAC7C;AAEA,MAAa,mBAAmB,QAAgB;CAC9C,MAAM,MAAM,IAAI,YAAY;CAC5B,eAAe,CAAC,KAAK,GAAG,aAAa,QAAQ,UAAU,UAAU,GAAG,CAAC,CAAC,CAAC,MAAM,GAAG,UAAU;CAC1F,KAAK;AACP;AAOA,MAAM,aAAa,aAAyB;CAC1C,UAAU,IAAI,QAAQ;CACtB,aAAa;EACX,UAAU,OAAO,QAAQ;CAC3B;AACF;AAEA,MAAM,oBAAoB;AAE1B,MAAa,wBAAwB,qBAAqB,WAAW,aAAa,WAAW"}

package/es/ColorPicker/style.mjs

@@ -1,10 +1,11 @@
 import { cssVar } from "../styles/stylex/cssVar.stylex.mjs";
 //#region src/ColorPicker/style.ts
 `${cssVar.colorFillSecondary}${cssVar.colorFillSecondary}`;
+`${cssVar.colorFillSecondary}`;
 const styles = {
 	alphaField: {
 		kUk6DE: "lb1okw0bk",
-		kzqmXN: "lb3qvj3v",
+		kzqmXN: "lbcltakc",
 		$$css: true
 	},
 	alphaTrack: {
@@ -12,20 +13,91 @@ const styles = {
 		kaIpWk: "lby54tlg",
 		kKwaWg: "lb1l48pi0",
 		kgSjnq: "lbrent5h",
+		kGVxlE: "lb1go0r6q",
 		kZKoxP: "lb1oxkl7l",
 		$$css: true
 	},
-	eyeDropper: {
-		keTefX: "lbvc5jky",
+	channelCompact: {
+		kwRFfy: "lb11c2f7x",
+		kZCmMZ: "lb135b78x",
 		$$css: true
 	},
-	hexField: {
+	channelField: {
+		kUk6DE: "lb98rzlu",
 		k7Eaqz: "lbeuugli",
 		$$css: true
 	},
-	hexRow: {
-		kOIVth: "lb17d4w8g",
+	channelInput: {
+		kcqcaj: "lbss6m8b",
+		k9WMMc: "lb2b8uid",
+		$$css: true
+	},
+	compare: {
+		k1YJky: "lb13hcsrd",
+		kaIpWk: "lbur7f20",
+		kUk6DE: "lb1okw0bk",
+		kVQacm: "lbb3r6kr",
+		kKwaWg: "lbrnvwt7",
+		kgSjnq: "lbu00q2a",
+		kGVxlE: "lb1ca30vo",
 		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		kzqmXN: "lbgd8bvy",
+		$$css: true
+	},
+	compareHalf: {
+		kmVPX3: "lb1717udv",
+		ksu8eU: "lbng3xce",
+		kMzoRj: "lbc342km",
+		kUk6DE: "lb98rzlu",
+		$$css: true
+	},
+	compareRestore: {
+		kkrTdU: "lb1ypdohk",
+		$$css: true
+	},
+	controls: {
+		kOIVth: "lb883omv",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5",
+		$$css: true
+	},
+	eyeDropper: {
+		kmVPX3: "lb1717udv",
+		kaIpWk: "lbur7f20",
+		ksu8eU: "lbng3xce",
+		kMzoRj: "lbc342km",
+		kUk6DE: "lb1okw0bk",
+		kGNEyG: "lb6s0dn4",
+		kWkggS: "lbaljia1 lb1ri6zej",
+		kMwMTN: "lb66ogz0",
+		kkrTdU: "lb1ypdohk",
+		k1xSpc: "lb3nfvp2",
+		kjj79g: "lbl56j7k",
+		kZKoxP: "lb1fgtraw",
+		kzqmXN: "lbgd8bvy",
+		$$css: true
+	},
+	formatSelect: {
+		kUk6DE: "lb1okw0bk",
+		kGuDYH: "lbkfewty",
+		k63SB2: "lb1s688f",
+		kb6lSQ: "lb3gc2hl",
+		kwRFfy: "lb1cx2peq",
+		kZCmMZ: "lby48o12",
+		kzqmXN: "lb5npi73",
+		$$css: true
+	},
+	formatPopup: {
+		k7Eaqz: "lb1i9suas",
+		$$css: true
+	},
+	formatHint: {
+		kMwMTN: "lb53gy9q",
+		kGuDYH: "lb1j6dyjg",
+		kcqcaj: "lbss6m8b",
+		keTefX: "lbvc5jky",
+		kZCmMZ: "lb1g0dm76",
 		$$css: true
 	},
 	hidden: {
@@ -37,123 +109,250 @@ const styles = {
 		kaIpWk: "lby54tlg",
 		kWkggS: "lb1tsovho",
 		kKwaWg: "lb8mo06m",
+		kGVxlE: "lb1go0r6q",
 		kZKoxP: "lb1oxkl7l",
 		$$css: true
 	},
-	panel: {
-		kOIVth: "lb1af02g3",
+	inputs: {
+		kOIVth: "lb17d4w8g",
+		kGNEyG: "lb6s0dn4",
 		k1xSpc: "lb78zum5",
-		kXwgrk: "lbdt5ytf",
-		kzqmXN: "lbafpxmx",
 		$$css: true
 	},
-	preset: {
-		kmVPX3: "lb1717udv",
-		kVAM5u: "lb181nr7w",
-		kaIpWk: "lb16rqkct",
-		ksu8eU: "lbng3xce",
-		kMzoRj: "lbc342km",
-		kGVxlE: "lb1gncbh",
-		kkrTdU: "lb1ypdohk",
-		kZKoxP: "lb17rw0jw",
-		kzqmXN: "lb17z2i9w",
-		$$css: true
-	},
-	presets: {
-		kOIVth: "lb167g77z",
-		kLZC3w: "lbwyyj3y",
-		kPef9Z: "lb13fuv20",
-		kEafiO: "lb178xt8z",
+	panel: {
+		kOIVth: "lb1v2ro7d",
 		k1xSpc: "lb78zum5",
-		kwnvtZ: "lb1a02dak",
-		kLKAdn: "lbyinxu5",
+		kXwgrk: "lbdt5ytf",
+		kzqmXN: "lbafpxmx",
 		$$css: true
 	},
 	saturation: {
-		kaIpWk: "lb4pepcl",
+		kaIpWk: "lb1q4ynmn",
+		kGVxlE: "lb1ca30vo",
 		kkrTdU: "lbsid9ct",
 		kVAEAm: "lb1n2onr6",
 		kFalU9: "lb5ve5x3",
-		kZKoxP: "lba0zjtf",
+		kZKoxP: "lb18dl8mb",
 		$$css: true
 	},
 	sliderThumb: {
 		kVAM5u: "lb11ne2u5",
 		ksu8eU: "lb1y0btm7",
-		kMzoRj: "lbrecjfi",
-		kWkggS: "lb1tsovho",
+		kMzoRj: "lbuzmsqa",
+		kWkggS: "lbm5z94f",
 		kKwaWg: "lb8uku7w",
-		kGVxlE: "lbge4exk",
-		kZKoxP: "lb143yq0j",
-		kzqmXN: "lb1k6gmeo",
+		kGVxlE: "lbzwqy10",
+		kZKoxP: "lbqjnyr0",
+		kzqmXN: "lb9pgxlv",
 		$$css: true
 	},
-	summary: {
-		kOIVth: "lb1v2ro7d",
+	sliders: {
+		kUk6DE: "lb98rzlu",
+		kOIVth: "lb883omv",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	swatchGrid: {
+		kOIVth: "lb1nejdyq",
+		k1xSpc: "lbrvj5dj",
+		kumcoG: "lbkkvkr6",
+		$$css: true
+	},
+	swatchHeader: {
+		kOIVth: "lb195vfkc",
 		kGNEyG: "lb6s0dn4",
 		k1xSpc: "lb78zum5",
+		kAzted: "lbe0957l",
 		$$css: true
 	},
-	swatch: {
+	swatchLabel: {
+		kg3NbH: "lb5k8d2m",
+		kMwMTN: "lb53gy9q",
+		kGuDYH: "lb1j6dyjg",
+		k63SB2: "lbk50ysn",
+		$$css: true
+	},
+	swatchItem: {
+		kmVPX3: "lb1717udv",
 		k1YJky: "lb13hcsrd",
+		kaIpWk: "lb1kogg8i",
+		ksu8eU: "lbng3xce",
+		kMzoRj: "lbc342km",
+		kVQacm: "lbb3r6kr",
+		kmkexE: "lb19qmanz",
+		kOBAk4: "lb1plog1",
+		kKwaWg: "lbrnvwt7",
+		kgSjnq: "lbu00q2a",
+		kGVxlE: "lby5480v",
+		kkrTdU: "lb1ypdohk",
+		kVAEAm: "lb1n2onr6",
+		$$css: true
+	},
+	swatchSection: {
+		kOIVth: "lb167g77z",
+		kLZC3w: "lbwyyj3y",
+		kPef9Z: "lb13fuv20",
+		kEafiO: "lb178xt8z",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		kLKAdn: "lbz9dl7a",
+		$$css: true
+	},
+	swatchTab: {
+		kaIpWk: "lb1kogg8i",
+		ksu8eU: "lbng3xce",
+		kMzoRj: "lbc342km",
+		kg3NbH: "lbdqyycr",
+		kWkggS: "lbjbqb8w lb1r7xvfj",
+		kMwMTN: "lb53gy9q lbr5dhpw",
+		kkrTdU: "lb1ypdohk",
+		kGuDYH: "lb1j6dyjg",
+		k63SB2: "lbk50ysn",
+		kZKoxP: "lb17rw0jw",
+		$$css: true
+	},
+	thumb: {
+		kVAM5u: "lbg29ltk",
 		kaIpWk: "lb16rqkct",
+		ksu8eU: "lb1y0btm7",
+		kMzoRj: "lbdh2fpr",
+		kGVxlE: "lbs4lzo",
+		kB7OPa: "lb9f619",
+		kfzvcC: "lb47corl",
+		kVAEAm: "lb10l6tqk",
+		k3aq6I: "lb11lhmoz",
+		kZKoxP: "lb1v9usgg",
+		kzqmXN: "lb6jxa94",
+		$$css: true
+	}
+};
+const swatchStyles = {
+	box: {
+		k1YJky: "lb13hcsrd",
 		kUk6DE: "lb1okw0bk",
 		kVQacm: "lbb3r6kr",
 		kKwaWg: "lbrnvwt7",
 		kgSjnq: "lbu00q2a",
-		kGVxlE: "lb1ca30vo",
 		k1xSpc: "lb3nfvp2",
+		kVAEAm: "lb1n2onr6",
 		$$css: true
 	},
-	swatchButton: {
-		kmVPX3: "lb1717udv",
-		kVAM5u: "lb181nr7w",
-		kaIpWk: "lb16rqkct",
+	fill: {
+		kpwlN0: "lb10a8y8t",
+		kaIpWk: "lb1pjcqnp",
+		kGVxlE: "lb1ca30vo",
+		kVAEAm: "lb10l6tqk",
+		$$css: true
+	},
+	slash: {
+		kYYq5F: "lb1o4mm3x",
+		kWkggS: "lbixdnzb",
+		kLqNvP: "lb1yui72q",
+		kVAEAm: "lb10l6tqk",
+		k3aq6I: "lb1158fpu",
+		kzqmXN: "lbbdjdey",
+		$$css: true
+	}
+};
+const triggerStyles = {
+	alpha: {
+		kGJrpR: "lb7fs7li",
+		kVhnKS: "lb1t7ytsu",
+		k2ei4v: "lbpilrb4",
+		kMwMTN: "lb53gy9q",
+		kcqcaj: "lbss6m8b",
+		kZCmMZ: "lbmzvs34",
+		$$css: true
+	},
+	caret: {
+		kUk6DE: "lb1okw0bk",
+		kMwMTN: "lb53gy9q",
+		keTefX: "lbvc5jky",
+		$$css: true
+	},
+	chip: {
+		kaIpWk: "lb1e6avla",
 		ksu8eU: "lbng3xce",
 		kMzoRj: "lbc342km",
+		kOIVth: "lb17d4w8g",
+		kmkexE: "lbdb7520",
 		kGNEyG: "lb6s0dn4",
-		kWkggS: "lbjbqb8w",
+		kWkggS: "lbaljia1 lbbchuj0",
+		kMwMTN: "lb66ogz0",
 		kkrTdU: "lb1ypdohk lb1s07b3s",
 		k1xSpc: "lb3nfvp2",
-		kjj79g: "lbl56j7k",
+		kMv6JI: "lbjb2p0i",
 		kSiTet: "lbijokvz",
+		$$css: true
+	},
+	chipSmall: {
+		kGuDYH: "lbfifm61",
+		kwRFfy: "lbf159sx",
+		kZCmMZ: "lb135b78x",
+		kZKoxP: "lbxk0z11",
+		$$css: true
+	},
+	chipMiddle: {
+		kGuDYH: "lb4z9k3i",
+		kwRFfy: "lb1kukv79",
+		kZCmMZ: "lb25sj25",
 		kZKoxP: "lb10w6t97",
-		kzqmXN: "lb1td3qas",
 		$$css: true
 	},
-	swatchFill: {
-		kUk6DE: "lb98rzlu",
+	chipLarge: {
+		kGuDYH: "lbif65rj",
+		kwRFfy: "lb1pic42t",
+		kZCmMZ: "lbmzvs34",
+		kZKoxP: "lb1vqgdyp",
+		$$css: true
+	},
+	empty: {
+		kMwMTN: "lb53gy9q",
 		$$css: true
 	},
-	textTrigger: {
+	field: {
+		kOIVth: "lb167g77z",
+		kkrTdU: "lb1ypdohk",
 		kzqmXN: "lb14atkfc",
 		$$css: true
 	},
-	thumb: {
-		kVAM5u: "lbg29ltk",
-		kaIpWk: "lb16rqkct",
-		ksu8eU: "lb1y0btm7",
-		kMzoRj: "lb9r2w2z",
-		kGVxlE: "lb9mla8l",
-		kB7OPa: "lb9f619",
-		k1K539: "lbat24cr",
-		keoZOQ: "lb6tz33s",
-		k71WvV: "lb14z9mp",
-		keTefX: "lb166poo9",
-		kVAEAm: "lb10l6tqk",
-		kZKoxP: "lbmix8c7",
-		kzqmXN: "lb1xp8n7a",
+	fieldSmall: {
+		kwRFfy: "lbf159sx",
+		kZCmMZ: "lbaso8d8",
+		k7Eaqz: "lb1c7vg25",
 		$$css: true
 	},
-	value: {
-		kMv6JI: "lb2xbw48",
-		kGuDYH: "lbwsyq91",
-		k63SB2: "lb1s688f",
-		kLWn49: "lb1u7k74",
+	fieldMiddle: {
+		kwRFfy: "lb2vl965",
+		kZCmMZ: "lbmzvs34",
+		k7Eaqz: "lb1d77m7x",
+		$$css: true
+	},
+	fieldLarge: {
+		kwRFfy: "lbpdmqnj",
+		kZCmMZ: "lbe2zdcy",
+		k7Eaqz: "lbhs4bwn",
+		$$css: true
+	},
+	swatch: {
+		kmVPX3: "lb1717udv",
+		kaIpWk: "lbur7f20",
+		ksu8eU: "lbng3xce",
+		kMzoRj: "lbc342km",
+		kWkggS: "lbjbqb8w",
+		kkrTdU: "lb1ypdohk lb1s07b3s",
+		kSiTet: "lbijokvz",
+		$$css: true
+	},
+	text: {
+		kcqcaj: "lbss6m8b",
+		kb6lSQ: "lb1yf5rgg",
 		$$css: true
 	}
 };
 //#endregion
-export { styles };
+export { styles, swatchStyles, triggerStyles };
 
 //# sourceMappingURL=style.mjs.map

package/es/ColorPicker/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/ColorPicker/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst checker = `linear-gradient(45deg, ${cssVar.colorFillSecondary} 25%, transparent 25%, transparent 75%, ${cssVar.colorFillSecondary} 75%)`;\n\nexport const styles = stylex.create({\n  alphaField: {\n    flex: 'none',\n    width: '76px !important',\n  },\n  alphaTrack: {\n    backgroundPosition: '0 0, 0 0, 4px 4px !important',\n    borderRadius: '999px !important',\n    backgroundImage: `linear-gradient(to right, transparent, var(--lobe-color-picker-alpha)), ${checker}, ${checker} !important`,\n    backgroundSize: '100% 100%, 8px 8px, 8px 8px !important',\n    height: '10px !important',\n  },\n  eyeDropper: {\n    marginInlineStart: 'auto',\n  },\n  hexField: {\n    minWidth: 0,\n  },\n  hexRow: {\n    gap: 6,\n    display: 'flex',\n  },\n  hidden: {\n    backgroundColor: 'transparent !important',\n    backgroundImage: 'none !important',\n  },\n  hueTrack: {\n    borderRadius: '999px !important',\n    backgroundColor: 'transparent !important',\n    backgroundImage:\n      'linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00) !important',\n    height: '10px !important',\n  },\n  panel: {\n    gap: 14,\n    display: 'flex',\n    flexDirection: 'column',\n    width: 240,\n  },\n  preset: {\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderRadius: '50%',\n    borderStyle: 'none',\n    borderWidth: 0,\n    boxShadow: {\n      'default': null,\n      \":is([aria-pressed='true'])\": `0 0 0 2px ${cssVar.colorBgElevated}, 0 0 0 4px ${cssVar.colorText}`,\n    },\n    cursor: 'pointer',\n    height: 22,\n    width: 22,\n  },\n  presets: {\n    gap: 8,\n    borderBlockStartColor: cssVar.colorBorderSecondary,\n    borderBlockStartStyle: 'solid',\n    borderBlockStartWidth: 1,\n    display: 'flex',\n    flexWrap: 'wrap',\n    paddingBlockStart: 14,\n  },\n  saturation: {\n    borderRadius: 12,\n    cursor: 'crosshair',\n    position: 'relative',\n    touchAction: 'none',\n    height: 164,\n  },\n  sliderThumb: {\n    borderColor: '#fff !important',\n    borderStyle: 'solid',\n    borderWidth: '3px !important',\n    backgroundColor: 'transparent !important',\n    backgroundImage: 'none !important',\n    boxShadow: '0 0 0 1px rgb(0 0 0 / 12%), 0 2px 6px rgb(0 0 0 / 25%) !important',\n    height: '18px !important',\n    width: '18px !important',\n  },\n  summary: {\n    gap: 12,\n    alignItems: 'center',\n    display: 'flex',\n  },\n  swatch: {\n    backgroundPosition: '0 0, 4px 4px',\n    borderRadius: '50%',\n    flex: 'none',\n    overflow: 'hidden',\n    backgroundImage: `${checker}, ${checker}`,\n    backgroundSize: '8px 8px',\n    boxShadow: `inset 0 0 0 1px ${cssVar.colorFillSecondary}`,\n    display: 'inline-flex',\n  },\n  swatchButton: {\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderRadius: '50%',\n    borderStyle: 'none',\n    borderWidth: 0,\n    alignItems: 'center',\n    backgroundColor: 'transparent',\n    cursor: { 'default': 'pointer', ':disabled': 'not-allowed' },\n    display: 'inline-flex',\n    justifyContent: 'center',\n    opacity: { 'default': null, ':disabled': 0.5 },\n    height: 32,\n    width: 32,\n  },\n  swatchFill: {\n    flex: '1',\n  },\n  textTrigger: {\n    width: 'auto',\n  },\n  thumb: {\n    borderColor: '#fff',\n    borderRadius: '50%',\n    borderStyle: 'solid',\n    borderWidth: 3,\n    boxShadow: '0 0 0 1px rgb(0 0 0 / 12%), 0 2px 6px rgb(0 0 0 / 25%)',\n    boxSizing: 'border-box',\n    marginBlockEnd: 0,\n    marginBlockStart: -9,\n    marginInlineEnd: 0,\n    marginInlineStart: -9,\n    position: 'absolute',\n    height: 18,\n    width: 18,\n  },\n  value: {\n    fontFamily: cssVar.fontFamilyCode,\n    fontSize: 20,\n    fontWeight: 600,\n    lineHeight: 1.2,\n  },\n});\n"],"mappings":";;AAGgB,GAA0B,OAAO,qBAA6D,OAAO;AACrH,MAAa,SAAS;CACpB,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/ColorPicker/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst checker = `linear-gradient(45deg, ${cssVar.colorFillSecondary} 25%, transparent 25%, transparent 75%, ${cssVar.colorFillSecondary} 75%)`;\nconst insetRing = `inset 0 0 0 1px ${cssVar.colorFillSecondary}`;\nconst thumbRing = '0 0 0 1px rgb(0 0 0 / 18%), 0 1px 4px rgb(0 0 0 / 30%)';\n\nexport const styles = stylex.create({\n  alphaField: {\n    flex: 'none',\n    width: '52px !important',\n  },\n  alphaTrack: {\n    backgroundPosition: '0 0, 0 0, 4px 4px !important',\n    borderRadius: '999px !important',\n    backgroundImage: `linear-gradient(to right, transparent, var(--lobe-color-picker-alpha)), ${checker}, ${checker} !important`,\n    backgroundSize: '100% 100%, 8px 8px, 8px 8px !important',\n    boxShadow: `${insetRing} !important`,\n    height: '10px !important',\n  },\n  channelCompact: {\n    paddingInlineEnd: '!important',\n    paddingInlineStart: '4px',\n  },\n  channelField: {\n    flex: '1',\n    minWidth: 0,\n  },\n  channelInput: {\n    fontVariantNumeric: 'tabular-nums',\n    textAlign: 'center',\n  },\n  compare: {\n    backgroundPosition: '0 0, 4px 4px',\n    borderRadius: 8,\n    flex: 'none',\n    overflow: 'hidden',\n    backgroundImage: `${checker}, ${checker}`,\n    backgroundSize: '8px 8px',\n    boxShadow: insetRing,\n    display: 'flex',\n    flexDirection: 'column',\n    width: 28,\n  },\n  compareHalf: {\n    padding: 0,\n    borderStyle: 'none',\n    borderWidth: 0,\n    flex: '1',\n  },\n  compareRestore: {\n    cursor: 'pointer',\n  },\n  controls: {\n    gap: 10,\n    alignItems: 'center',\n    display: 'flex',\n  },\n  eyeDropper: {\n    padding: 0,\n    borderRadius: 8,\n    borderStyle: 'none',\n    borderWidth: 0,\n    flex: 'none',\n    alignItems: 'center',\n    backgroundColor: {\n      'default': cssVar.colorFillTertiary,\n      ':hover': cssVar.colorFillSecondary,\n    },\n    color: cssVar.colorText,\n    cursor: 'pointer',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    height: 28,\n    width: 28,\n  },\n  formatSelect: {\n    flex: 'none',\n    fontSize: '11px !important',\n    fontWeight: 600,\n    letterSpacing: '0.03em',\n    paddingInlineEnd: '6px !important',\n    paddingInlineStart: '8px !important',\n    width: '58px !important',\n  },\n  formatPopup: {\n    minWidth: 120,\n  },\n  formatHint: {\n    color: cssVar.colorTextTertiary,\n    fontSize: 11,\n    fontVariantNumeric: 'tabular-nums',\n    marginInlineStart: 'auto',\n    paddingInlineStart: 12,\n  },\n  hidden: {\n    backgroundColor: 'transparent !important',\n    backgroundImage: 'none !important',\n  },\n  hueTrack: {\n    borderRadius: '999px !important',\n    backgroundColor: 'transparent !important',\n    backgroundImage:\n      'linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00) !important',\n    boxShadow: `${insetRing} !important`,\n    height: '10px !important',\n  },\n  inputs: {\n    gap: 6,\n    alignItems: 'center',\n    display: 'flex',\n  },\n  panel: {\n    gap: 12,\n    display: 'flex',\n    flexDirection: 'column',\n    width: 240,\n  },\n  saturation: {\n    borderRadius: 10,\n    boxShadow: insetRing,\n    cursor: 'crosshair',\n    position: 'relative',\n    touchAction: 'none',\n    height: 150,\n  },\n  sliderThumb: {\n    borderColor: '#fff !important',\n    borderStyle: 'solid',\n    borderWidth: '2px !important',\n    backgroundColor: 'var(--lobe-color-picker-thumb, transparent) !important',\n    backgroundImage: 'none !important',\n    boxShadow: `${thumbRing} !important`,\n    height: '14px !important',\n    width: '14px !important',\n  },\n  sliders: {\n    flex: '1',\n    gap: 10,\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: 0,\n  },\n  swatchGrid: {\n    gap: 5,\n    display: 'grid',\n    gridTemplateColumns: 'repeat(9, minmax(0, 1fr))',\n  },\n  swatchHeader: {\n    gap: 2,\n    alignItems: 'center',\n    display: 'flex',\n    minHeight: 22,\n  },\n  swatchLabel: {\n    paddingInline: 2,\n    color: cssVar.colorTextTertiary,\n    fontSize: 11,\n    fontWeight: 500,\n  },\n  swatchItem: {\n    padding: 0,\n    backgroundPosition: '0 0, 4px 4px',\n    borderRadius: 6,\n    borderStyle: 'none',\n    borderWidth: 0,\n    overflow: 'hidden',\n    transition: 'box-shadow 120ms',\n    aspectRatio: '1',\n    backgroundImage: `${checker}, ${checker}`,\n    backgroundSize: '8px 8px',\n    boxShadow: {\n      'default': null,\n      \":is([aria-pressed='true'])\": `0 0 0 2px ${cssVar.colorBgElevated}, 0 0 0 3.5px currentcolor`,\n    },\n    cursor: 'pointer',\n    position: 'relative',\n  },\n  swatchSection: {\n    gap: 8,\n    borderBlockStartColor: cssVar.colorBorderSecondary,\n    borderBlockStartStyle: 'solid',\n    borderBlockStartWidth: 1,\n    display: 'flex',\n    flexDirection: 'column',\n    paddingBlockStart: 12,\n  },\n  swatchTab: {\n    borderRadius: 6,\n    borderStyle: 'none',\n    borderWidth: 0,\n    paddingInline: 8,\n    backgroundColor: {\n      'default': 'transparent',\n      \":is([aria-selected='true'])\": cssVar.colorFillTertiary,\n    },\n    color: {\n      'default': cssVar.colorTextTertiary,\n      \":is([aria-selected='true'])\": cssVar.colorText,\n    },\n    cursor: 'pointer',\n    fontSize: 11,\n    fontWeight: 500,\n    height: 22,\n  },\n  thumb: {\n    borderColor: '#fff',\n    borderRadius: '50%',\n    borderStyle: 'solid',\n    borderWidth: 2,\n    boxShadow: thumbRing,\n    boxSizing: 'border-box',\n    pointerEvents: 'none',\n    position: 'absolute',\n    transform: 'translate(-50%, -50%)',\n    height: 14,\n    width: 14,\n  },\n});\n\nexport const swatchStyles = stylex.create({\n  box: {\n    backgroundPosition: '0 0, 4px 4px',\n    flex: 'none',\n    overflow: 'hidden',\n    backgroundImage: `${checker}, ${checker}`,\n    backgroundSize: '8px 8px',\n    display: 'inline-flex',\n    position: 'relative',\n  },\n  fill: {\n    inset: 0,\n    borderRadius: 'inherit',\n    boxShadow: insetRing,\n    position: 'absolute',\n  },\n  slash: {\n    insetBlock: -4,\n    backgroundColor: cssVar.colorError,\n    insetInlineStart: 'calc(50% - 0.75px)',\n    position: 'absolute',\n    transform: 'rotate(45deg)',\n    width: 1.5,\n  },\n});\n\nexport const triggerStyles = stylex.create({\n  alpha: {\n    borderInlineStartColor: cssVar.colorBorderSecondary,\n    borderInlineStartStyle: 'solid',\n    borderInlineStartWidth: 1,\n    color: cssVar.colorTextTertiary,\n    fontVariantNumeric: 'tabular-nums',\n    paddingInlineStart: 8,\n  },\n  caret: {\n    flex: 'none',\n    color: cssVar.colorTextTertiary,\n    marginInlineStart: 'auto',\n  },\n  chip: {\n    borderRadius: 999,\n    borderStyle: 'none',\n    borderWidth: 0,\n    gap: 6,\n    transition: 'background-color 160ms',\n    alignItems: 'center',\n    backgroundColor: {\n      'default': cssVar.colorFillTertiary,\n      ':hover:not(:disabled)': cssVar.colorFillSecondary,\n    },\n    color: cssVar.colorText,\n    cursor: { 'default': 'pointer', ':disabled': 'not-allowed' },\n    display: 'inline-flex',\n    fontFamily: 'inherit',\n    opacity: { 'default': null, ':disabled': 0.5 },\n  },\n  chipSmall: { fontSize: 12, paddingInlineEnd: 8, paddingInlineStart: 4, height: 24 },\n  chipMiddle: { fontSize: 13, paddingInlineEnd: 11, paddingInlineStart: 6, height: 32 },\n  chipLarge: { fontSize: 14, paddingInlineEnd: 14, paddingInlineStart: 8, height: 40 },\n  empty: {\n    color: cssVar.colorTextTertiary,\n  },\n  field: {\n    gap: 8,\n    cursor: 'pointer',\n    width: 'auto',\n  },\n  fieldSmall: { paddingInlineEnd: 8, paddingInlineStart: 5, minWidth: 112 },\n  fieldMiddle: { paddingInlineEnd: 10, paddingInlineStart: 8, minWidth: 140 },\n  fieldLarge: { paddingInlineEnd: 12, paddingInlineStart: 10, minWidth: 168 },\n  swatch: {\n    padding: 0,\n    borderRadius: 8,\n    borderStyle: 'none',\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    cursor: { 'default': 'pointer', ':disabled': 'not-allowed' },\n    opacity: { 'default': null, ':disabled': 0.5 },\n  },\n  text: {\n    fontVariantNumeric: 'tabular-nums',\n    letterSpacing: '0.01em',\n  },\n});\n"],"mappings":"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"}

package/es/ColorPicker/type.d.mts

@@ -1,18 +1,33 @@
 import { InputSize } from "../Input/type.mjs";
 import { CSSProperties, ReactElement } from "react";
 //#region src/ColorPicker/type.d.ts
+export type ColorPickerFormat = 'hex' | 'rgb' | 'hsl';
+export type ColorPickerTrigger = 'swatch' | 'field' | 'chip';
 export interface ColorPickerProps {
   alpha?: boolean;
   children?: ReactElement;
   className?: string;
+  defaultFormat?: ColorPickerFormat;
   defaultValue?: string;
   disabled?: boolean;
   onChange?: (hex: string) => void;
   onChangeComplete?: (hex: string) => void;
   presets?: string[];
+  /**
+   * Show the colours committed in this session under a Recent tab. Defaults to `true`.
+   */
+  recent?: boolean;
+  /**
+   * Same as `trigger="field"`.
+   */
   showText?: boolean;
   size?: InputSize;
   style?: CSSProperties;
+  /**
+   * `swatch` (default) is a colour tile; `field` is an input-like control with the hex,
+   * alpha and a caret; `chip` is a rounded pill for toolbars.
+   */
+  trigger?: ColorPickerTrigger;
   value?: string;
 }
 //#endregion

package/es/ColorSwatches/ColorSwatches.mjs

@@ -4,17 +4,17 @@ import Icon from "../Icon/Icon.mjs";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import Center from "../Flex/Center.mjs";
 import { Tooltip } from "../Tooltip/Tooltip.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
 import { safeReadableColor } from "../utils/safeReadableColor.mjs";
-import ColorPicker from "../ColorPicker/ColorPicker.mjs";
 import { styles } from "./style.mjs";
+import CustomPicker from "./CustomPicker.mjs";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
 import { CheckIcon } from "lucide-react";
-import useControlledState from "use-merge-value";
 import chroma from "chroma-js";
 //#region src/ColorSwatches/ColorSwatches.tsx
-const ColorSwatches = ({ enableColorPicker, enableColorSwatches = true, defaultValue, value, style, colors, onChange, size = 24, shape = "circle", texts, ref, ...rest }) => {
+const ColorSwatches = ({ enableColorPicker, enableColorSwatches = true, defaultValue, value, style, colors, onChange, size = 24, shape = "circle", texts, renderPicker, ref, ...rest }) => {
 	const [active, setActive] = useControlledState(defaultValue, {
 		defaultValue,
 		onChange,
@@ -22,6 +22,20 @@ const ColorSwatches = ({ enableColorPicker, enableColorSwatches = true, defaultV
 	});
 	const cssVariables = useMemo(() => ({ "--color-swatches-size": `${size}px` }), [size]);
 	const isCustomActive = useMemo(() => active && active !== cssVar.colorPrimary && !colors.some((c) => c.color === active), [active, colors]);
+	const pickerProps = {
+		active: !!isCustomActive,
+		onChange: setActive,
+		presets: colors.map((c) => c.color),
+		shape,
+		size,
+		value: isCustomActive ? active : void 0
+	};
+	const defaultPicker = enableColorPicker && /* @__PURE__ */ jsx(CustomPicker, {
+		...pickerProps,
+		current: active,
+		label: texts?.custom || "Custom",
+		standalone: !enableColorSwatches
+	});
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		horizontal: true,
 		gap: 6,
@@ -62,26 +76,7 @@ const ColorSwatches = ({ enableColorPicker, enableColorSwatches = true, defaultV
 					})
 				})
 			}, c?.key || i);
-		}), enableColorPicker && /* @__PURE__ */ jsx(Tooltip, {
-			title: texts?.custom || "Custom",
-			children: /* @__PURE__ */ jsx("span", {
-				style: { display: "inline-flex" },
-				children: /* @__PURE__ */ jsx(ColorPicker, {
-					presets: enableColorSwatches ? void 0 : colors.map((c) => c.color),
-					value: isCustomActive ? active : void 0,
-					onChangeComplete: setActive,
-					children: /* @__PURE__ */ jsx("button", {
-						"aria-label": texts?.custom || "Custom",
-						type: "button",
-						...stylex.props(styles.picker, enableColorSwatches && styles.conic, !!isCustomActive && styles.activePicker),
-						style: {
-							background: enableColorSwatches ? void 0 : active,
-							borderRadius: shape === "circle" ? "50%" : cssVar.borderRadius
-						}
-					})
-				})
-			})
-		})]
+		}), enableColorPicker && (renderPicker ? renderPicker(pickerProps, defaultPicker) : defaultPicker)]
 	});
 };
 ColorSwatches.displayName = "ColorSwatches";

package/es/ColorSwatches/ColorSwatches.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSwatches.mjs","names":["useMergeState","Flexbox"],"sources":["../../src/ColorSwatches/ColorSwatches.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport chroma from 'chroma-js';\nimport { CheckIcon } from 'lucide-react';\nimport { type FC, useMemo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { ColorPicker } from '@/ColorPicker';\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport Tooltip from '@/Tooltip';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport { styles } from './style';\nimport type { ColorSwatchesProps } from './type';\n\nconst ColorSwatches: FC<ColorSwatchesProps> = ({\n  enableColorPicker,\n  enableColorSwatches = true,\n  defaultValue,\n  value,\n  style,\n  colors,\n  onChange,\n  size = 24,\n  shape = 'circle',\n  texts,\n  ref,\n  ...rest\n}) => {\n  const [active, setActive] = useMergeState(defaultValue, {\n    defaultValue,\n    onChange,\n    value,\n  });\n\n  // Convert size prop to CSS variable\n  const cssVariables = useMemo<Record<string, string>>(\n    () => ({\n      '--color-swatches-size': `${size}px`,\n    }),\n    [size],\n  );\n\n  const isCustomActive = useMemo(\n    () => active && active !== cssVar.colorPrimary && !colors.some((c) => c.color === active),\n    [active, colors],\n  );\n\n  return (\n    <Flexbox\n      horizontal\n      gap={6}\n      ref={ref}\n      style={{\n        ...cssVariables,\n        flexWrap: 'wrap',\n        ...style,\n      }}\n      {...rest}\n    >\n      {enableColorSwatches &&\n        colors.map((c, i) => {\n          const color = c.color || cssVar.colorPrimary;\n          const isActive = (!active && !c.color) || color === active;\n          // Check if color is transparent or CSS variable (which chroma can't parse)\n          const isTransparent =\n            c.color === 'transparent' ||\n            (c.color &&\n              !c.color.startsWith('var(') &&\n              (() => {\n                try {\n                  return chroma(c.color).alpha() === 0;\n                } catch {\n                  return false;\n                }\n              })());\n          return (\n            <Tooltip key={c?.key || i} title={c.title}>\n              <Center\n                {...stylex.props(\n                  styles.container,\n                  !!isTransparent && styles.transparent,\n                  isActive && styles.activeContainer,\n                )}\n                style={{\n                  background: isTransparent ? undefined : color,\n                  borderRadius: shape === 'circle' ? '50%' : cssVar.borderRadius,\n                }}\n                onClick={() => setActive(c.color || undefined)}\n              >\n                {isActive && (\n                  <Icon\n                    color={`color-mix(in srgb, ${safeReadableColor(color)} 33%, transparent)`}\n                    icon={CheckIcon}\n                    size={{ size: 14, strokeWidth: 4 }}\n                    style={{\n                      pointerEvents: 'none',\n                    }}\n                  />\n                )}\n              </Center>\n            </Tooltip>\n          );\n        })}\n      {enableColorPicker && (\n        <Tooltip title={texts?.custom || 'Custom'}>\n          <span style={{ display: 'inline-flex' }}>\n            <ColorPicker\n              presets={enableColorSwatches ? undefined : colors.map((c) => c.color)}\n              value={isCustomActive ? active : undefined}\n              onChangeComplete={setActive}\n            >\n              <button\n                aria-label={texts?.custom || 'Custom'}\n                type=\"button\"\n                {...stylex.props(\n                  styles.picker,\n                  enableColorSwatches && styles.conic,\n                  !!isCustomActive && styles.activePicker,\n                )}\n                style={{\n                  background: enableColorSwatches ? undefined : active,\n                  borderRadius: shape === 'circle' ? '50%' : cssVar.borderRadius,\n                }}\n              />\n            </ColorPicker>\n          </span>\n        </Tooltip>\n      )}\n    </Flexbox>\n  );\n};\n\nColorSwatches.displayName = 'ColorSwatches';\n\nexport default ColorSwatches;\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,MAAM,iBAAyC,EAC7C,mBACA,sBAAsB,MACtB,cACA,OACA,OACA,QACA,UACA,OAAO,IACP,QAAQ,UACR,OACA,KACA,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAaA,mBAAc,cAAc;EACtD;EACA;EACA;CACF,CAAC;CAGD,MAAM,eAAe,eAAuC,EAC1D,yBAAyB,GAAG,KAAK,IACnC,IAAI,CAAC,IAAI,CAAC;CACV,MAAM,iBAAiB,cAAc,UAAU,WAAW,OAAO,gBAAgB,CAAC,OAAO,MAAK,MAAK,EAAE,UAAU,MAAM,GAAG,CAAC,QAAQ,MAAM,CAAC;CACxI,OAAO,qBAACC,mBAAD;EAAS,YAAA;EAAW,KAAK;EAAQ;EAAK,OAAO;GAClD,GAAG;GACH,UAAU;GACV,GAAG;EACL;EAAG,GAAI;EAJA,UAAA,CAKF,uBAAuB,OAAO,KAAK,GAAG,MAAM;GAC7C,MAAM,QAAQ,EAAE,SAAS,OAAO;GAChC,MAAM,WAAW,CAAC,UAAU,CAAC,EAAE,SAAS,UAAU;GAElD,MAAM,gBAAgB,EAAE,UAAU,iBAAiB,EAAE,SAAS,CAAC,EAAE,MAAM,WAAW,MAAM,YAAY;IAClG,IAAI;KACF,OAAO,OAAO,EAAE,KAAK,CAAC,CAAC,MAAM,MAAM;IACrC,QAAQ;KACN,OAAO;IACT;GACF,EAAA,CAAG;GACH,OAAO,oBAAC,SAAD;IAA2B,OAAO,EAAE;IACnC,UAAA,oBAAC,QAAD;KAAQ,GAAI,OAAO,MAAM,OAAO,WAAW,CAAC,CAAC,iBAAiB,OAAO,aAAa,YAAY,OAAO,eAAe;KAAG,OAAO;MAClI,YAAY,gBAAgB,KAAA,IAAY;MACxC,cAAc,UAAU,WAAW,QAAQ,OAAO;KACpD;KAAG,eAAe,UAAU,EAAE,SAAS,KAAA,CAAS;KACvC,UAAA,YAAY,oBAAC,MAAD;MAAM,OAAO,sBAAsB,kBAAkB,KAAK,EAAE;MAAqB,MAAM;MAAW,MAAM;OACzH,MAAM;OACN,aAAa;MACf;MAAG,OAAO,EACR,eAAe,OACjB;KAAI,CAAA;IACQ,CAAA;GACD,GAZM,GAAG,OAAO,CAYhB;EACjB,CAAC,GACE,qBAAqB,oBAAC,SAAD;GAAS,OAAO,OAAO,UAAU;GACnD,UAAA,oBAAC,QAAD;IAAM,OAAO,EACf,SAAS,cACX;IACM,UAAA,oBAAC,aAAD;KAAa,SAAS,sBAAsB,KAAA,IAAY,OAAO,KAAI,MAAK,EAAE,KAAK;KAAG,OAAO,iBAAiB,SAAS,KAAA;KAAW,kBAAkB;KAC9I,UAAA,oBAAC,UAAD;MAAQ,cAAY,OAAO,UAAU;MAAU,MAAK;MAAS,GAAI,OAAO,MAAM,OAAO,QAAQ,uBAAuB,OAAO,OAAO,CAAC,CAAC,kBAAkB,OAAO,YAAY;MAAG,OAAO;OACrL,YAAY,sBAAsB,KAAA,IAAY;OAC9C,cAAc,UAAU,WAAW,QAAQ,OAAO;MACpD;KAAI,CAAA;IACW,CAAA;GACT,CAAA;EACC,CAAA,CACJ;;AACb;AACA,cAAc,cAAc"}
+{"version":3,"file":"ColorSwatches.mjs","names":["Flexbox"],"sources":["../../src/ColorSwatches/ColorSwatches.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport chroma from 'chroma-js';\nimport { CheckIcon } from 'lucide-react';\nimport { type FC, useMemo } from 'react';\n\nimport { Center, Flexbox } from '@/Flex';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport Icon from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport Tooltip from '@/Tooltip';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport CustomPicker from './CustomPicker';\nimport { styles } from './style';\nimport type { ColorSwatchesPickerRenderProps, ColorSwatchesProps } from './type';\n\nconst ColorSwatches: FC<ColorSwatchesProps> = ({\n  enableColorPicker,\n  enableColorSwatches = true,\n  defaultValue,\n  value,\n  style,\n  colors,\n  onChange,\n  size = 24,\n  shape = 'circle',\n  texts,\n  renderPicker,\n  ref,\n  ...rest\n}) => {\n  const [active, setActive] = useControlledState(defaultValue, {\n    defaultValue,\n    onChange,\n    value,\n  });\n\n  // Convert size prop to CSS variable\n  const cssVariables = useMemo<Record<string, string>>(\n    () => ({\n      '--color-swatches-size': `${size}px`,\n    }),\n    [size],\n  );\n\n  const isCustomActive = useMemo(\n    () => active && active !== cssVar.colorPrimary && !colors.some((c) => c.color === active),\n    [active, colors],\n  );\n\n  const pickerProps: ColorSwatchesPickerRenderProps = {\n    active: !!isCustomActive,\n    onChange: setActive,\n    presets: colors.map((c) => c.color),\n    shape,\n    size,\n    value: isCustomActive ? active : undefined,\n  };\n\n  const defaultPicker = enableColorPicker && (\n    <CustomPicker\n      {...pickerProps}\n      current={active}\n      label={texts?.custom || 'Custom'}\n      standalone={!enableColorSwatches}\n    />\n  );\n\n  return (\n    <Flexbox\n      horizontal\n      gap={6}\n      ref={ref}\n      style={{\n        ...cssVariables,\n        flexWrap: 'wrap',\n        ...style,\n      }}\n      {...rest}\n    >\n      {enableColorSwatches &&\n        colors.map((c, i) => {\n          const color = c.color || cssVar.colorPrimary;\n          const isActive = (!active && !c.color) || color === active;\n          // Check if color is transparent or CSS variable (which chroma can't parse)\n          const isTransparent =\n            c.color === 'transparent' ||\n            (c.color &&\n              !c.color.startsWith('var(') &&\n              (() => {\n                try {\n                  return chroma(c.color).alpha() === 0;\n                } catch {\n                  return false;\n                }\n              })());\n          return (\n            <Tooltip key={c?.key || i} title={c.title}>\n              <Center\n                {...stylex.props(\n                  styles.container,\n                  !!isTransparent && styles.transparent,\n                  isActive && styles.activeContainer,\n                )}\n                style={{\n                  background: isTransparent ? undefined : color,\n                  borderRadius: shape === 'circle' ? '50%' : cssVar.borderRadius,\n                }}\n                onClick={() => setActive(c.color || undefined)}\n              >\n                {isActive && (\n                  <Icon\n                    color={`color-mix(in srgb, ${safeReadableColor(color)} 33%, transparent)`}\n                    icon={CheckIcon}\n                    size={{ size: 14, strokeWidth: 4 }}\n                    style={{\n                      pointerEvents: 'none',\n                    }}\n                  />\n                )}\n              </Center>\n            </Tooltip>\n          );\n        })}\n      {enableColorPicker &&\n        (renderPicker ? renderPicker(pickerProps, defaultPicker) : defaultPicker)}\n    </Flexbox>\n  );\n};\n\nColorSwatches.displayName = 'ColorSwatches';\n\nexport default ColorSwatches;\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,MAAM,iBAAyC,EAC7C,mBACA,sBAAsB,MACtB,cACA,OACA,OACA,QACA,UACA,OAAO,IACP,QAAQ,UACR,OACA,cACA,KACA,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAa,mBAAmB,cAAc;EAC3D;EACA;EACA;CACF,CAAC;CAGD,MAAM,eAAe,eAAuC,EAC1D,yBAAyB,GAAG,KAAK,IACnC,IAAI,CAAC,IAAI,CAAC;CACV,MAAM,iBAAiB,cAAc,UAAU,WAAW,OAAO,gBAAgB,CAAC,OAAO,MAAK,MAAK,EAAE,UAAU,MAAM,GAAG,CAAC,QAAQ,MAAM,CAAC;CACxI,MAAM,cAA8C;EAClD,QAAQ,CAAC,CAAC;EACV,UAAU;EACV,SAAS,OAAO,KAAI,MAAK,EAAE,KAAK;EAChC;EACA;EACA,OAAO,iBAAiB,SAAS,KAAA;CACnC;CACA,MAAM,gBAAgB,qBAAqB,oBAAC,cAAD;EAAc,GAAI;EAAa,SAAS;EAAQ,OAAO,OAAO,UAAU;EAAU,YAAY,CAAC;CAAsB,CAAA;CAChK,OAAO,qBAACA,mBAAD;EAAS,YAAA;EAAW,KAAK;EAAQ;EAAK,OAAO;GAClD,GAAG;GACH,UAAU;GACV,GAAG;EACL;EAAG,GAAI;EAJA,UAAA,CAKF,uBAAuB,OAAO,KAAK,GAAG,MAAM;GAC7C,MAAM,QAAQ,EAAE,SAAS,OAAO;GAChC,MAAM,WAAW,CAAC,UAAU,CAAC,EAAE,SAAS,UAAU;GAElD,MAAM,gBAAgB,EAAE,UAAU,iBAAiB,EAAE,SAAS,CAAC,EAAE,MAAM,WAAW,MAAM,YAAY;IAClG,IAAI;KACF,OAAO,OAAO,EAAE,KAAK,CAAC,CAAC,MAAM,MAAM;IACrC,QAAQ;KACN,OAAO;IACT;GACF,EAAA,CAAG;GACH,OAAO,oBAAC,SAAD;IAA2B,OAAO,EAAE;IACnC,UAAA,oBAAC,QAAD;KAAQ,GAAI,OAAO,MAAM,OAAO,WAAW,CAAC,CAAC,iBAAiB,OAAO,aAAa,YAAY,OAAO,eAAe;KAAG,OAAO;MAClI,YAAY,gBAAgB,KAAA,IAAY;MACxC,cAAc,UAAU,WAAW,QAAQ,OAAO;KACpD;KAAG,eAAe,UAAU,EAAE,SAAS,KAAA,CAAS;KACvC,UAAA,YAAY,oBAAC,MAAD;MAAM,OAAO,sBAAsB,kBAAkB,KAAK,EAAE;MAAqB,MAAM;MAAW,MAAM;OACzH,MAAM;OACN,aAAa;MACf;MAAG,OAAO,EACR,eAAe,OACjB;KAAI,CAAA;IACQ,CAAA;GACD,GAZM,GAAG,OAAO,CAYhB;EACjB,CAAC,GACE,sBAAsB,eAAe,aAAa,aAAa,aAAa,IAAI,cAC1E;;AACb;AACA,cAAc,cAAc"}