@lobehub/ui 6.0.0-beta.7 → 6.0.0-beta.9

package/es/ColorPicker/Swatches.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Swatches.mjs","names":[],"sources":["../../src/ColorPicker/Swatches.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { useState } from 'react';\n\nimport { focusRing } from '@/styles/stylex/focusRing';\n\nimport { useRecentColors } from './recent';\nimport { styles, swatchStyles } from './style';\n\ntype Tab = 'presets' | 'recent';\n\nexport interface SwatchesProps {\n  current: string;\n  labels: { presets: string; recent: string; swatches: string };\n  onPick: (color: string) => void;\n  presets?: string[];\n  recent: boolean;\n}\n\nconst Swatches = ({ current, labels, onPick, presets = [], recent }: SwatchesProps) => {\n  const recentColors = useRecentColors();\n  const [tab, setTab] = useState<Tab>('presets');\n\n  const shownRecent = recent ? recentColors : [];\n  const hasPresets = presets.length > 0;\n  const hasRecent = shownRecent.length > 0;\n  if (!hasPresets && !hasRecent) return null;\n\n  const tabbed = hasPresets && hasRecent;\n  const active: Tab = tabbed ? tab : hasPresets ? 'presets' : 'recent';\n  const colors = active === 'recent' ? shownRecent : presets;\n  const currentKey = current.toLowerCase();\n\n  return (\n    <div {...stylex.props(styles.swatchSection)}>\n      {tabbed ? (\n        <div aria-label={labels.swatches} role=\"tablist\" {...stylex.props(styles.swatchHeader)}>\n          {(['presets', 'recent'] as const).map((item) => (\n            <button\n              aria-selected={active === item}\n              key={item}\n              role=\"tab\"\n              type=\"button\"\n              {...stylex.props(focusRing.info, styles.swatchTab)}\n              onClick={() => setTab(item)}\n            >\n              {labels[item]}\n            </button>\n          ))}\n        </div>\n      ) : (\n        <div {...stylex.props(styles.swatchHeader)}>\n          <span {...stylex.props(styles.swatchLabel)}>{labels[active]}</span>\n        </div>\n      )}\n      <div aria-label={labels[active]} role=\"group\" {...stylex.props(styles.swatchGrid)}>\n        {colors.map((color) => {\n          const key = color.toLowerCase();\n          const selected = key === currentKey || key === currentKey.slice(0, 7);\n          return (\n            <button\n              aria-label={color}\n              aria-pressed={selected}\n              key={color}\n              type=\"button\"\n              {...stylex.props(focusRing.info, styles.swatchItem)}\n              style={{ color }}\n              onClick={() => onPick(color)}\n            >\n              <span {...stylex.props(swatchStyles.fill)} style={{ background: color }} />\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default Swatches;\n"],"mappings":";;;;;;;;AAmBA,MAAM,YAAY,EAChB,SACA,QACA,QACA,UAAU,CAAC,GACX,aACmB;CACnB,MAAM,eAAe,gBAAgB;CACrC,MAAM,CAAC,KAAK,UAAU,SAAc,SAAS;CAC7C,MAAM,cAAc,SAAS,eAAe,CAAC;CAC7C,MAAM,aAAa,QAAQ,SAAS;CACpC,MAAM,YAAY,YAAY,SAAS;CACvC,IAAI,CAAC,cAAc,CAAC,WAAW,OAAO;CACtC,MAAM,SAAS,cAAc;CAC7B,MAAM,SAAc,SAAS,MAAM,aAAa,YAAY;CAC5D,MAAM,SAAS,WAAW,WAAW,cAAc;CACnD,MAAM,aAAa,QAAQ,YAAY;CACvC,OAAO,qBAAC,OAAD;EAAK,GAAI,OAAO,MAAM,OAAO,aAAa;EAA1C,UAAA,CACF,SAAS,oBAAC,OAAD;GAAK,cAAY,OAAO;GAAU,MAAK;GAAU,GAAI,OAAO,MAAM,OAAO,YAAY;GACzF,UAAA,CAAC,WAAW,QAAQ,CAAC,CAAW,KAAI,SAAQ,oBAAC,UAAD;IAAQ,iBAAe,WAAW;IAAiB,MAAK;IAAM,MAAK;IAAS,GAAI,OAAO,MAAM,UAAU,MAAM,OAAO,SAAS;IAAG,eAAe,OAAO,IAAI;IACnM,UAAA,OAAO;GACF,GAFiF,IAEjF,CAAC;EACR,CAAA,IAAI,oBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,OAAO,YAAY;GAChD,UAAA,oBAAC,QAAD;IAAM,GAAI,OAAO,MAAM,OAAO,WAAW;IAAI,UAAA,OAAO;GAAc,CAAA;EAC/D,CAAA,GACP,oBAAC,OAAD;GAAK,cAAY,OAAO;GAAS,MAAK;GAAQ,GAAI,OAAO,MAAM,OAAO,UAAU;GAC7E,UAAA,OAAO,KAAI,UAAS;IACrB,MAAM,MAAM,MAAM,YAAY;IAC9B,MAAM,WAAW,QAAQ,cAAc,QAAQ,WAAW,MAAM,GAAG,CAAC;IACpE,OAAO,oBAAC,UAAD;KAAQ,cAAY;KAAO,gBAAc;KAAsB,MAAK;KAAS,GAAI,OAAO,MAAM,UAAU,MAAM,OAAO,UAAU;KAAG,OAAO,EAC9I,MACF;KAAG,eAAe,OAAO,KAAK;KACxB,UAAA,oBAAC,QAAD;MAAM,GAAI,OAAO,MAAM,aAAa,IAAI;MAAG,OAAO,EACpD,YAAY,MACd;KAAI,CAAA;IACM,GANmD,KAMnD;GACd,CAAC;EACI,CAAA,CACF;;AACT"}

package/es/ColorPicker/Trigger.mjs

@@ -0,0 +1,112 @@
+"use client";
+import { styleProps } from "../styles/stylex/props.mjs";
+import { focusRing } from "../styles/stylex/focusRing.mjs";
+import { useThemeMode } from "../styles/theme/scope.mjs";
+import { inputRootStyles } from "../Input/style.mjs";
+import { triggerStyles } from "./style.mjs";
+import Swatch from "./Swatch.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { ChevronDown } from "lucide-react";
+//#region src/ColorPicker/Trigger.tsx
+const SWATCH_TILE = {
+	large: 32,
+	middle: 28,
+	small: 24
+};
+const SWATCH_FIELD = {
+	large: 20,
+	middle: 16,
+	small: 14
+};
+const SWATCH_CHIP = {
+	large: 26,
+	middle: 20,
+	small: 16
+};
+const fieldSize = {
+	large: triggerStyles.fieldLarge,
+	middle: triggerStyles.fieldMiddle,
+	small: triggerStyles.fieldSmall
+};
+const chipSize = {
+	large: triggerStyles.chipLarge,
+	middle: triggerStyles.chipMiddle,
+	small: triggerStyles.chipSmall
+};
+const ColorTrigger = ({ alpha, className, emptyLabel, hex, label, size, style, variant, ...rest }) => {
+	const { isDarkMode } = useThemeMode();
+	const empty = !hex;
+	const common = {
+		"aria-label": label,
+		"type": "button",
+		...rest
+	};
+	if (variant === "swatch") {
+		const tile = SWATCH_TILE[size];
+		return /* @__PURE__ */ jsx("button", {
+			...common,
+			...styleProps([focusRing.info, triggerStyles.swatch], className, {
+				height: tile,
+				width: tile,
+				...style
+			}),
+			children: /* @__PURE__ */ jsx(Swatch, {
+				color: hex,
+				radius: 8,
+				size: tile
+			})
+		});
+	}
+	const text = empty ? /* @__PURE__ */ jsx("span", {
+		...stylex.props(triggerStyles.empty),
+		children: emptyLabel
+	}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		...stylex.props(triggerStyles.text),
+		children: hex.slice(0, 7).toUpperCase()
+	}), alpha !== void 0 && /* @__PURE__ */ jsxs("span", {
+		...stylex.props(triggerStyles.text, triggerStyles.alpha),
+		children: [Math.round(alpha * 100), "%"]
+	})] });
+	if (variant === "chip") return /* @__PURE__ */ jsxs("button", {
+		...common,
+		...styleProps([
+			focusRing.info,
+			triggerStyles.chip,
+			chipSize[size]
+		], className, style),
+		children: [/* @__PURE__ */ jsx(Swatch, {
+			color: hex,
+			radius: "50%",
+			size: SWATCH_CHIP[size]
+		}), text]
+	});
+	const fieldSwatch = SWATCH_FIELD[size];
+	return /* @__PURE__ */ jsxs("button", {
+		...common,
+		...styleProps([
+			...inputRootStyles({
+				size,
+				variant: isDarkMode ? "filled" : "outlined"
+			}),
+			triggerStyles.field,
+			fieldSize[size]
+		], className, style),
+		children: [
+			/* @__PURE__ */ jsx(Swatch, {
+				color: hex,
+				radius: Math.round(fieldSwatch / 4),
+				size: fieldSwatch
+			}),
+			text,
+			/* @__PURE__ */ jsx(ChevronDown, {
+				...stylex.props(triggerStyles.caret),
+				size: 14
+			})
+		]
+	});
+};
+//#endregion
+export { ColorTrigger as default };
+
+//# sourceMappingURL=Trigger.mjs.map

