@zendir/ui 0.4.1 → 0.6.0

package/dist/react/core/widgets/ColorPickerPanel.js

@@ -1,293 +1,304 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo, useState, useRef, useEffect } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
-import { PRESET_COLORS } from "../../context/DisplaySettingsContext.js";
 import { AstroIcon } from "../display/AstroIcon.js";
-const COLOR_SWATCHES = Object.entries(PRESET_COLORS).map(([key, color]) => ({
-  key,
-  color,
-  label: key.charAt(0).toUpperCase() + key.slice(1)
+import { PRESET_COLORS } from "../../context/DisplaySettingsContext.js";
+import { memo, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/widgets/ColorPickerPanel.tsx
+/**
+* @zendir/ui - ColorPickerPanel Component
+*
+* Compact color picker with preset colors and target selector.
+* Used in AppBar for selecting accent and glass tint colors.
+*
+* Features:
+* - Preset color swatches grid
+* - Target toggle: Both | Accent Only | Glass Only
+* - Popover design with smooth animations
+* - Keyboard accessible
+*
+* @example
+* ```tsx
+* <ColorPickerPanel
+*   accentColor="#8b5cf6"
+*   glassTint="#8b5cf6"
+*   colorTarget="both"
+*   onAccentChange={setAccentColor}
+*   onGlassTintChange={setGlassTint}
+*   onTargetChange={setColorTarget}
+* />
+* ```
+*/
+var COLOR_SWATCHES = Object.entries(PRESET_COLORS).map(([key, color]) => ({
+	key,
+	color,
+	label: key.charAt(0).toUpperCase() + key.slice(1)
 }));
-const TargetToggle = memo(function TargetToggle2({ value, onChange, tokens }) {
-  const targets = [
-    { key: "both", label: "Both" },
-    { key: "accent", label: "Accent" },
-    { key: "glass", label: "Glass" }
-  ];
-  return /* @__PURE__ */ jsx("div", { style: {
-    display: "flex",
-    gap: 2,
-    padding: 2,
-    backgroundColor: "rgba(255,255,255,0.05)",
-    borderRadius: tokens.borderRadius.sm
-  }, children: targets.map(({ key, label }) => /* @__PURE__ */ jsx(
-    "button",
-    {
-      onClick: () => onChange(key),
-      style: {
-        flex: 1,
-        padding: "4px 8px",
-        border: "none",
-        borderRadius: tokens.borderRadius.sm - 2,
-        backgroundColor: value === key ? "rgba(255,255,255,0.15)" : "transparent",
-        color: value === key ? tokens.colors.text.primary : tokens.colors.text.tertiary,
-        fontSize: "0.625rem",
-        // 10px in rem
-        fontWeight: value === key ? 600 : 400,
-        cursor: "pointer",
-        transition: "all 0.15s ease"
-      },
-      children: label
-    },
-    key
-  )) });
+var TargetToggle = memo(function TargetToggle({ value, onChange, tokens }) {
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "flex",
+			gap: 2,
+			padding: 2,
+			backgroundColor: "rgba(255,255,255,0.05)",
+			borderRadius: tokens.borderRadius.sm
+		},
+		children: [
+			{
+				key: "both",
+				label: "Both"
+			},
+			{
+				key: "accent",
+				label: "Accent"
+			},
+			{
+				key: "glass",
+				label: "Glass"
+			}
+		].map(({ key, label }) => /* @__PURE__ */ jsx("button", {
+			onClick: () => onChange(key),
+			style: {
+				flex: 1,
+				padding: "4px 8px",
+				border: "none",
+				borderRadius: tokens.borderRadius.sm - 2,
+				backgroundColor: value === key ? "rgba(255,255,255,0.15)" : "transparent",
+				color: value === key ? tokens.colors.text.primary : tokens.colors.text.tertiary,
+				fontSize: "0.625rem",
+				fontWeight: value === key ? 600 : 400,
+				cursor: "pointer",
+				transition: "all 0.15s ease"
+			},
+			children: label
+		}, key))
+	});
 });
-const ColorGrid = memo(function ColorGrid2({ selectedColor, onSelect, tokens: _tokens }) {
-  return /* @__PURE__ */ jsx("div", { style: {
-    display: "grid",
-    gridTemplateColumns: "repeat(6, 1fr)",
-    gap: 4
-  }, children: COLOR_SWATCHES.map(({ key, color, label }) => {
-    const isSelected = selectedColor.toLowerCase() === color.toLowerCase();
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: () => onSelect(color),
-        "aria-label": `Select ${label}`,
-        title: label,
-        style: {
-          width: 24,
-          height: 24,
-          padding: 0,
-          border: isSelected ? "2px solid white" : "1px solid rgba(255,255,255,0.2)",
-          borderRadius: 4,
-          backgroundColor: color,
-          cursor: "pointer",
-          transition: "all 0.15s ease",
-          transform: isSelected ? "scale(1.1)" : "scale(1)",
-          boxShadow: isSelected ? `0 0 8px ${color}80` : "none"
-        },
-        onMouseEnter: (e) => {
-          if (!isSelected) {
-            e.currentTarget.style.transform = "scale(1.15)";
-            e.currentTarget.style.borderColor = "rgba(255,255,255,0.5)";
-          }
-        },
-        onMouseLeave: (e) => {
-          e.currentTarget.style.transform = isSelected ? "scale(1.1)" : "scale(1)";
-          e.currentTarget.style.borderColor = isSelected ? "white" : "rgba(255,255,255,0.2)";
-        }
-      },
-      key
-    );
-  }) });
+var ColorGrid = memo(function ColorGrid({ selectedColor, onSelect, tokens: _tokens }) {
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "grid",
+			gridTemplateColumns: "repeat(6, 1fr)",
+			gap: 4
+		},
+		children: COLOR_SWATCHES.map(({ key, color, label }) => {
+			const isSelected = selectedColor.toLowerCase() === color.toLowerCase();
+			return /* @__PURE__ */ jsx("button", {
+				onClick: () => onSelect(color),
+				"aria-label": `Select ${label}`,
+				title: label,
+				style: {
+					width: 24,
+					height: 24,
+					padding: 0,
+					border: isSelected ? "2px solid white" : "1px solid rgba(255,255,255,0.2)",
+					borderRadius: 4,
+					backgroundColor: color,
+					cursor: "pointer",
+					transition: "all 0.15s ease",
+					transform: isSelected ? "scale(1.1)" : "scale(1)",
+					boxShadow: isSelected ? `0 0 8px ${color}80` : "none"
+				},
+				onMouseEnter: (e) => {
+					if (!isSelected) {
+						e.currentTarget.style.transform = "scale(1.15)";
+						e.currentTarget.style.borderColor = "rgba(255,255,255,0.5)";
+					}
+				},
+				onMouseLeave: (e) => {
+					e.currentTarget.style.transform = isSelected ? "scale(1.1)" : "scale(1)";
+					e.currentTarget.style.borderColor = isSelected ? "white" : "rgba(255,255,255,0.2)";
+				}
+			}, key);
+		})
+	});
 });
