@classytic/fluid 0.4.1 → 0.5.0

package/README.md

@@ -75,11 +75,15 @@ import { CommandSearch, useKeyboardShortcut } from "@classytic/fluid/command";
 |----------|-----------|
 | **Layout** | Section, Container |
 | **Display** | DisplayHeading, SocialIcons (Facebook, Google, TwitterX, Instagram, WhatsApp) |
+| **Presentation** | CardWrapper, DataCard, LoadingCard, DetailView, DetailItem, Timeline, Pill (+Avatar, Button, Status, Indicator, Delta), InfoRow, AccordionSection, FaqAccordion |
 | **States** | EmptyState, EmptyStateNoResults, EmptyStateNoData, EmptyStateNotFound |
+| **Status** | StatusBadge, DetailField, StatsGrid |
 | **Loading** | LoadingState, LoadingOverlay |
 | **Skeletons** | SkeletonTable, SkeletonList, SkeletonCard, SkeletonGrid |
 | **Utilities** | cn, buildFilterParams, buildSearchParams, getApiParams |
 
+> **v0.5.0:** CardWrapper, DetailView, Timeline, Pill, InfoRow, AccordionSection and more are now server-safe — import from the root entry for PPR/donut patterns in Next.js 16.
+
 ### `@classytic/fluid/client/core`
 
 | Category | Components |
@@ -119,7 +123,8 @@ EventCalendar, CalendarWithDetail, CalendarDayDetail
 | **Toggle** | CheckboxInput, RadioInput, SwitchInput |
 | **Date/Time** | DateInput, DateRangeInput, DateTimeInput, DateRangeFilter |
 | **Tags** | TagInput, TagChoiceInput |
-| **Special** | SlugField, OTPInput, FileUploadInput, PhoneInput (in client/core) |
+| **Phone** | FormPhoneInput |
+| **Special** | SlugField, OTPInput, FileUploadInput |
 | **Layout** | FormSection, FormGrid, FormFieldArray, FormFieldArrayItem |
 | **Feedback** | FormErrorSummary |
 
@@ -149,6 +154,7 @@ CommandSearch (+ Input, List, Group, Item, Empty, Separator), useCommandSearch,
 | `useDebouncedCallback` | client/hooks | Debounce a function callback |
 | `useCopyToClipboard` | client/hooks | Copy text with feedback state |
 | `useBaseSearch` | client/hooks | Full search state with URL sync |
+| `createSearchHook` | client/hooks | Factory to pre-configure useBaseSearch |
 | `useScrollDetection` | client/hooks | Detect scroll position/direction |
 | `useLocalStorage` | client/hooks | Typed localStorage hook |
 | `useKeyboardShortcut` | client/hooks | Register keyboard shortcuts |
@@ -180,6 +186,19 @@ import "@classytic/fluid/styles.css";
 | `@tanstack/react-table` | DataTable component |
 | `date-fns` | DateInput, DateRangeInput, EventCalendar |
 
+## Key Features (v0.5.0)
+
+- **Server-safe by default** — Presentation components (cards, timelines, pills, detail views) work in React Server Components for PPR/donut patterns
+- **React 19** — ref-as-prop (no forwardRef), modern hooks
+- **shadcn/ui + Base UI** — Uses `render` prop pattern (not Radix `asChild`), `@/components/ui/*` resolved at consumer runtime
+- **Form integration** — Every form component works with or without react-hook-form via conditional Controller
+- **`clearable` selects** — `SelectInput` and `CompactSelect` support `clearable` prop for auto-generated clear options
+- **`createSearchHook` factory** — Pre-configure search with typed filter fields and URL sync
+- **5 dashboard presets** — InsetSidebar, DualSidebar, FloatingSidebar, MiniSidebar, TopbarRail
+- **Composable search** — `Search.Root/Input/TypeInput/Filters/ActiveFilters/Actions`
+- **757 tests** across 50 test files
+- **Biome** for linting/formatting, **Knip** for dead code detection
+
 ## Dev
 
 ```bash
@@ -187,6 +206,7 @@ npm run build      # Build with tsdown
 npm run dev        # Watch mode
 npm run typecheck  # Type check
 npm run clean      # Remove dist
+npm test           # Run vitest
 ```
 
 ## License

package/dist/client/calendar.d.mts

