@ctrl-ui/react 0.8.0

package/dist/ui/code.js

@@ -0,0 +1,292 @@
+"use client";
+import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard.js";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import { ScrollArea } from "./scroll-area.js";
+import { highlightToTokens } from "../lib/code-tokens.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
+import { Children, createContext, isValidElement, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+//#region src/ui/code.tsx
+const VIRTUALIZE_THRESHOLD = 200;
+const ESTIMATED_LINE_HEIGHT = 20;
+const CodeContext = createContext(null);
+function useCodeContext() {
+	const context = useContext(CodeContext);
+	if (!context) throw new Error("Code compound parts must be rendered inside <Code>.");
+	return context;
+}
+function hasCodeHeader(children) {
+	return Children.toArray(children).some((child) => isValidElement(child) && child.type === CodeHeader);
+}
+function Code({ overflow = "scroll", chrome = "standalone", density = "default", className, children, ...props }) {
+	const hasHeader = hasCodeHeader(children);
+	return /* @__PURE__ */ jsx(CodeContext.Provider, {
+		value: {
+			chrome,
+			density,
+			overflow,
+			hasHeader
+		},
+		children: /* @__PURE__ */ jsx("figure", {
+			"data-control-ui": "code",
+			"data-control-family": "code",
+			"data-slot": "root",
+			"data-surface": "panel",
+			"data-chrome": chrome,
+			"data-density": density,
+			"data-header": hasHeader ? "true" : void 0,
+			className: cn("min-w-0 overflow-hidden", !hasHeader && "relative", className),
+			...props,
+			children
+		})
+	});
+}
+function CodeHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("figcaption", {
+		"data-control-ui": "code",
+		"data-control-family": "code",
+		"data-slot": "header",
+		className: cn("flex items-center justify-between", className),
+		...props
+	});
+}
+function CodeTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "code",
+		"data-control-family": "code",
+		"data-slot": "title",
+		className: cn("block min-w-0 truncate", className),
+		...props
+	});
+}
+function CodeActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "code",
+		"data-control-family": "code",
+		"data-slot": "actions",
+		className: cn("flex shrink-0 items-center", className),
+		...props
+	});
+}
+function CodeCopy({ value, copiedLabel, copiedAriaLabel = "Copied", children, className, "aria-label": ariaLabel, ...props }) {
+	const { isCopied, handleCopy } = useCopyToClipboard({ text: value });
+	const isIconOnly = children === void 0;
+	const label = ariaLabel ?? (isIconOnly ? "Copy code" : void 0);
+	const copied = copiedLabel ?? (isIconOnly ? /* @__PURE__ */ jsx(CheckIcon, {
+		"aria-hidden": "true",
+		className: "size-3.5"
+	}) : "Copied");
+	const button = /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "quiet",
+		size: "xs",
+		"aria-live": "polite",
+		"aria-label": label && isCopied ? copiedAriaLabel : label,
+		"data-code-copy": isIconOnly ? "true" : void 0,
+		className,
+		...props,
+		onClick: handleCopy,
+		children: isCopied ? copied : children ?? /* @__PURE__ */ jsx(CopyIcon, {
+			"aria-hidden": "true",
+			className: "size-3.5"
+		})
+	});
+	if (!isIconOnly) return button;
+	return /* @__PURE__ */ jsx(TooltipProvider, {
+		delay: 0,
+		children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: button }), /* @__PURE__ */ jsx(TooltipContent, {
+			side: "left",
+			children: label
+		})] })
+	});
+}
+function CodeFloatingCopy({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CodeCopy, {
+		"data-code-floating": "true",
+		className: cn("absolute top-2 right-2 z-10", className),
+		...props
+	});
+}
+/** Null until resolved, and whenever highlighting is off or language is unknown — callers fall back to plain text. */
+function useCodeTokens({ code, lang, tokens, highlight }) {
+	const requestKey = `${lang ?? ""}\n${code}`;
+	const [clientTokens, setClientTokens] = useState(null);
+	useEffect(() => {
+		if (highlight === "none" || tokens !== void 0 || !lang) return;
+		let cancelled = false;
+		highlightToTokens(code, lang).then((result) => {
+			if (!cancelled) setClientTokens({
+				key: requestKey,
+				tokens: result
+			});
+		}).catch(() => {
+			if (!cancelled) setClientTokens({
+				key: requestKey,
+				tokens: null
+			});
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		code,
+		lang,
+		tokens,
+		highlight,
+		requestKey
+	]);
+	if (highlight === "none") return null;
+	if (tokens !== void 0) return tokens;
+	return clientTokens?.key === requestKey ? clientTokens.tokens : null;
+}
+function CodeTokenLine({ tokens, plain }) {
+	if (!tokens || tokens.length === 0) return plain;
+	return tokens.map((token, index) => {
+		const style = { ...token.style };
+		return /* @__PURE__ */ jsx("span", {
+			style,
+			children: token.content
+		}, index);
+	});
+}
+function CodeRow({ index, number, tokens, plain, overflow, showLineNumbers, measureRef, style }) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref: measureRef,
+		"data-index": index,
+		"data-control-ui": "code",
+		"data-control-family": "code",
+		"data-slot": "line",
+		className: "flex w-full",
+		style,
+		children: [showLineNumbers ? /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "code",
+			"data-control-family": "code",
+			"data-slot": "gutter",
+			"aria-hidden": "true",
+			className: "shrink-0 select-none",
+			children: number
+		}) : null, /* @__PURE__ */ jsx("code", {
+			className: cn("min-w-0 flex-1", overflow === "wrap" ? "whitespace-pre-wrap break-words" : "whitespace-pre"),
+			children: /* @__PURE__ */ jsx(CodeTokenLine, {
+				tokens,
+				plain
+			})
+		})]
+	});
+}
+function CodeContent({ code, lang, tokens, highlight = "auto", showLineNumbers = false, startLine = 1, maxHeight = "32rem", virtualize, className, ref, style, ...props }) {
+	const { chrome, density, overflow, hasHeader } = useCodeContext();
+	const resolvedTokens = useCodeTokens({
+		code,
+		lang,
+		tokens,
+		highlight
+	});
+	const plainLines = useMemo(() => code.split("\n"), [code]);
+	const isCompact = density === "compact";
+	const scrollRef = useRef(null);
+	function setScrollElement(node) {
+		scrollRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}
+	const shouldVirtualize = virtualize ?? plainLines.length > VIRTUALIZE_THRESHOLD;
+	const useScrollArea = density !== "compact" || overflow !== "wrap";
+	const virtualizer = useVirtualizer({
+		count: plainLines.length,
+		getScrollElement: () => scrollRef.current,
+		estimateSize: () => ESTIMATED_LINE_HEIGHT,
+		overscan: 24,
+		enabled: shouldVirtualize
+	});
+	const gridClassName = overflow === "scroll" ? "w-max min-w-full" : "w-full";
+	const textStyle = style;
+	const grid = shouldVirtualize ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("pre", {
+		"data-control-ui": "code",
+		"data-control-family": "code",
+		"data-slot": "accessible-source",
+		className: "sr-only",
+		children: /* @__PURE__ */ jsx("code", { children: code })
+	}), /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "code",
+		"data-control-family": "code",
+		"data-slot": "grid",
+		"data-density": isCompact ? "compact" : "default",
+		"aria-hidden": "true",
+		className: gridClassName,
+		style: {
+			...textStyle,
+			position: "relative",
+			height: `${virtualizer.getTotalSize()}px`
+		},
+		children: virtualizer.getVirtualItems().map((item) => /* @__PURE__ */ jsx(CodeRow, {
+			index: item.index,
+			number: startLine + item.index,
+			tokens: resolvedTokens?.[item.index] ?? null,
+			plain: plainLines[item.index] ?? "",
+			overflow,
+			showLineNumbers,
+			measureRef: virtualizer.measureElement,
+			style: {
+				position: "absolute",
+				top: 0,
+				left: 0,
+				width: "100%",
+				transform: `translateY(${item.start}px)`
+			}
+		}, item.key))
+	})] }) : /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "code",
+		"data-control-family": "code",
+		"data-slot": "grid",
+		"data-density": isCompact ? "compact" : "default",
+		className: gridClassName,
+		style: textStyle,
+		children: plainLines.map((plain, index) => /* @__PURE__ */ jsx(CodeRow, {
+			number: startLine + index,
+			tokens: resolvedTokens?.[index] ?? null,
+			plain,
+			overflow,
+			showLineNumbers
+		}, index))
+	});
+	const content = useScrollArea ? /* @__PURE__ */ jsx(ScrollArea, {
+		maxHeight,
+		viewportClassName: className,
+		viewportProps: {
+			...props,
+			"data-control-ui": "code",
+			"data-control-family": "code",
+			"data-slot": "content",
+			style
+		},
+		viewportRef: setScrollElement,
+		children: grid
+	}) : /* @__PURE__ */ jsx("div", {
+		ref: setScrollElement,
+		"data-control-ui": "code",
+		"data-control-family": "code",
+		"data-slot": "content",
+		className: cn("overflow-auto", className),
+		style: {
+			...style,
+			maxHeight
+		},
+		...props,
+		children: grid
+	});
+	if (hasHeader || chrome === "embedded") return content;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "code",
+		"data-control-family": "code",
+		"data-slot": "floating-frame",
+		"data-density": isCompact ? "compact" : "default",
+		className: "relative",
+		children: [/* @__PURE__ */ jsx(CodeFloatingCopy, { value: code }), content]
+	});
+}
+//#endregion
+export { Code, CodeActions, CodeContent, CodeCopy, CodeFloatingCopy, CodeHeader, CodeTitle, CodeTokenLine, useCodeTokens };

