@classytic/fluid 0.4.0 → 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 };