@classytic/fluid 0.4.1 → 0.4.2

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

@@ -0,0 +1,78 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react from "react";
+import { ReactNode } from "react";
+
+//#region src/components/color-picker.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;
+}
+declare function useColorPicker(): ColorPickerContextValue;
+declare function useColorPickerHex(): string;
+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;
+}
+declare function ColorPicker({
+  value,
+  defaultValue,
+  onChange,
+  className,
+  children
+}: ColorPickerProps): react_jsx_runtime0.JSX.Element;
+interface ColorPickerSelectionProps {
+  className?: string;
+}
+declare const ColorPickerSelection: react.NamedExoticComponent<ColorPickerSelectionProps>;
+interface ColorPickerHueProps {
+  className?: string;
+}
+declare function ColorPickerHue({
+  className
+}: ColorPickerHueProps): react_jsx_runtime0.JSX.Element;
+interface ColorPickerAlphaProps {
+  className?: string;
+}
+declare function ColorPickerAlpha({
+  className
+}: ColorPickerAlphaProps): react_jsx_runtime0.JSX.Element;
+interface ColorPickerEyeDropperProps {
+  className?: string;
+  children?: ReactNode;
+}
+declare function ColorPickerEyeDropper({
+  className,
+  children
+}: ColorPickerEyeDropperProps): react_jsx_runtime0.JSX.Element;
+interface ColorPickerInputProps {
+  className?: string;
+  /** Show alpha percentage alongside hex */
+  showAlpha?: boolean;
+}
+declare function ColorPickerInput({
+  className,
+  showAlpha
+}: ColorPickerInputProps): react_jsx_runtime0.JSX.Element;
+interface ColorPickerPreviewProps {
+  className?: string;
+}
+declare function ColorPickerPreview({
+  className
+}: ColorPickerPreviewProps): react_jsx_runtime0.JSX.Element;
+//#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,344 @@
+"use client";
+
+import { t as cn } from "../utils-DQ5SCVoW.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Pipette } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+//#region src/components/color-picker.tsx
+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));
+}
+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);
+}
+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
+	]);
+	return /* @__PURE__ */ jsx(ColorPickerContext.Provider, {
+		value: {
+			hue,
+			saturation,
+			lightness,
+			alpha,
+			setHue: setHueNotify,
+			setSaturation: setSaturationNotify,
+			setLightness: setLightnessNotify,
+			setAlpha: setAlphaNotify,
+			getCurrentColor,
+			onChange
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex size-full flex-col gap-4", className),
+			children
+		})
+	});
+}
+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 },
+		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)"
+			}
+		})
+	});
+});
+function ColorSlider({ value, max, onChange, trackClassName, trackStyle, children, className }) {
+	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,
+		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}%` }
+		})]
+	});
+}
+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
+	});
+}
+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,
+		children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full bg-gradient-to-r from-transparent to-black/50 dark:to-white/50" })
+	});
+}
+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" })
+	});
+}
+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), "%"]
+		})]
+	});
+}
+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
+export { ColorPicker, ColorPickerAlpha, ColorPickerEyeDropper, ColorPickerHue, ColorPickerInput, ColorPickerPreview, ColorPickerSelection, useColorPicker, useColorPickerHex };

package/dist/client/gallery.d.mts

@@ -0,0 +1,175 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#region src/components/gallery/types.d.ts
+interface GalleryImage {
+  src: string;
+  thumbnail?: string;
+  alt?: string;
+}
+interface GalleryBadge {
+  label: string;
+  className?: string;
+}
+interface GalleryClassNames {
+  root?: string;
+  main?: string;
+  mainImage?: string;
+  slider?: string;
+  thumbnails?: string;
+  thumbnail?: string;
+  thumbnailActive?: string;
+  dots?: string;
+  dot?: string;
+  dotActive?: string;
+  nav?: string;
+  navPrev?: string;
+  navNext?: string;
+  badges?: string;
+  badge?: string;
+  lightbox?: string;
+  lightboxImage?: string;
+  lightboxHeader?: string;
+  lightboxFooter?: string;
+}
+interface GalleryContextValue {
+  images: GalleryImage[];
+  selectedIndex: number;
+  setSelectedIndex: (index: number) => void;
+  lightboxOpen: boolean;
+  setLightboxOpen: (open: boolean) => void;
+  goToNext: () => void;
+  goToPrevious: () => void;
+  classNames?: GalleryClassNames;
+  title?: string;
+}
+//#endregion
+//#region src/components/gallery/gallery-main.d.ts
+interface GalleryMainProps {
+  children?: ReactNode;
+  badges?: GalleryBadge[];
+  showNav?: boolean;
+  aspectRatio?: string;
+  className?: string;
+}
+declare function GalleryMain({
+  children,
+  badges,
+  showNav,
+  aspectRatio,
+  className
+}: GalleryMainProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/gallery/gallery-thumbnails.d.ts
+interface GalleryThumbnailsProps {
+  /** Show on mobile (default: true) */
+  showOnMobile?: boolean;
+  /** Layout orientation (default: "horizontal") */
+  orientation?: "horizontal" | "vertical";
+  /** Thumbnail size class (default: "w-16 h-20 sm:w-20 sm:h-24") */
+  sizeClassName?: string;
+  className?: string;
+}
+declare function GalleryThumbnails({
+  showOnMobile,
+  orientation,
+  sizeClassName,
+  className
+}: GalleryThumbnailsProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+//#region src/components/gallery/gallery-dots.d.ts
+interface GalleryDotsProps {
+  /** Show on desktop (default: false — dots are usually mobile-only) */
+  showOnDesktop?: boolean;
+  className?: string;
+}
+declare function GalleryDots({
+  showOnDesktop,
+  className
+}: GalleryDotsProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+//#region src/components/gallery/gallery-lightbox.d.ts
+interface GalleryLightboxProps {
+  className?: string;
+}
+declare function GalleryLightbox({
+  className
+}: GalleryLightboxProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+//#region src/components/gallery/gallery-nav.d.ts
+interface GalleryNavProps {
+  /** Which direction this button navigates */
+  direction: "prev" | "next";
+  className?: string;
+  children?: React.ReactNode;
+}
+declare function GalleryNav({
+  direction,
+  className,
+  children
+}: GalleryNavProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+//#region src/components/gallery/index.d.ts
+interface ImageGalleryRootProps {
+  children: ReactNode;
+  images: GalleryImage[];
+  defaultIndex?: number;
+  classNames?: GalleryClassNames;
+  title?: string;
+  onIndexChange?: (index: number) => void;
+  className?: string;
+}
+declare function ImageGalleryRoot({
+  children,
+  images,
+  defaultIndex,
+  classNames,
+  title,
+  onIndexChange,
+  className
+}: ImageGalleryRootProps): react_jsx_runtime0.JSX.Element;
+interface ImageGalleryProps {
+  images: GalleryImage[];
+  title?: string;
+  badges?: GalleryBadge[];
+  /** Default selected index */
+  defaultIndex?: number;
+  /** Show thumbnails on mobile (default: true). If false, shows dots */
+  showMobileThumbnails?: boolean;
+  /** Main image aspect ratio */
+  aspectRatio?: string;
+  /** Show navigation arrows */
+  showNav?: boolean;
+  /** Custom class names for styling */
+  classNames?: GalleryClassNames;
+  /** Callback when index changes */
+  onIndexChange?: (index: number) => void;
+  /** Root className */
+  className?: string;
+}
+declare function ImageGallerySimple({
+  images,
+  title,
+  badges,
+  defaultIndex,
+  showMobileThumbnails,
+  aspectRatio,
+  showNav,
+  classNames,
+  onIndexChange,
+  className
+}: ImageGalleryProps): react_jsx_runtime0.JSX.Element;
+declare const ImageGallery: typeof ImageGallerySimple & {
+  Root: typeof ImageGalleryRoot;
+  Main: typeof GalleryMain;
+  Thumbnails: typeof GalleryThumbnails;
+  Dots: typeof GalleryDots;
+  Nav: typeof GalleryNav;
+  Lightbox: typeof GalleryLightbox;
+};
+//#endregion
+//#region src/components/gallery/gallery-context.d.ts
+declare function useGallery(): GalleryContextValue;
+declare function useGalleryOptional(): GalleryContextValue | null;
+//#endregion
+export { type GalleryBadge, type GalleryClassNames, type GalleryImage, ImageGallery, type ImageGalleryProps, useGallery, useGalleryOptional };

package/dist/client/gallery.mjs

@@ -0,0 +1,545 @@
+"use client";
+
+import { t as cn } from "../utils-DQ5SCVoW.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { ChevronLeft, ChevronRight, RotateCcw, X, ZoomIn, ZoomOut } from "lucide-react";
+import Image from "next/image";
+
+//#region src/components/gallery/gallery-context.tsx
+const GalleryContext = createContext(null);
+function useGallery() {
+	const context = useContext(GalleryContext);
+	if (!context) throw new Error("useGallery must be used within a GalleryProvider");
+	return context;
+}
+function useGalleryOptional() {
+	return useContext(GalleryContext);
+}
+function GalleryProvider({ children, images, defaultIndex = 0, classNames, title, onIndexChange }) {
+	const [selectedIndex, setSelectedIndexState] = useState(defaultIndex);
+	const [lightboxOpen, setLightboxOpen] = useState(false);
+	const setSelectedIndex = useCallback((index) => {
+		setSelectedIndexState(index);
+		onIndexChange?.(index);
+	}, [onIndexChange]);
+	const goToNext = useCallback(() => {
+		setSelectedIndex(selectedIndex === images.length - 1 ? 0 : selectedIndex + 1);
+	}, [
+		selectedIndex,
+		images.length,
+		setSelectedIndex
+	]);
+	const goToPrevious = useCallback(() => {
+		setSelectedIndex(selectedIndex === 0 ? images.length - 1 : selectedIndex - 1);
+	}, [
+		selectedIndex,
+		images.length,
+		setSelectedIndex
+	]);
+	const value = useMemo(() => ({
+		images,
+		selectedIndex,
+		setSelectedIndex,
+		lightboxOpen,
+		setLightboxOpen,
+		goToNext,
+		goToPrevious,
+		classNames,
+		title
+	}), [
+		images,
+		selectedIndex,
+		setSelectedIndex,
+		lightboxOpen,
+		goToNext,
+		goToPrevious,
+		classNames,
+		title
+	]);
+	return /* @__PURE__ */ jsx(GalleryContext.Provider, {
+		value,
+		children
+	});
+}
+
+//#endregion
+//#region src/components/gallery/gallery-main.tsx
+function GalleryMain({ children, badges, showNav = true, aspectRatio = "aspect-[4/5]", className }) {
+	const { images, selectedIndex, setLightboxOpen, goToNext, goToPrevious, classNames, title } = useGallery();
+	const [imagesLoaded, setImagesLoaded] = useState(new Set([0]));
+	const [touchStart, setTouchStart] = useState(null);
+	const [touchEnd, setTouchEnd] = useState(null);
+	const sliderRef = useRef(null);
+	const minSwipeDistance = 50;
+	useEffect(() => {
+		images.forEach((img, index) => {
+			if (index === 0) return;
+			const preloadImg = new window.Image();
+			preloadImg.src = img.src;
+			preloadImg.onload = () => {
+				setImagesLoaded((prev) => new Set([...prev, index]));
+			};
+		});
+	}, [images]);
+	const onTouchStart = useCallback((e) => {
+		setTouchEnd(null);
+		setTouchStart(e.targetTouches[0].clientX);
+	}, []);
+	const onTouchMove = useCallback((e) => {
+		setTouchEnd(e.targetTouches[0].clientX);
+	}, []);
+	const onTouchEnd = useCallback(() => {
+		if (!touchStart || !touchEnd) return;
+		const distance = touchStart - touchEnd;
+		if (distance > minSwipeDistance) goToNext();
+		if (distance < -minSwipeDistance) goToPrevious();
+	}, [
+		touchStart,
+		touchEnd,
+		goToNext,
+		goToPrevious
+	]);
+	const handleImageLoad = useCallback((index) => {
+		setImagesLoaded((prev) => new Set([...prev, index]));
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: sliderRef,
+			className: cn(aspectRatio, "bg-muted overflow-hidden relative rounded-lg", classNames?.main),
+			onTouchStart,
+			onTouchMove,
+			onTouchEnd,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: cn("absolute inset-0 flex transition-transform duration-300 ease-out", classNames?.slider),
+					style: { transform: `translateX(-${selectedIndex * 100}%)` },
+					children: images.map((img, index) => /* @__PURE__ */ jsxs("div", {
+						className: "w-full h-full shrink-0 relative cursor-zoom-in",
+						onClick: () => setLightboxOpen(true),
+						children: [/* @__PURE__ */ jsx(Image, {
+							src: img.src,
+							alt: img.alt || `${title || "Gallery"} - Image ${index + 1}`,
+							fill: true,
+							className: cn("object-cover transition-opacity duration-300", imagesLoaded.has(index) ? "opacity-100" : "opacity-0", classNames?.mainImage),
+							sizes: "(max-width: 768px) 100vw, 50vw",
+							priority: index === 0,
+							onLoad: () => handleImageLoad(index)
+						}), !imagesLoaded.has(index) && /* @__PURE__ */ jsx("div", {
+							className: "absolute inset-0 flex items-center justify-center bg-muted",
+							children: /* @__PURE__ */ jsx("div", { className: "w-8 h-8 border-2 border-muted-foreground/20 border-t-muted-foreground rounded-full animate-spin" })
+						})]
+					}, index))
+				}),
+				badges && badges.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: cn("absolute top-4 left-4 flex flex-col gap-2 z-10", classNames?.badges),
+					children: badges.map((badge, index) => /* @__PURE__ */ jsx("span", {
+						className: cn("px-3 py-1 text-xs font-medium uppercase tracking-wider", classNames?.badge, badge.className),
+						children: badge.label
+					}, index))
+				}),
+				showNav && images.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: (e) => {
+						e.stopPropagation();
+						goToPrevious();
+					},
+					className: cn("hidden sm:flex absolute left-3 top-1/2 -translate-y-1/2 z-10", "w-10 h-10 items-center justify-center rounded-full", "bg-background/80 backdrop-blur-sm shadow-md hover:bg-background transition-colors", classNames?.nav, classNames?.navPrev),
+					"aria-label": "Previous image",
+					children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-5 w-5" })
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: (e) => {
+						e.stopPropagation();
+						goToNext();
+					},
+					className: cn("hidden sm:flex absolute right-3 top-1/2 -translate-y-1/2 z-10", "w-10 h-10 items-center justify-center rounded-full", "bg-background/80 backdrop-blur-sm shadow-md hover:bg-background transition-colors", classNames?.nav, classNames?.navNext),
+					"aria-label": "Next image",
+					children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5" })
+				})] }),
+				children
+			]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/gallery/gallery-thumbnails.tsx
+function GalleryThumbnails({ showOnMobile = true, orientation = "horizontal", sizeClassName = "w-16 h-20 sm:w-20 sm:h-24", className }) {
+	const { images, selectedIndex, setSelectedIndex, classNames, title } = useGallery();
+	if (images.length <= 1) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex gap-2 sm:gap-3 scrollbar-hide", orientation === "vertical" ? "flex-col overflow-y-auto pr-2" : "overflow-x-auto pb-2", !showOnMobile && "hidden sm:flex", classNames?.thumbnails, className),
+		children: images.map((img, index) => /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => setSelectedIndex(index),
+			className: cn("bg-muted overflow-hidden border-2 transition-all duration-200 shrink-0 rounded-md relative", sizeClassName, selectedIndex === index ? cn("border-foreground", classNames?.thumbnailActive) : cn("border-transparent opacity-60 hover:opacity-100", classNames?.thumbnail)),
+			"aria-label": `View image ${index + 1}`,
+			children: /* @__PURE__ */ jsx(Image, {
+				src: img.thumbnail || img.src,
+				alt: img.alt || `${title || "Gallery"} thumbnail ${index + 1}`,
+				fill: true,
+				className: "object-cover",
+				sizes: "80px"
+			})
+		}, index))
+	});
+}
+
+//#endregion
+//#region src/components/gallery/gallery-dots.tsx
+function GalleryDots({ showOnDesktop = false, className }) {
+	const { images, selectedIndex, setSelectedIndex, classNames } = useGallery();
+	if (images.length <= 1) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex justify-center gap-2 mt-3", !showOnDesktop && "sm:hidden", classNames?.dots, className),
+		children: images.map((_, index) => /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => setSelectedIndex(index),
+			className: cn("h-2 rounded-full transition-all duration-300", selectedIndex === index ? cn("bg-foreground w-6", classNames?.dotActive) : cn("bg-muted-foreground/30 hover:bg-muted-foreground/50 w-2", classNames?.dot)),
+			"aria-label": `Go to image ${index + 1}`
+		}, index))
+	});
+}
+
+//#endregion
+//#region src/components/gallery/gallery-lightbox.tsx
+const MIN_ZOOM = 1;
+const MAX_ZOOM = 4;
+const ZOOM_STEP = .5;
+function GalleryLightbox({ className }) {
+	const { images, selectedIndex, setSelectedIndex, lightboxOpen, setLightboxOpen, goToNext, goToPrevious, classNames, title } = useGallery();
+	const [zoom, setZoom] = useState(1);
+	const [position, setPosition] = useState({
+		x: 0,
+		y: 0
+	});
+	const [isDragging, setIsDragging] = useState(false);
+	const [dragStart, setDragStart] = useState({
+		x: 0,
+		y: 0
+	});
+	const [imageLoaded, setImageLoaded] = useState(false);
+	useEffect(() => {
+		setZoom(1);
+		setPosition({
+			x: 0,
+			y: 0
+		});
+		setImageLoaded(false);
+	}, [selectedIndex, lightboxOpen]);
+	useEffect(() => {
+		if (!lightboxOpen) return;
+		const handleKeyDown = (e) => {
+			switch (e.key) {
+				case "Escape":
+					setLightboxOpen(false);
+					break;
+				case "ArrowLeft":
+					goToPrevious();
+					break;
+				case "ArrowRight":
+					goToNext();
+					break;
+				case "+":
+				case "=":
+					setZoom((prev) => Math.min(prev + ZOOM_STEP, MAX_ZOOM));
+					break;
+				case "-":
+					setZoom((prev) => {
+						const newZoom = Math.max(prev - ZOOM_STEP, MIN_ZOOM);
+						if (newZoom === 1) setPosition({
+							x: 0,
+							y: 0
+						});
+						return newZoom;
+					});
+					break;
+				case "0":
+					setZoom(1);
+					setPosition({
+						x: 0,
+						y: 0
+					});
+					break;
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [
+		lightboxOpen,
+		goToNext,
+		goToPrevious,
+		setLightboxOpen
+	]);
+	useEffect(() => {
+		if (lightboxOpen) document.body.style.overflow = "hidden";
+		else document.body.style.overflow = "";
+		return () => {
+			document.body.style.overflow = "";
+		};
+	}, [lightboxOpen]);
+	const handleWheel = useCallback((e) => {
+		e.preventDefault();
+		const delta = e.deltaY > 0 ? -ZOOM_STEP : ZOOM_STEP;
+		setZoom((prev) => {
+			const newZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, prev + delta));
+			if (newZoom === 1) setPosition({
+				x: 0,
+				y: 0
+			});
+			return newZoom;
+		});
+	}, []);
+	const handleMouseDown = (e) => {
+		if (zoom > 1) {
+			setIsDragging(true);
+			setDragStart({
+				x: e.clientX - position.x,
+				y: e.clientY - position.y
+			});
+		}
+	};
+	const handleMouseMove = (e) => {
+		if (isDragging && zoom > 1) setPosition({
+			x: e.clientX - dragStart.x,
+			y: e.clientY - dragStart.y
+		});
+	};
+	const handleMouseUp = () => setIsDragging(false);
+	const handleTouchStart = (e) => {
+		if (zoom > 1 && e.touches.length === 1) {
+			setIsDragging(true);
+			setDragStart({
+				x: e.touches[0].clientX - position.x,
+				y: e.touches[0].clientY - position.y
+			});
+		}
+	};
+	const handleTouchMove = (e) => {
+		if (isDragging && zoom > 1 && e.touches.length === 1) setPosition({
+			x: e.touches[0].clientX - dragStart.x,
+			y: e.touches[0].clientY - dragStart.y
+		});
+	};
+	const handleDoubleClick = () => {
+		if (zoom > 1) {
+			setZoom(1);
+			setPosition({
+				x: 0,
+				y: 0
+			});
+		} else setZoom(2);
+	};
+	if (!lightboxOpen) return null;
+	const currentImage = images[selectedIndex];
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("fixed inset-0 z-50 bg-black", classNames?.lightbox, className),
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": `${title || "Gallery"} - Image ${selectedIndex + 1} of ${images.length}`,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("absolute top-0 left-0 right-0 z-50", "flex items-center justify-between p-4", "bg-gradient-to-b from-black/60 to-transparent", classNames?.lightboxHeader),
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "text-white text-sm font-medium",
+						children: [
+							selectedIndex + 1,
+							" / ",
+							images.length
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => setZoom((prev) => {
+									const newZoom = Math.max(prev - ZOOM_STEP, MIN_ZOOM);
+									if (newZoom === 1) setPosition({
+										x: 0,
+										y: 0
+									});
+									return newZoom;
+								}),
+								disabled: zoom <= MIN_ZOOM,
+								className: "p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors disabled:opacity-30",
+								"aria-label": "Zoom out",
+								children: /* @__PURE__ */ jsx(ZoomOut, { className: "h-5 w-5 text-white" })
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "text-white text-sm min-w-[3rem] text-center",
+								children: [Math.round(zoom * 100), "%"]
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => setZoom((prev) => Math.min(prev + ZOOM_STEP, MAX_ZOOM)),
+								disabled: zoom >= MAX_ZOOM,
+								className: "p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors disabled:opacity-30",
+								"aria-label": "Zoom in",
+								children: /* @__PURE__ */ jsx(ZoomIn, { className: "h-5 w-5 text-white" })
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => {
+									setZoom(1);
+									setPosition({
+										x: 0,
+										y: 0
+									});
+								},
+								disabled: zoom === 1,
+								className: "p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors disabled:opacity-30",
+								"aria-label": "Reset zoom",
+								children: /* @__PURE__ */ jsx(RotateCcw, { className: "h-5 w-5 text-white" })
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => setLightboxOpen(false),
+						className: "p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors",
+						"aria-label": "Close",
+						children: /* @__PURE__ */ jsx(X, { className: "h-6 w-6 text-white" })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("absolute inset-0 flex items-center justify-center", zoom > 1 ? "cursor-grab" : "cursor-zoom-in", isDragging && "cursor-grabbing"),
+				onWheel: handleWheel,
+				onMouseDown: handleMouseDown,
+				onMouseMove: handleMouseMove,
+				onMouseUp: handleMouseUp,
+				onMouseLeave: handleMouseUp,
+				onTouchStart: handleTouchStart,
+				onTouchMove: handleTouchMove,
+				onTouchEnd: handleMouseUp,
+				onDoubleClick: handleDoubleClick,
+				children: [!imageLoaded && /* @__PURE__ */ jsx("div", {
+					className: "absolute inset-0 flex items-center justify-center",
+					children: /* @__PURE__ */ jsx("div", { className: "w-12 h-12 border-4 border-white/20 border-t-white rounded-full animate-spin" })
+				}), /* @__PURE__ */ jsx("div", {
+					className: "relative w-full h-full transition-transform duration-100",
+					style: { transform: `scale(${zoom}) translate(${position.x / zoom}px, ${position.y / zoom}px)` },
+					children: /* @__PURE__ */ jsx(Image, {
+						src: currentImage.src,
+						alt: currentImage.alt || `${title || "Gallery"} - Image ${selectedIndex + 1}`,
+						fill: true,
+						className: cn("object-contain transition-opacity duration-300", imageLoaded ? "opacity-100" : "opacity-0", classNames?.lightboxImage),
+						sizes: "100vw",
+						quality: 100,
+						priority: true,
+						unoptimized: true,
+						onLoad: () => setImageLoaded(true)
+					})
+				})]
+			}),
+			images.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: goToPrevious,
+				className: "absolute left-4 top-1/2 -translate-y-1/2 z-50 p-3 rounded-full bg-white/10 hover:bg-white/20 transition-colors",
+				"aria-label": "Previous",
+				children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-8 w-8 text-white" })
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: goToNext,
+				className: "absolute right-4 top-1/2 -translate-y-1/2 z-50 p-3 rounded-full bg-white/10 hover:bg-white/20 transition-colors",
+				"aria-label": "Next",
+				children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-8 w-8 text-white" })
+			})] }),
+			images.length > 1 && /* @__PURE__ */ jsxs("div", {
+				className: cn("absolute bottom-0 left-0 right-0 z-50 p-4", "bg-gradient-to-t from-black/60 to-transparent", classNames?.lightboxFooter),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex justify-center gap-2 overflow-x-auto max-w-full pb-2",
+					children: images.map((img, index) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => setSelectedIndex(index),
+						className: cn("w-16 h-16 md:w-20 md:h-20 overflow-hidden border-2 transition-all shrink-0 rounded-md relative", selectedIndex === index ? "border-white opacity-100" : "border-transparent opacity-50 hover:opacity-80"),
+						"aria-label": `View image ${index + 1}`,
+						children: /* @__PURE__ */ jsx(Image, {
+							src: img.thumbnail || img.src,
+							alt: img.alt || `Thumbnail ${index + 1}`,
+							fill: true,
+							className: "object-cover",
+							sizes: "80px"
+						})
+					}, index))
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-white/50 text-xs text-center mt-2 hidden md:block",
+					children: "Scroll to zoom · Double-click to toggle · Drag to pan · Arrow keys to navigate"
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/components/gallery/gallery-nav.tsx
+function GalleryNav({ direction, className, children }) {
+	const { images, goToNext, goToPrevious, classNames } = useGallery();
+	if (images.length <= 1) return null;
+	const isPrev = direction === "prev";
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: isPrev ? goToPrevious : goToNext,
+		className: cn("flex items-center justify-center", "w-10 h-10 rounded-full", "bg-background/80 backdrop-blur-sm shadow-md hover:bg-background transition-colors", classNames?.nav, isPrev ? classNames?.navPrev : classNames?.navNext, className),
+		"aria-label": isPrev ? "Previous image" : "Next image",
+		children: children || (isPrev ? /* @__PURE__ */ jsx(ChevronLeft, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5" }))
+	});
+}
+
+//#endregion
+//#region src/components/gallery/index.tsx
+function ImageGalleryRoot({ children, images, defaultIndex = 0, classNames, title, onIndexChange, className }) {
+	return /* @__PURE__ */ jsx(GalleryProvider, {
+		images,
+		defaultIndex,
+		classNames,
+		title,
+		onIndexChange,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("space-y-4", classNames?.root, className),
+			children
+		})
+	});
+}
+function ImageGallerySimple({ images, title, badges, defaultIndex = 0, showMobileThumbnails = true, aspectRatio = "aspect-[4/5]", showNav = true, classNames, onIndexChange, className }) {
+	if (!images || images.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: cn(aspectRatio, "bg-muted flex items-center justify-center rounded-lg", className),
+		children: /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground",
+			children: "No image available"
+		})
+	});
+	return /* @__PURE__ */ jsxs(ImageGalleryRoot, {
+		images,
+		defaultIndex,
+		classNames,
+		title,
+		onIndexChange,
+		className,
+		children: [
+			/* @__PURE__ */ jsx(GalleryMain, {
+				badges,
+				showNav,
+				aspectRatio
+			}),
+			!showMobileThumbnails && /* @__PURE__ */ jsx(GalleryDots, {}),
+			/* @__PURE__ */ jsx(GalleryThumbnails, { showOnMobile: showMobileThumbnails }),
+			/* @__PURE__ */ jsx(GalleryLightbox, {})
+		]
+	});
+}
+const ImageGallery = Object.assign(ImageGallerySimple, {
+	Root: ImageGalleryRoot,
+	Main: GalleryMain,
+	Thumbnails: GalleryThumbnails,
+	Dots: GalleryDots,
+	Nav: GalleryNav,
+	Lightbox: GalleryLightbox
+});
+
+//#endregion
+export { ImageGallery, useGallery, useGalleryOptional };

package/dist/client/spreadsheet.d.mts

@@ -76,6 +76,8 @@ interface SpreadsheetTableProps<TData = unknown> {
   }) => ReactNode;
   /** CSS class for the table container */
   className?: string;
+  /** CSS class for the header row (overrides default bg-muted/50) */
+  headerClassName?: string;
   /** Accessible label for the table */
   ariaLabel?: string;
   /** Called when a row is added (receives the ID of the row to insert after) */
@@ -124,6 +126,7 @@ declare function SpreadsheetTable<TData = unknown>({
   mobileFooter,
   rowActions,
   className,
+  headerClassName,
   ariaLabel,
   onAddRow,
   virtualize,

package/dist/client/spreadsheet.mjs

@@ -289,7 +289,7 @@ const VIRTUAL_ROW_BASE = {
 	width: "100%",
 	willChange: "transform"
 };
-function SpreadsheetTable({ columns, items, orderedIds, dispatch, isReadOnly = false, footer, mobileFooter, rowActions, className = "", ariaLabel = "Spreadsheet", onAddRow, virtualize = false, estimateRowHeight = 48 }) {
+function SpreadsheetTable({ columns, items, orderedIds, dispatch, isReadOnly = false, footer, mobileFooter, rowActions, className = "", headerClassName, ariaLabel = "Spreadsheet", onAddRow, virtualize = false, estimateRowHeight = 48 }) {
 	const containerRef = useRef(null);
 	const tableContainerRef = useRef(null);
 	const mobileContainerRef = useRef(null);
@@ -343,9 +343,9 @@ function SpreadsheetTable({ columns, items, orderedIds, dispatch, isReadOnly = f
 				"aria-label": ariaLabel,
 				children: [
 					/* @__PURE__ */ jsx("thead", {
-						className: "sticky top-0 z-10 bg-background",
+						className: `sticky top-0 z-10 ${headerClassName ?? "bg-muted/50"}`,
 						children: /* @__PURE__ */ jsxs("tr", {
-							className: "border-b bg-muted/50",
+							className: "border-b",
 							style: virtualize ? {
 								display: "flex",
 								width: "100%"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classytic/fluid",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "type": "module",
   "description": "Fluid UI - Custom components built on shadcn/ui and base ui by Classytic",
   "main": "./dist/index.mjs",
@@ -39,6 +39,14 @@
       "types": "./dist/client/spreadsheet.d.mts",
       "default": "./dist/client/spreadsheet.mjs"
     },
+    "./client/color-picker": {
+      "types": "./dist/client/color-picker.d.mts",
+      "default": "./dist/client/color-picker.mjs"
+    },
+    "./client/gallery": {
+      "types": "./dist/client/gallery.d.mts",
+      "default": "./dist/client/gallery.mjs"
+    },
     "./forms": {
       "types": "./dist/forms.d.mts",
       "default": "./dist/forms.mjs"