package/dist/ui/collapsible.d.ts

@@ -0,0 +1,31 @@
+import { OpenChangeEventDetails, RenderProp } from "../control-props.js";
+import { CollapsibleKnobStyle } from "../knob-contracts/collapsible-knobs.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/ui/collapsible.d.ts
+type CollapsibleProps = Omit<ComponentProps<"div">, "onChange"> & {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
+  children?: ReactNode;
+} & {
+  style?: CSSProperties & CollapsibleKnobStyle;
+};
+type CollapsibleTriggerProps = Omit<ComponentProps<"button">, "style"> & {
+  "data-slot"?: string;
+  render?: RenderProp<ComponentProps<"button">, {
+    open: boolean;
+  }>;
+  nativeButton?: boolean;
+  style?: CSSProperties & CollapsibleKnobStyle;
+};
+type CollapsibleContentProps = ComponentProps<"div"> & {
+  "data-slot"?: string;
+  keepMounted?: boolean;
+} & {
+  style?: CSSProperties & CollapsibleKnobStyle;
+};
+declare function Collapsible({ className, ...props }: CollapsibleProps): import("react").JSX.Element;
+declare function CollapsibleTrigger({ render, className, children, ...props }: CollapsibleTriggerProps): import("react").JSX.Element;
+declare function CollapsibleContent({ className, children, ...props }: CollapsibleContentProps): import("react").JSX.Element;
+//#endregion
+export { Collapsible, CollapsibleContent, CollapsibleContentProps, CollapsibleProps, CollapsibleTrigger, CollapsibleTriggerProps };