@@ -1,11 +1,10 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/event-calendar.d.ts
 interface CalendarEvent {
   id: string;
   date: Date | string;
-  [key: string]: any;
 }
 interface EventCalendarProps<T extends CalendarEvent> {
   /** Events to display on the calendar */

package/dist/client/calendar.mjs

@@ -1,8 +1,8 @@
 "use client";
 
 import { t as cn } from "../utils-DQ5SCVoW.mjs";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { addMonths, eachDayOfInterval, endOfMonth, format, getDay, isSameDay, isSameMonth, startOfMonth, subMonths } from "date-fns";
@@ -131,7 +131,7 @@ function EventCalendar({ events = [], selectedDate: controlledSelectedDate, onDa
 							className: cn("bg-card p-2 cursor-pointer transition-colors hover:bg-muted/50", isSelected && "ring-2 ring-primary ring-inset bg-primary/5", !isCurrentMonth && "opacity-50", isLoading && "pointer-events-none opacity-50"),
 							style: { minHeight: minCellHeight },
 							onClick: () => handleDateClick(day),
-							children: renderDayContent ? renderDayContent(day, dayEvents, isSelected) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+							children: renderDayContent ? renderDayContent(day, dayEvents, isSelected) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 								className: cn("flex h-7 w-7 items-center justify-center rounded-full text-sm", isToday && "bg-primary text-primary-foreground font-semibold"),
 								children: format(day, "d")
 							}), renderIndicators(dayEvents)] })