-const ColorPickerPanel = memo(function ColorPickerPanel2({
-  accentColor,
-  glassTint,
-  colorTarget,
-  onAccentChange,
-  onGlassTintChange,
-  onTargetChange,
-  onColorSelect,
-  compact = true,
-  className = ""
-}) {
-  const { tokens, theme } = useTheme();
-  const [isOpen, setIsOpen] = useState(false);
-  const panelRef = useRef(null);
-  const triggerRef = useRef(null);
-  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-  const displayColor = colorTarget === "glass" ? glassTint : accentColor;
-  const handleColorSelect = (color) => {
-    if (onColorSelect) {
-      onColorSelect(color);
-    } else {
-      switch (colorTarget) {
-        case "accent":
-          onAccentChange(color);
-          break;
-        case "glass":
-          onGlassTintChange(color);
-          break;
-        case "both":
-        default:
-          onAccentChange(color);
-          onGlassTintChange(color);
-          break;
-      }
-    }
-  };
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (panelRef.current && !panelRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
-        setIsOpen(false);
-      }
-    };
-    if (isOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => document.removeEventListener("mousedown", handleClickOutside);
-    }
-  }, [isOpen]);
-  useEffect(() => {
-    const handleEscape = (event) => {
-      var _a;
-      if (event.key === "Escape") {
-        setIsOpen(false);
-        (_a = triggerRef.current) == null ? void 0 : _a.focus();
-      }
-    };
-    if (isOpen) {
-      document.addEventListener("keydown", handleEscape);
-      return () => document.removeEventListener("keydown", handleEscape);
-    }
-  }, [isOpen]);
-  if (compact) {
-    return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, className, children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          ref: triggerRef,
-          onClick: () => setIsOpen(!isOpen),
-          "aria-label": "Open color picker",
-          "aria-expanded": isOpen,
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: 36,
-            height: 36,
-            padding: 0,
-            border: "2px solid rgba(255,255,255,0.3)",
-            borderRadius: tokens.borderRadius.md,
-            backgroundColor: displayColor,
-            cursor: "pointer",
-            transition: "all 0.15s ease",
-            boxShadow: isOpen ? `0 0 12px ${displayColor}60` : "none"
-          },
-          onMouseEnter: (e) => {
-            e.currentTarget.style.borderColor = "rgba(255,255,255,0.5)";
-            e.currentTarget.style.transform = "scale(1.05)";
-          },
-          onMouseLeave: (e) => {
-            e.currentTarget.style.borderColor = "rgba(255,255,255,0.3)";
-            e.currentTarget.style.transform = "scale(1)";
-          },
-          children: /* @__PURE__ */ jsx(AstroIcon, { name: "palette", size: 16, color: "white" })
-        }
-      ),
-      isOpen && /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: panelRef,
-          style: {
-            position: "absolute",
-            top: "100%",
-            right: 0,
-            marginTop: 8,
-            padding: 12,
-            backgroundColor: tokens.colors.background.elevated,
-            border: `1px solid ${tokens.colors.border.default}`,
-            borderRadius: tokens.borderRadius.lg,
-            boxShadow: tokens.shadows.lg,
-            zIndex: 1e3,
-            minWidth: 180
-          },
-          children: [
-            isTransparentTheme && /* @__PURE__ */ jsxs("div", { style: { marginBottom: 12 }, children: [
-              /* @__PURE__ */ jsx("div", { style: {
-                fontSize: "0.625rem",
-                // 10px in rem
-                fontWeight: 500,
-                color: tokens.colors.text.tertiary,
-                marginBottom: 6,
-                textTransform: "uppercase",
-                letterSpacing: "0.05em"
-              }, children: "Apply to" }),
-              /* @__PURE__ */ jsx(
-                TargetToggle,
-                {
-                  value: colorTarget,
-                  onChange: onTargetChange,
-                  tokens
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("div", { style: {
-                fontSize: "0.625rem",
-                // 10px in rem
-                fontWeight: 500,
-                color: tokens.colors.text.tertiary,
-                marginBottom: 6,
-                textTransform: "uppercase",
-                letterSpacing: "0.05em"
-              }, children: colorTarget === "glass" ? "Glass Tint" : colorTarget === "accent" ? "Accent Color" : "Color" }),
-              /* @__PURE__ */ jsx(
-                ColorGrid,
-                {
-                  selectedColor: displayColor,
-                  onSelect: handleColorSelect,
-                  tokens
-                }
-              )
-            ] }),
-            isTransparentTheme && colorTarget === "both" && accentColor !== glassTint && /* @__PURE__ */ jsxs("div", { style: {
-              marginTop: 12,
-              paddingTop: 12,
-              borderTop: `1px solid ${tokens.colors.border.muted}`,
-              display: "flex",
-              gap: 8,
-              fontSize: "0.625rem",
-              // 10px in rem
-              color: tokens.colors.text.tertiary
-            }, children: [
-              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
-                /* @__PURE__ */ jsx("span", { style: {
-                  width: 12,
-                  height: 12,
-                  borderRadius: 2,
-                  backgroundColor: accentColor,
-                  border: "1px solid rgba(255,255,255,0.2)"
-                } }),
-                "Accent"
-              ] }),
-              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
-                /* @__PURE__ */ jsx("span", { style: {
-                  width: 12,
-                  height: 12,
-                  borderRadius: 2,
-                  backgroundColor: glassTint,
-                  border: "1px solid rgba(255,255,255,0.2)"
-                } }),
-                "Glass"
-              ] })
-            ] })
-          ]
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className, style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
-    isTransparentTheme && /* @__PURE__ */ jsx(
-      TargetToggle,
-      {
-        value: colorTarget,
-        onChange: onTargetChange,
-        tokens
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ColorGrid,
-      {
-        selectedColor: displayColor,
-        onSelect: handleColorSelect,
-        tokens
-      }
-    )
-  ] });
+var ColorPickerPanel = memo(function ColorPickerPanel({ accentColor, glassTint, colorTarget, onAccentChange, onGlassTintChange, onTargetChange, onColorSelect, compact = true, className = "" }) {
+	const { tokens, theme } = useTheme();
+	const [isOpen, setIsOpen] = useState(false);
+	const panelRef = useRef(null);
+	const triggerRef = useRef(null);
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	const displayColor = colorTarget === "glass" ? glassTint : accentColor;
+	const handleColorSelect = (color) => {
+		if (onColorSelect) onColorSelect(color);
+		else switch (colorTarget) {
+			case "accent":
+				onAccentChange(color);
+				break;
+			case "glass":
+				onGlassTintChange(color);
+				break;
+			default:
+				onAccentChange(color);
+				onGlassTintChange(color);
+				break;
+		}
+	};
+	useEffect(() => {
+		const handleClickOutside = (event) => {
+			if (panelRef.current && !panelRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) setIsOpen(false);
+		};
+		if (isOpen) {
+			document.addEventListener("mousedown", handleClickOutside);
+			return () => document.removeEventListener("mousedown", handleClickOutside);
+		}
+	}, [isOpen]);
+	useEffect(() => {
+		const handleEscape = (event) => {
+			if (event.key === "Escape") {
+				setIsOpen(false);
+				triggerRef.current?.focus();
+			}
+		};
+		if (isOpen) {
+			document.addEventListener("keydown", handleEscape);
+			return () => document.removeEventListener("keydown", handleEscape);
+		}
+	}, [isOpen]);
+	if (compact) return /* @__PURE__ */ jsxs("div", {
+		style: { position: "relative" },
+		className,
+		children: [/* @__PURE__ */ jsx("button", {
+			ref: triggerRef,
+			onClick: () => setIsOpen(!isOpen),
+			"aria-label": "Open color picker",
+			"aria-expanded": isOpen,
+			style: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				width: 36,
+				height: 36,
+				padding: 0,
+				border: "2px solid rgba(255,255,255,0.3)",
+				borderRadius: tokens.borderRadius.md,
+				backgroundColor: displayColor,
+				cursor: "pointer",
+				transition: "all 0.15s ease",
+				boxShadow: isOpen ? `0 0 12px ${displayColor}60` : "none"
+			},
+			onMouseEnter: (e) => {
+				e.currentTarget.style.borderColor = "rgba(255,255,255,0.5)";
+				e.currentTarget.style.transform = "scale(1.05)";
+			},
+			onMouseLeave: (e) => {
+				e.currentTarget.style.borderColor = "rgba(255,255,255,0.3)";
+				e.currentTarget.style.transform = "scale(1)";
+			},
+			children: /* @__PURE__ */ jsx(AstroIcon, {
+				name: "palette",
+				size: 16,
+				color: "white"
+			})
+		}), isOpen && /* @__PURE__ */ jsxs("div", {
+			ref: panelRef,
+			style: {
+				position: "absolute",
+				top: "100%",
+				right: 0,
+				marginTop: 8,
+				padding: 12,
+				backgroundColor: tokens.colors.background.elevated,
+				border: `1px solid ${tokens.colors.border.default}`,
+				borderRadius: tokens.borderRadius.lg,
+				boxShadow: tokens.shadows.lg,
+				zIndex: 1e3,
+				minWidth: 180
+			},
+			children: [
+				isTransparentTheme && /* @__PURE__ */ jsxs("div", {
+					style: { marginBottom: 12 },
+					children: [/* @__PURE__ */ jsx("div", {
+						style: {
+							fontSize: "0.625rem",
+							fontWeight: 500,
+							color: tokens.colors.text.tertiary,
+							marginBottom: 6,
+							textTransform: "uppercase",
+							letterSpacing: "0.05em"
+						},
+						children: "Apply to"
+					}), /* @__PURE__ */ jsx(TargetToggle, {
+						value: colorTarget,
+						onChange: onTargetChange,
+						tokens
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: "0.625rem",
+						fontWeight: 500,
+						color: tokens.colors.text.tertiary,
+						marginBottom: 6,
+						textTransform: "uppercase",
+						letterSpacing: "0.05em"
+					},
+					children: colorTarget === "glass" ? "Glass Tint" : colorTarget === "accent" ? "Accent Color" : "Color"
+				}), /* @__PURE__ */ jsx(ColorGrid, {
+					selectedColor: displayColor,
+					onSelect: handleColorSelect,
+					tokens
+				})] }),
+				isTransparentTheme && colorTarget === "both" && accentColor !== glassTint && /* @__PURE__ */ jsxs("div", {
+					style: {
+						marginTop: 12,
+						paddingTop: 12,
+						borderTop: `1px solid ${tokens.colors.border.muted}`,
+						display: "flex",
+						gap: 8,
+						fontSize: "0.625rem",
+						color: tokens.colors.text.tertiary
+					},
+					children: [/* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: 4
+						},
+						children: [/* @__PURE__ */ jsx("span", { style: {
+							width: 12,
+							height: 12,
+							borderRadius: 2,
+							backgroundColor: accentColor,
+							border: "1px solid rgba(255,255,255,0.2)"
+						} }), "Accent"]
+					}), /* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: 4
+						},
+						children: [/* @__PURE__ */ jsx("span", { style: {
+							width: 12,
+							height: 12,
+							borderRadius: 2,
+							backgroundColor: glassTint,
+							border: "1px solid rgba(255,255,255,0.2)"
+						} }), "Glass"]
+					})]
+				})
+			]
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 12
+		},
+		children: [isTransparentTheme && /* @__PURE__ */ jsx(TargetToggle, {
+			value: colorTarget,
+			onChange: onTargetChange,
+			tokens
+		}), /* @__PURE__ */ jsx(ColorGrid, {
+			selectedColor: displayColor,
+			onSelect: handleColorSelect,
+			tokens
+		})]
+	});
 });
-export {
-  ColorPickerPanel
-};
-//# sourceMappingURL=ColorPickerPanel.js.map
+//#endregion
+export { ColorPickerPanel, ColorPickerPanel as default };
+
+//# sourceMappingURL=ColorPickerPanel.js.map