package/dist/ui/collapsible.js

@@ -0,0 +1,72 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useRender } from "@base-ui/react/use-render";
+import { jsx } from "react/jsx-runtime";
+import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
+//#region src/ui/collapsible.tsx
+function CollapsibleTriggerElement({ triggerProps, open, render, className, children }) {
+	return useRender({
+		defaultTagName: "button",
+		render,
+		state: { open },
+		props: {
+			...triggerProps,
+			"data-control-ui": triggerProps["data-control-ui"] ?? "collapsible",
+			"data-control-family": triggerProps["data-control-family"] ?? "collapsible",
+			"data-slot": triggerProps["data-slot"] ?? "trigger",
+			"data-state": open ? "open" : "closed",
+			className: cn(triggerProps.className, className),
+			children
+		}
+	});
+}
+function Collapsible({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible$1.Root, {
+		className,
+		render: (renderProps, state) => /* @__PURE__ */ jsx("div", {
+			"data-control-ui": "collapsible",
+			"data-control-family": "collapsible",
+			"data-slot": "root",
+			...renderProps,
+			"data-state": state.open ? "open" : "closed",
+			className: renderProps.className
+		}),
+		...props
+	});
+}
+function CollapsibleTrigger({ render, className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible$1.Trigger, {
+		"data-control-ui": "collapsible",
+		"data-control-family": "collapsible",
+		"data-slot": "trigger",
+		className: "cursor-pointer",
+		...props,
+		render: (triggerProps, state) => /* @__PURE__ */ jsx(CollapsibleTriggerElement, {
+			triggerProps,
+			open: state.open,
+			render,
+			className,
+			children
+		})
+	});
+}
+function CollapsibleContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible$1.Panel, {
+		className: "h-[var(--collapsible-panel-height)] overflow-hidden data-ending-style:h-0 data-starting-style:h-0",
+		...props,
+		render: (renderProps, state) => /* @__PURE__ */ jsx("div", {
+			"data-control-ui": "collapsible",
+			"data-control-family": "collapsible",
+			"data-slot": "content",
+			...renderProps,
+			"data-state": state.open ? "open" : "closed",
+			className: renderProps.className
+		}),
+		children: /* @__PURE__ */ jsx("div", {
+			className,
+			children
+		})
+	});
+}
+//#endregion
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