package/es/ColorPicker/Trigger.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Trigger.mjs","names":[],"sources":["../../src/ColorPicker/Trigger.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { ChevronDown } from 'lucide-react';\nimport type { ComponentPropsWithRef } from 'react';\n\nimport { inputRootStyles } from '@/Input/style';\nimport type { InputSize } from '@/Input/type';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { triggerStyles } from './style';\nimport Swatch from './Swatch';\nimport type { ColorPickerTrigger } from './type';\n\nconst SWATCH_TILE: Record<InputSize, number> = { large: 32, middle: 28, small: 24 };\nconst SWATCH_FIELD: Record<InputSize, number> = { large: 20, middle: 16, small: 14 };\nconst SWATCH_CHIP: Record<InputSize, number> = { large: 26, middle: 20, small: 16 };\n\nconst fieldSize = {\n  large: triggerStyles.fieldLarge,\n  middle: triggerStyles.fieldMiddle,\n  small: triggerStyles.fieldSmall,\n};\nconst chipSize = {\n  large: triggerStyles.chipLarge,\n  middle: triggerStyles.chipMiddle,\n  small: triggerStyles.chipSmall,\n};\n\nexport interface ColorTriggerProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {\n  alpha?: number;\n  emptyLabel: string;\n  hex: string;\n  label: string;\n  size: InputSize;\n  variant: ColorPickerTrigger;\n}\n\nconst ColorTrigger = ({\n  alpha,\n  className,\n  emptyLabel,\n  hex,\n  label,\n  size,\n  style,\n  variant,\n  ...rest\n}: ColorTriggerProps) => {\n  const { isDarkMode } = useThemeMode();\n  const empty = !hex;\n  const common = { 'aria-label': label, 'type': 'button' as const, ...rest };\n\n  if (variant === 'swatch') {\n    const tile = SWATCH_TILE[size];\n    return (\n      <button\n        {...common}\n        {...styleProps([focusRing.info, triggerStyles.swatch], className, {\n          height: tile,\n          width: tile,\n          ...style,\n        })}\n      >\n        <Swatch color={hex} radius={8} size={tile} />\n      </button>\n    );\n  }\n\n  const text = empty ? (\n    <span {...stylex.props(triggerStyles.empty)}>{emptyLabel}</span>\n  ) : (\n    <>\n      <span {...stylex.props(triggerStyles.text)}>{hex.slice(0, 7).toUpperCase()}</span>\n      {alpha !== undefined && (\n        <span {...stylex.props(triggerStyles.text, triggerStyles.alpha)}>\n          {Math.round(alpha * 100)}%\n        </span>\n      )}\n    </>\n  );\n\n  if (variant === 'chip') {\n    return (\n      <button\n        {...common}\n        {...styleProps([focusRing.info, triggerStyles.chip, chipSize[size]], className, style)}\n      >\n        <Swatch color={hex} radius=\"50%\" size={SWATCH_CHIP[size]} />\n        {text}\n      </button>\n    );\n  }\n\n  const fieldSwatch = SWATCH_FIELD[size];\n  return (\n    <button\n      {...common}\n      {...styleProps(\n        [\n          ...inputRootStyles({ size, variant: isDarkMode ? 'filled' : 'outlined' }),\n          triggerStyles.field,\n          fieldSize[size],\n        ],\n        className,\n        style,\n      )}\n    >\n      <Swatch color={hex} radius={Math.round(fieldSwatch / 4)} size={fieldSwatch} />\n      {text}\n      <ChevronDown {...stylex.props(triggerStyles.caret)} size={14} />\n    </button>\n  );\n};\n\nexport default ColorTrigger;\n"],"mappings":";;;;;;;;;;;AAaA,MAAM,cAAyC;CAC7C,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AACA,MAAM,eAA0C;CAC9C,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AACA,MAAM,cAAyC;CAC7C,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AACA,MAAM,YAAY;CAChB,OAAO,cAAc;CACrB,QAAQ,cAAc;CACtB,OAAO,cAAc;AACvB;AACA,MAAM,WAAW;CACf,OAAO,cAAc;CACrB,QAAQ,cAAc;CACtB,OAAO,cAAc;AACvB;AASA,MAAM,gBAAgB,EACpB,OACA,WACA,YACA,KACA,OACA,MACA,OACA,SACA,GAAG,WACoB;CACvB,MAAM,EACJ,eACE,aAAa;CACjB,MAAM,QAAQ,CAAC;CACf,MAAM,SAAS;EACb,cAAc;EACd,QAAQ;EACR,GAAG;CACL;CACA,IAAI,YAAY,UAAU;EACxB,MAAM,OAAO,YAAY;EACzB,OAAO,oBAAC,UAAD;GAAQ,GAAI;GAAQ,GAAI,WAAW,CAAC,UAAU,MAAM,cAAc,MAAM,GAAG,WAAW;IAC3F,QAAQ;IACR,OAAO;IACP,GAAG;GACL,CAAC;GACG,UAAA,oBAAC,QAAD;IAAQ,OAAO;IAAK,QAAQ;IAAG,MAAM;GAAO,CAAA;EACtC,CAAA;CACZ;CACA,MAAM,OAAO,QAAQ,oBAAC,QAAD;EAAM,GAAI,OAAO,MAAM,cAAc,KAAK;EAAI,UAAA;CAAiB,CAAA,IAAI,qBAAA,UAAA,EAAA,UAAA,CACpF,oBAAC,QAAD;EAAM,GAAI,OAAO,MAAM,cAAc,IAAI;EAAI,UAAA,IAAI,MAAM,GAAG,CAAC,CAAC,CAAC,YAAY;CAAQ,CAAA,GAChF,UAAU,KAAA,KAAa,qBAAC,QAAD;EAAM,GAAI,OAAO,MAAM,cAAc,MAAM,cAAc,KAAK;EAA9D,UAAA,CACnB,KAAK,MAAM,QAAQ,GAAG,GAAE,GACrB;CACR,CAAA,CAAA,EAAA,CAAA;CACJ,IAAI,YAAY,QACd,OAAO,qBAAC,UAAD;EAAQ,GAAI;EAAQ,GAAI,WAAW;GAAC,UAAU;GAAM,cAAc;GAAM,SAAS;EAAK,GAAG,WAAW,KAAK;EAAzG,UAAA,CACH,oBAAC,QAAD;GAAQ,OAAO;GAAK,QAAO;GAAM,MAAM,YAAY;EAAQ,CAAA,GAC1D,IACK;;CAEZ,MAAM,cAAc,aAAa;CACjC,OAAO,qBAAC,UAAD;EAAQ,GAAI;EAAQ,GAAI,WAAW;GAAC,GAAG,gBAAgB;IAC5D;IACA,SAAS,aAAa,WAAW;GACnC,CAAC;GAAG,cAAc;GAAO,UAAU;EAAK,GAAG,WAAW,KAAK;EAHpD,UAAA;GAIH,oBAAC,QAAD;IAAQ,OAAO;IAAK,QAAQ,KAAK,MAAM,cAAc,CAAC;IAAG,MAAM;GAAc,CAAA;GAC5E;GACD,oBAAC,aAAD;IAAa,GAAI,OAAO,MAAM,cAAc,KAAK;IAAG,MAAM;GAAK,CAAA;EACzD;;AACZ"}

package/es/ColorPicker/color.mjs

@@ -22,7 +22,31 @@ const normalizeHexInput = (input) => {
 	if (!/^([\da-f]{3}|[\da-f]{6}|[\da-f]{8})$/i.test(raw)) return null;
 	return `#${raw.toLowerCase()}`;
 };
+const toRgb = ({ h, s, v }) => {
+	const [r, g, b] = chroma.hsv(h, s, v).rgb();
+	return [
+		r,
+		g,
+		b
+	];
+};
+const toHsl = (hsva) => {
+	const [h, s, l] = chroma.hsv(hsva.h, hsva.s, hsva.v).hsl();
+	return [
+		Math.round(Number.isNaN(h) ? hsva.h : h),
+		Math.round(s * 100),
+		Math.round(l * 100)
+	];
+};
+const fromRgb = ([r, g, b], current) => ({
+	...parseColor(chroma.rgb(r, g, b).hex(), current.h),
+	a: current.a
+});
+const fromHsl = ([h, s, l], current) => ({
+	...parseColor(chroma.hsl(h, s / 100, l / 100).hex(), h),
+	a: current.a
+});
 //#endregion
-export { formatColor, normalizeHexInput, parseColor };
+export { formatColor, fromHsl, fromRgb, normalizeHexInput, parseColor, toHsl, toRgb };
 
 //# sourceMappingURL=color.mjs.map

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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"}