@@ -188,10 +188,10 @@ function CalendarWithDetail({ renderDetail, detailTitle, detailEmptyMessage, lay
 	});
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("gap-4", isHorizontal ? "flex" : "flex flex-col", isHorizontal && "items-start"),
-		children: detailFirst ? /* @__PURE__ */ jsxs(Fragment, { children: [detailElement, /* @__PURE__ */ jsx("div", {
+		children: detailFirst ? /* @__PURE__ */ jsxs(Fragment$1, { children: [detailElement, /* @__PURE__ */ jsx("div", {
 			className: "flex-1",
 			children: calendarElement
-		})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 			className: isHorizontal ? "flex-1" : "",
 			children: calendarElement
 		}), detailElement] })

package/dist/client/color-picker.d.mts

@@ -0,0 +1,94 @@
+import * as react from "react";
+import { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/color-picker/types.d.ts
+type RGBA = [number, number, number, number];
+interface ColorPickerContextValue {
+  hue: number;
+  saturation: number;
+  lightness: number;
+  alpha: number;
+  setHue: (hue: number) => void;
+  setSaturation: (saturation: number) => void;
+  setLightness: (lightness: number) => void;
+  setAlpha: (alpha: number) => void;
+  getCurrentColor: () => RGBA;
+  onChange?: (color: RGBA) => void;
+}
+interface ColorPickerProps {
+  /** Current color value (hex string, e.g. "#ff0000") */
+  value?: string;
+  /** Default color if value is not provided */
+  defaultValue?: string;
+  /** Callback with [R, G, B, Alpha(0-1)] when color changes */
+  onChange?: (color: RGBA) => void;
+  className?: string;
+  children?: ReactNode;
+}
+interface ColorPickerSelectionProps {
+  className?: string;
+}
+interface ColorPickerHueProps {
+  className?: string;
+}
+interface ColorPickerAlphaProps {
+  className?: string;
+}
+interface ColorPickerEyeDropperProps {
+  className?: string;
+  children?: ReactNode;
+}
+interface ColorPickerInputProps {
+  className?: string;
+  /** Show alpha percentage alongside hex */
+  showAlpha?: boolean;
+}
+interface ColorPickerPreviewProps {
+  className?: string;
+}
+//#endregion
+//#region src/components/color-picker/color-picker.d.ts
+declare function ColorPicker({
+  value,
+  defaultValue,
+  onChange,
+  className,
+  children
+}: ColorPickerProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/color-picker/color-picker-alpha.d.ts
+declare function ColorPickerAlpha({
+  className
+}: ColorPickerAlphaProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/color-picker/color-picker-eye-dropper.d.ts
+declare function ColorPickerEyeDropper({
+  className,
+  children
+}: ColorPickerEyeDropperProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/color-picker/color-picker-hue.d.ts
+declare function ColorPickerHue({
+  className
+}: ColorPickerHueProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/color-picker/color-picker-input.d.ts
+declare function ColorPickerInput({
+  className,
+  showAlpha
+}: ColorPickerInputProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/color-picker/color-picker-preview.d.ts
+declare function ColorPickerPreview({
+  className
+}: ColorPickerPreviewProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/color-picker/color-picker-selection.d.ts
+declare const ColorPickerSelection: react.NamedExoticComponent<ColorPickerSelectionProps>;
+//#endregion
+//#region src/components/color-picker/context.d.ts
+declare function useColorPicker(): ColorPickerContextValue;
+declare function useColorPickerHex(): string;
+//#endregion
+export { ColorPicker, ColorPickerAlpha, type ColorPickerAlphaProps, ColorPickerEyeDropper, type ColorPickerEyeDropperProps, ColorPickerHue, type ColorPickerHueProps, ColorPickerInput, type ColorPickerInputProps, ColorPickerPreview, type ColorPickerPreviewProps, type ColorPickerProps, ColorPickerSelection, type ColorPickerSelectionProps, type RGBA, useColorPicker, useColorPickerHex };

package/dist/client/color-picker.mjs

@@ -0,0 +1,392 @@
+"use client";
+
+import { t as cn } from "../utils-DQ5SCVoW.mjs";
+import { createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Pipette } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+//#region src/components/color-picker/utils.ts
+function hexToRgb(hex) {
+	const h = hex.replace("#", "");
+	const expanded = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+	const n = parseInt(expanded.slice(0, 6), 16);
+	return [
+		n >> 16 & 255,
+		n >> 8 & 255,
+		n & 255
+	];
+}
+function rgbToHsl(r, g, b) {
+	r /= 255;
+	g /= 255;
+	b /= 255;
+	const max = Math.max(r, g, b), min = Math.min(r, g, b);
+	const l = (max + min) / 2;
+	if (max === min) return [
+		0,
+		0,
+		l * 100
+	];
+	const d = max - min;
+	const s = l > .5 ? d / (2 - max - min) : d / (max + min);
+	let h;
+	if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+	else if (max === g) h = ((b - r) / d + 2) / 6;
+	else h = ((r - g) / d + 4) / 6;
+	return [
+		h * 360,
+		s * 100,
+		l * 100
+	];
+}
+function hslToRgb(h, s, l) {
+	h /= 360;
+	s /= 100;
+	l /= 100;
+	if (s === 0) {
+		const v = Math.round(l * 255);
+		return [
+			v,
+			v,
+			v
+		];
+	}
+	const hue2rgb = (p, q, t) => {
+		if (t < 0) t += 1;
+		if (t > 1) t -= 1;
+		if (t < 1 / 6) return p + (q - p) * 6 * t;
+		if (t < 1 / 2) return q;
+		if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+		return p;
+	};
+	const q = l < .5 ? l * (1 + s) : l + s - l * s;
+	const p = 2 * l - q;
+	return [
+		Math.round(hue2rgb(p, q, h + 1 / 3) * 255),
+		Math.round(hue2rgb(p, q, h) * 255),
+		Math.round(hue2rgb(p, q, h - 1 / 3) * 255)
+	];
+}
+function hslToHex(h, s, l) {
+	const [r, g, b] = hslToRgb(h, s, l);
+	return "#" + [
+		r,
+		g,
+		b
+	].map((x) => x.toString(16).padStart(2, "0")).join("");
+}
+function hslToHexa(h, s, l, a) {
+	const [r, g, b] = hslToRgb(h, s, l);
+	return "#" + [
+		r,
+		g,
+		b,
+		Math.round(a * 255)
+	].map((x) => x.toString(16).padStart(2, "0")).join("");
+}
+function hexToHsl(hex) {
+	return rgbToHsl(...hexToRgb(hex));
+}
+
+//#endregion
+//#region src/components/color-picker/context.tsx
+const ColorPickerContext = createContext(void 0);
+function useColorPicker() {
+	const context = useContext(ColorPickerContext);
+	if (!context) throw new Error("useColorPicker must be used within a ColorPicker");
+	return context;
+}
+function useColorPickerHex() {
+	const { hue, saturation, lightness } = useColorPicker();
+	return hslToHex(hue, saturation, lightness);
+}
+
+//#endregion
+//#region src/components/color-picker/color-picker.tsx
+function ColorPicker({ value, defaultValue = "#000000", onChange, className, children }) {
+	const [ih, is, il] = hexToHsl(value || defaultValue);
+	const [hue, setHue] = useState(ih || 0);
+	const [saturation, setSaturation] = useState(is || 100);
+	const [lightness, setLightness] = useState(il || 50);
+	const [alpha, setAlpha] = useState(100);
+	const notify = useCallback((h, s, l, a) => {
+		if (!onChange) return;
+		const [r, g, b] = hslToRgb(h, s, l);
+		onChange([
+			r,
+			g,
+			b,
+			a / 100
+		]);
+	}, [onChange]);
+	const setHueNotify = useCallback((v) => {
+		setHue(v);
+		notify(v, saturation, lightness, alpha);
+	}, [
+		saturation,
+		lightness,
+		alpha,
+		notify
+	]);
+	const setSaturationNotify = useCallback((v) => {
+		setSaturation(v);
+		notify(hue, v, lightness, alpha);
+	}, [
+		hue,
+		lightness,
+		alpha,
+		notify
+	]);
+	const setLightnessNotify = useCallback((v) => {
+		setLightness(v);
+		notify(hue, saturation, v, alpha);
+	}, [
+		hue,
+		saturation,
+		alpha,
+		notify
+	]);
+	const setAlphaNotify = useCallback((v) => {
+		setAlpha(v);
+		notify(hue, saturation, lightness, v);
+	}, [
+		hue,
+		saturation,
+		lightness,
+		notify
+	]);
+	const getCurrentColor = useCallback(() => {
+		const [r, g, b] = hslToRgb(hue, saturation, lightness);
+		return [
+			r,
+			g,
+			b,
+			alpha / 100
+		];
+	}, [
+		hue,
+		saturation,
+		lightness,
+		alpha
+	]);
+	const contextValue = useMemo(() => ({
+		hue,
+		saturation,
+		lightness,
+		alpha,
+		setHue: setHueNotify,
+		setSaturation: setSaturationNotify,
+		setLightness: setLightnessNotify,
+		setAlpha: setAlphaNotify,
+		getCurrentColor,
+		onChange
+	}), [
+		hue,
+		saturation,
+		lightness,
+		alpha,
+		setHueNotify,
+		setSaturationNotify,
+		setLightnessNotify,
+		setAlphaNotify,
+		getCurrentColor,
+		onChange
+	]);
+	return /* @__PURE__ */ jsx(ColorPickerContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex size-full flex-col gap-4", className),
+			children
+		})
+	});
+}
+
+//#endregion
+//#region src/components/color-picker/color-picker-slider.tsx
+function ColorSlider({ value, max, onChange, trackClassName, trackStyle, children, className, ariaLabel }) {
+	const ref = useRef(null);
+	const [dragging, setDragging] = useState(false);
+	const update = useCallback((clientX) => {
+		if (!ref.current) return;
+		const rect = ref.current.getBoundingClientRect();
+		const x = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+		onChange(Math.round(x * max));
+	}, [max, onChange]);
+	const handlePointerDown = useCallback((e) => {
+		e.preventDefault();
+		setDragging(true);
+		update(e.clientX);
+	}, [update]);
+	useEffect(() => {
+		if (!dragging) return;
+		const onMove = (e) => update(e.clientX);
+		const onUp = () => setDragging(false);
+		window.addEventListener("pointermove", onMove);
+		window.addEventListener("pointerup", onUp);
+		return () => {
+			window.removeEventListener("pointermove", onMove);
+			window.removeEventListener("pointerup", onUp);
+		};
+	}, [dragging, update]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("relative flex h-4 w-full touch-none items-center", className),
+		onPointerDown: handlePointerDown,
+		role: "slider",
+		"aria-label": ariaLabel,
+		"aria-valuemin": 0,
+		"aria-valuemax": max,
+		"aria-valuenow": value,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn("relative h-3 w-full rounded-full", trackClassName),
+			style: trackStyle,
+			children
+		}), /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none absolute top-0 h-4 w-4 -translate-x-1/2 rounded-full border border-primary/50 bg-background shadow",
+			style: { left: `${value / max * 100}%` }
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/color-picker/color-picker-alpha.tsx
+const CHECKER_BG = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==')";
+function ColorPickerAlpha({ className }) {
+	const { alpha, setAlpha } = useColorPicker();
+	return /* @__PURE__ */ jsx(ColorSlider, {
+		value: alpha,
+		max: 100,
+		onChange: setAlpha,
+		trackStyle: {
+			backgroundImage: CHECKER_BG,
+			backgroundSize: "contain"
+		},
+		className,
+		ariaLabel: "Opacity",
+		children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full bg-gradient-to-r from-transparent to-black/50 dark:to-white/50" })
+	});
+}
+
+//#endregion
+//#region src/components/color-picker/color-picker-eye-dropper.tsx
+function ColorPickerEyeDropper({ className, children }) {
+	const { setHue, setSaturation, setLightness, setAlpha } = useColorPicker();
+	const handleEyeDropper = async () => {
+		try {
+			const [h, s, l] = hexToHsl((await new EyeDropper().open()).sRGBHex);
+			setHue(h);
+			setSaturation(s);
+			setLightness(l);
+			setAlpha(100);
+		} catch {}
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "outline",
+		size: "icon",
+		className: cn("shrink-0", className),
+		onClick: handleEyeDropper,
+		children: children || /* @__PURE__ */ jsx(Pipette, { className: "h-4 w-4" })
+	});
+}
+
+//#endregion
+//#region src/components/color-picker/color-picker-hue.tsx
+const HUE_GRADIENT = "linear-gradient(90deg, #FF0000, #FFFF00, #00FF00, #00FFFF, #0000FF, #FF00FF, #FF0000)";
+function ColorPickerHue({ className }) {
+	const { hue, setHue } = useColorPicker();
+	return /* @__PURE__ */ jsx(ColorSlider, {
+		value: hue,
+		max: 360,
+		onChange: setHue,
+		trackStyle: { background: HUE_GRADIENT },
+		className,
+		ariaLabel: "Hue"
+	});
+}
+
+//#endregion
+//#region src/components/color-picker/color-picker-input.tsx
+function ColorPickerInput({ className, showAlpha = false }) {
+	const { hue, saturation, lightness, alpha } = useColorPicker();
+	const hex = hslToHex(hue, saturation, lightness);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-2", className),
+		children: [/* @__PURE__ */ jsx(Input, {
+			readOnly: true,
+			value: hex,
+			className: "flex-1"
+		}), showAlpha && /* @__PURE__ */ jsxs("span", {
+			className: "text-sm text-muted-foreground",
+			children: [Math.round(alpha), "%"]
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/color-picker/color-picker-preview.tsx
+function ColorPickerPreview({ className }) {
+	const { hue, saturation, lightness, alpha } = useColorPicker();
+	const color = hslToHexa(hue, saturation, lightness, alpha / 100);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("h-10 w-10 rounded-md border border-input", className),
+		style: { backgroundColor: color }
+	});
+}
+
+//#endregion
+//#region src/components/color-picker/color-picker-selection.tsx
+const ColorPickerSelection = memo(function ColorPickerSelection({ className }) {
+	const containerRef = useRef(null);
+	const [isDragging, setIsDragging] = useState(false);
+	const { hue, saturation, lightness, setSaturation, setLightness } = useColorPicker();
+	const backgroundGradient = useMemo(() => `linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0)), linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)), hsl(${hue}, 100%, 50%)`, [hue]);
+	const positionX = saturation / 100;
+	const topLightness = positionX < .01 ? 100 : 50 + 50 * (1 - positionX);
+	const positionY = topLightness > 0 ? Math.max(0, Math.min(1, 1 - lightness / topLightness)) : 0;
+	const updateColor = useCallback((clientX, clientY) => {
+		if (!containerRef.current) return;
+		const rect = containerRef.current.getBoundingClientRect();
+		const x = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+		const y = Math.max(0, Math.min(1, (clientY - rect.top) / rect.height));
+		setSaturation(x * 100);
+		setLightness((x < .01 ? 100 : 50 + 50 * (1 - x)) * (1 - y));
+	}, [setSaturation, setLightness]);
+	const handlePointerDown = useCallback((e) => {
+		e.preventDefault();
+		setIsDragging(true);
+		updateColor(e.clientX, e.clientY);
+	}, [updateColor]);
+	useEffect(() => {
+		if (!isDragging) return;
+		const onMove = (e) => updateColor(e.clientX, e.clientY);
+		const onUp = () => setIsDragging(false);
+		window.addEventListener("pointermove", onMove);
+		window.addEventListener("pointerup", onUp);
+		return () => {
+			window.removeEventListener("pointermove", onMove);
+			window.removeEventListener("pointerup", onUp);
+		};
+	}, [isDragging, updateColor]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative size-full cursor-crosshair rounded", className),
+		onPointerDown: handlePointerDown,
+		ref: containerRef,
+		style: { background: backgroundGradient },
+		role: "application",
+		"aria-label": "Color saturation and lightness",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "-translate-x-1/2 -translate-y-1/2 pointer-events-none absolute h-4 w-4 rounded-full border-2 border-white",
+			style: {
+				left: `${positionX * 100}%`,
+				top: `${positionY * 100}%`,
+				boxShadow: "0 0 0 1px rgba(0,0,0,0.5)"
+			}
+		})
+	});
+});
+
+//#endregion
+export { ColorPicker, ColorPickerAlpha, ColorPickerEyeDropper, ColorPickerHue, ColorPickerInput, ColorPickerPreview, ColorPickerSelection, useColorPicker, useColorPickerHex };