package/dist/ui/color-picker.d.ts

@@ -0,0 +1,137 @@
+import { OpenChangeEventDetails } from "../control-props.js";
+import { ControlSize } from "../control-variants.js";
+import { ButtonKnobStyle } from "../knob-contracts/button-knobs.js";
+import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
+import { ColorPickerKnobStyle } from "../knob-contracts/color-picker-knobs.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/ui/color-picker.d.ts
+type ColorFormat = "hex" | "rgb" | "hsl" | "oklch";
+type ColorPickerProps = {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  format?: ColorFormat;
+  defaultFormat?: ColorFormat;
+  onFormatChange?: (format: ColorFormat) => void;
+  alpha?: boolean;
+  disabled?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
+  children?: ReactNode;
+};
+type ColorPickerTriggerProps = Omit<ComponentProps<"button">, "style"> & {
+  style?: CSSProperties & ColorPickerKnobStyle;
+};
+type ColorPickerContentProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+} & {
+  side?: "top" | "right" | "bottom" | "left";
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+};
+type ColorPickerPanelProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type ColorPickerAreaProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & ColorPickerKnobStyle;
+};
+type ColorPickerAreaThumbProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & ColorPickerKnobStyle;
+};
+type ColorPickerHueProps = Omit<Pick<ComponentProps<"div">, "className" | "aria-label" | "aria-labelledby" | "style">, "style"> & {
+  style?: CSSProperties & ColorPickerKnobStyle;
+};
+type ColorPickerAlphaProps = Omit<Pick<ComponentProps<"div">, "className" | "aria-label" | "aria-labelledby" | "style">, "style"> & {
+  style?: CSSProperties & ColorPickerKnobStyle;
+};
+type ColorPickerWheelProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & ColorPickerKnobStyle;
+};
+type ColorPickerEyeDropperProps = Omit<Omit<ComponentProps<"button">, "onError">, "style"> & {
+  style?: CSSProperties & ButtonKnobStyle;
+};
+type ColorPickerInputProps = Omit<Omit<ComponentProps<"input">, "value" | "defaultValue" | "onChange" | "size">, "style"> & {
+  style?: CSSProperties & ColorPickerKnobStyle;
+} & {
+  size?: ControlSize;
+};
+type ColorPickerFormatSelectProps = {
+  formats?: ColorFormat[];
+  size?: ControlSize;
+  className?: string;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+  style?: CSSProperties & ButtonKnobStyle;
+};
+type ColorPickerChannelsProps = ComponentProps<"div"> & {
+  style?: CSSProperties & ColorPickerKnobStyle;
+};
+type ColorPickerChannelProps = Omit<Omit<ComponentProps<"div">, "children" | "aria-label">, "style"> & {
+  style?: CSSProperties & ColorPickerKnobStyle;
+} & {
+  channel: "r" | "g" | "b" | "h" | "s" | "l" | "okl" | "okc" | "okh" | "a";
+  label?: ReactNode;
+  "aria-label"?: string;
+};
+type ColorPickerSwatchesProps = ComponentProps<"div"> & {
+  colors?: string[];
+  label?: ReactNode;
+} & {
+  style?: CSSProperties & ColorPickerKnobStyle;
+};
+type ColorPickerSwatchProps = Omit<Omit<ComponentProps<"button">, "color">, "style"> & {
+  style?: CSSProperties & ColorPickerKnobStyle;
+} & {
+  color: string;
+};
+type ColorPickerSwatchAddProps = Omit<Omit<ComponentProps<"button">, "onClick">, "style"> & {
+  style?: CSSProperties & ColorPickerKnobStyle;
+} & {
+  onAdd?: (value: string) => void;
+};
+type ColorPickerContrastProps = Omit<Omit<ComponentProps<"div">, "children">, "style"> & {
+  style?: CSSProperties & ColorPickerKnobStyle;
+} & {
+  background?: string;
+};
+type ColorPickerOutputProps = Omit<Omit<ComponentProps<"div">, "children">, "style"> & {
+  style?: CSSProperties & ColorPickerKnobStyle;
+} & {
+  children?: ReactNode;
+  renderValue?: (state: {
+    value: string;
+  }) => ReactNode;
+};
+declare function ColorPicker({ open, defaultOpen, onOpenChange, children, ...state }: ColorPickerProps): import("react").JSX.Element;
+declare function ColorPickerTrigger({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: ColorPickerTriggerProps): import("react").JSX.Element;
+declare function ColorPickerContent({ className, children, side, align, sideOffset, ...props }: ColorPickerContentProps): import("react").JSX.Element;
+declare function ColorPickerPanel({ className, children, ...props }: ColorPickerPanelProps): import("react").JSX.Element;
+declare function ColorPickerArea({ className, style, ...props }: ColorPickerAreaProps): import("react").JSX.Element;
+declare function ColorPickerAreaThumb({ className, ...props }: ColorPickerAreaThumbProps): import("react").JSX.Element;
+declare function ColorPickerHue({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: ColorPickerHueProps): import("react").JSX.Element;
+declare function ColorPickerAlpha({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: ColorPickerAlphaProps): import("react").JSX.Element | null;
+declare function ColorPickerWheel({ className, style, ...props }: ColorPickerWheelProps): import("react").JSX.Element;
+declare function ColorPickerInput({ size, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: ColorPickerInputProps): import("react").JSX.Element;
+declare function ColorPickerFormatSelect({ formats, size, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, style }: ColorPickerFormatSelectProps): import("react").JSX.Element;
+declare function ColorPickerChannels({ className, children, ...props }: ColorPickerChannelsProps): import("react").JSX.Element;
+declare function ColorPickerChannel({ channel, label, className, "aria-label": ariaLabel, ...props }: ColorPickerChannelProps): import("react").JSX.Element | null;
+declare global {
+  interface Window {
+    EyeDropper?: {
+      new (): {
+        open: () => Promise<{
+          sRGBHex: string;
+        }>;
+      };
+    };
+  }
+}
+declare function ColorPickerEyeDropper({ className, children, ...props }: ColorPickerEyeDropperProps): import("react").JSX.Element | null;
+declare function ColorPickerSwatches({ colors, label, className, children, ...props }: ColorPickerSwatchesProps): import("react").JSX.Element;
+declare function ColorPickerSwatch({ color, className, "aria-label": ariaLabel, ...props }: ColorPickerSwatchProps): import("react").JSX.Element;
+declare function ColorPickerSwatchAdd({ onAdd, className, children, ...props }: ColorPickerSwatchAddProps): import("react").JSX.Element;
+declare function ColorPickerContrast({ background, className, ...props }: ColorPickerContrastProps): import("react").JSX.Element | null;
+declare function ColorPickerOutput({ className, children, renderValue, ...props }: ColorPickerOutputProps): import("react").JSX.Element;
+//#endregion
+export { ColorFormat, ColorPicker, ColorPickerAlpha, ColorPickerAlphaProps, ColorPickerArea, ColorPickerAreaProps, ColorPickerAreaThumb, ColorPickerAreaThumbProps, ColorPickerChannel, ColorPickerChannelProps, ColorPickerChannels, ColorPickerChannelsProps, ColorPickerContent, ColorPickerContentProps, ColorPickerContrast, ColorPickerContrastProps, ColorPickerEyeDropper, ColorPickerEyeDropperProps, ColorPickerFormatSelect, ColorPickerFormatSelectProps, ColorPickerHue, ColorPickerHueProps, ColorPickerInput, ColorPickerInputProps, ColorPickerOutput, ColorPickerOutputProps, ColorPickerPanel, ColorPickerPanelProps, ColorPickerProps, ColorPickerSwatch, ColorPickerSwatchAdd, ColorPickerSwatchAddProps, ColorPickerSwatchProps, ColorPickerSwatches, ColorPickerSwatchesProps, ColorPickerTrigger, ColorPickerTriggerProps, ColorPickerWheel, ColorPickerWheelProps };