@classytic/fluid 0.4.2 → 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

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 import * as react from "react";
 import { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
-//#region src/components/color-picker.d.ts
+//#region src/components/color-picker/types.d.ts
 type RGBA = [number, number, number, number];
 interface ColorPickerContextValue {
   hue: number;
@@ -16,8 +16,6 @@ interface ColorPickerContextValue {
   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;
@@ -28,51 +26,69 @@ interface ColorPickerProps {
   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;
 }
+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;
-interface ColorPickerPreviewProps {
-  className?: string;
-}
+//#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

@@ -1,13 +1,13 @@
 "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 { 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.tsx
+//#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;
@@ -89,6 +89,9 @@ function hslToHexa(h, s, l, a) {
 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);
@@ -99,6 +102,9 @@ 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);
@@ -165,73 +171,41 @@ function ColorPicker({ value, defaultValue = "#000000", onChange, className, chi
 		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: {
-			hue,
-			saturation,
-			lightness,
-			alpha,
-			setHue: setHueNotify,
-			setSaturation: setSaturationNotify,
-			setLightness: setLightnessNotify,
-			setAlpha: setAlphaNotify,
-			getCurrentColor,
-			onChange
-		},
+		value: contextValue,
 		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 }) {
+
+//#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) => {
@@ -260,6 +234,11 @@ function ColorSlider({ value, max, onChange, trackClassName, trackStyle, childre
 		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,
@@ -270,17 +249,9 @@ function ColorSlider({ value, max, onChange, trackClassName, trackStyle, childre
 		})]
 	});
 }
-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
-	});
-}
+
+//#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();
@@ -293,9 +264,13 @@ function ColorPickerAlpha({ className }) {
 			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 () => {
@@ -316,6 +291,24 @@ function ColorPickerEyeDropper({ className, children }) {
 		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);
@@ -331,6 +324,9 @@ function ColorPickerInput({ className, showAlpha = false }) {
 		})]
 	});
 }
+
+//#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);
@@ -340,5 +336,57 @@ function ColorPickerPreview({ className }) {
 	});
 }
 
+//#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 };