@ctrl-ui/react 0.8.2 → 0.8.5

package/dist/ui/checkbox-group.d.ts

@@ -1,13 +1,12 @@
 import { ControlledMultiChoice, HoverIndicator } from "../control-props.js";
 import { ComponentProps } from "react";
 //#region src/ui/checkbox-group.d.ts
-type CheckboxGroupProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & ControlledMultiChoice & {
+export type CheckboxGroupProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & ControlledMultiChoice & {
   allValues?: string[];
   disabled?: boolean;
   orientation?: "horizontal" | "vertical";
   indicator?: HoverIndicator;
 };
-declare function CheckboxGroup({ className, orientation, indicator, children, ...props }: CheckboxGroupProps): import("react").JSX.Element;
-declare function CheckboxGroupItem({ className, htmlFor, children, ...props }: ComponentProps<"label">): import("react").JSX.Element;
-//#endregion
-export { CheckboxGroup, CheckboxGroupItem, CheckboxGroupProps };
+export declare function CheckboxGroup({ className, orientation, indicator, children, ...props }: CheckboxGroupProps): import("react").JSX.Element;
+export declare function CheckboxGroupItem({ className, htmlFor, children, ...props }: ComponentProps<"label">): import("react").JSX.Element;
+//#endregion

package/dist/ui/checkbox-group.js

@@ -1,12 +1,13 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { skinIndicator } from "../skin.js";
+import { useSkin } from "../skin-provider.js";
 import { TrackHighlight } from "../extensions/track-highlight.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckboxGroup as CheckboxGroup$1 } from "@base-ui/react/checkbox-group";
 //#region src/ui/checkbox-group.tsx
 function CheckboxGroup({ className, orientation = "vertical", indicator, children, ...props }) {
-	const resolvedIndicator = indicator ?? skinIndicator("checkbox-group") ?? "none";
+	const skin = useSkin();
+	const resolvedIndicator = indicator ?? skin.indicators?.["checkbox-group"] ?? "none";
 	return /* @__PURE__ */ jsxs(CheckboxGroup$1, {
 		"data-control-ui": "checkbox-group",
 		"data-control-family": "checkbox-group",

package/dist/ui/checkbox.d.ts

@@ -1,7 +1,7 @@
 import { ChoiceKnobStyle } from "../knob-contracts/choice-knobs.js";
 import { CSSProperties } from "react";
 //#region src/ui/checkbox.d.ts
-type CheckboxProps = Omit<{
+export type CheckboxProps = Omit<{
   checked?: boolean;
   defaultChecked?: boolean;
   onCheckedChange?: (checked: boolean) => void;
@@ -18,6 +18,5 @@ type CheckboxProps = Omit<{
 }, "style"> & {
   style?: CSSProperties & ChoiceKnobStyle;
 };
-declare function Checkbox({ className, checked, defaultChecked, onCheckedChange, indeterminate, disabled, readOnly, required, name, value, id, ...props }: CheckboxProps): import("react").JSX.Element;
-//#endregion
-export { Checkbox, CheckboxProps };
+export declare function Checkbox({ className, checked, defaultChecked, onCheckedChange, indeterminate, disabled, readOnly, required, name, value, id, ...props }: CheckboxProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/code-diff.d.ts

@@ -2,10 +2,10 @@ import { CodeDiffKnobStyle } from "../knob-contracts/code-diff-knobs.js";
 import { CodeCopyProps, CodeOverflow } from "./code.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/ui/code-diff.d.ts
-type DiffStyle = "unified" | "split";
-type DiffIndicators = "classic" | "bars" | "none";
-type DiffLineKind = "word" | "char" | "none";
-type CodeDiffProps = Omit<ComponentProps<"figure">, "children" | "style"> & {
+export type DiffStyle = "unified" | "split";
+export type DiffIndicators = "classic" | "bars" | "none";
+export type DiffLineKind = "word" | "char" | "none";
+export type CodeDiffProps = Omit<ComponentProps<"figure">, "children" | "style"> & {
   patch?: string;
   oldText?: string;
   newText?: string;
@@ -21,8 +21,7 @@ type CodeDiffProps = Omit<ComponentProps<"figure">, "children" | "style"> & {
   children?: ReactNode;
   style?: CSSProperties & CodeDiffKnobStyle;
 };
-declare function CodeDiff({ patch, oldText, newText, lang, name, diffStyle, diffIndicators, lineDiffType, overflow, maxLineDiffLength, maxHeight, header, className, style, ...props }: CodeDiffProps): import("react").JSX.Element;
-type CodeDiffCopyProps = CodeCopyProps;
-declare function CodeDiffCopy(props: CodeDiffCopyProps): import("react").JSX.Element;
-//#endregion
-export { CodeDiff, CodeDiffCopy, CodeDiffCopyProps, CodeDiffProps, DiffIndicators, DiffLineKind, DiffStyle };
+export declare function CodeDiff({ patch, oldText, newText, lang, name, diffStyle, diffIndicators, lineDiffType, overflow, maxLineDiffLength, maxHeight, header, className, style, ...props }: CodeDiffProps): import("react").JSX.Element;
+export type CodeDiffCopyProps = CodeCopyProps;
+export declare function CodeDiffCopy(props: CodeDiffCopyProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/code.d.ts

@@ -3,60 +3,69 @@ import { CodeKnobStyle } from "../knob-contracts/code-knobs.js";
 import { CodeTokenLines } from "../lib/code-tokens.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/ui/code.d.ts
-type CodeOverflow = "wrap" | "scroll";
-type CodeHighlight = "auto" | "none";
-type CodeDensity = "default" | "compact";
-type CodeChrome = "standalone" | "embedded";
-type CodeProps = Omit<ComponentProps<"figure">, "style"> & {
+export type CodeOverflow = "wrap" | "scroll";
+export type CodeHighlight = "auto" | "none";
+export type CodeDensity = "default" | "compact";
+export type CodeChrome = "standalone" | "embedded";
+export type CodeProps = Omit<ComponentProps<"figure">, "style"> & {
   overflow?: CodeOverflow;
   chrome?: CodeChrome;
   density?: CodeDensity;
+  /** A headerless surface overlays its own copy button; turn it off to place one yourself. */
+  copy?: boolean;
   style?: CSSProperties & CodeKnobStyle;
 };
-declare function Code({ overflow, chrome, density, className, children, ...props }: CodeProps): import("react").JSX.Element;
-type CodeHeaderProps = Omit<ComponentProps<"figcaption">, "style"> & {
+export declare function Code({ overflow, chrome, density, copy, className, children, ...props }: CodeProps): import("react").JSX.Element;
+export type CodeHeaderProps = Omit<ComponentProps<"figcaption">, "style"> & {
   style?: CSSProperties & CodeKnobStyle;
 };
-declare function CodeHeader({ className, ...props }: CodeHeaderProps): import("react").JSX.Element;
-type CodeTitleProps = Omit<ComponentProps<"span">, "style"> & {
+export declare function CodeHeader({ className, ...props }: CodeHeaderProps): import("react").JSX.Element;
+export type CodeTitleProps = Omit<ComponentProps<"span">, "style"> & {
   style?: CSSProperties & CodeKnobStyle;
 };
-declare function CodeTitle({ className, ...props }: CodeTitleProps): import("react").JSX.Element;
-type CodeActionsProps = ComponentProps<"div"> & {
+export declare function CodeTitle({ className, ...props }: CodeTitleProps): import("react").JSX.Element;
+export type CodeActionsProps = ComponentProps<"div"> & {
   style?: CSSProperties & CodeKnobStyle;
 };
-declare function CodeActions({ className, ...props }: CodeActionsProps): import("react").JSX.Element;
-type CodeCopyProps = Omit<ComponentProps<typeof Button>, "children" | "onClick"> & {
+export declare function CodeActions({ className, ...props }: CodeActionsProps): import("react").JSX.Element;
+export type CodeCopyProps = Omit<ComponentProps<typeof Button>, "children" | "onClick"> & {
   value: string;
   children?: ReactNode;
   copiedLabel?: ReactNode;
   copiedAriaLabel?: string;
 };
-declare function CodeCopy({ value, copiedLabel, copiedAriaLabel, children, className, "aria-label": ariaLabel, ...props }: CodeCopyProps): import("react").JSX.Element;
-type CodeFloatingCopyProps = Omit<CodeCopyProps, "children" | "copiedLabel">;
-declare function CodeFloatingCopy({ className, ...props }: CodeFloatingCopyProps): import("react").JSX.Element;
-/** Null until resolved, and whenever highlighting is off or language is unknown — callers fall back to plain text. */
-declare function useCodeTokens({ code, lang, tokens, highlight }: {
+export declare function CodeCopy({ value, copiedLabel, copiedAriaLabel, children, className, "aria-label": ariaLabel, ...props }: CodeCopyProps): import("react").JSX.Element;
+export type CodeFloatingCopyProps = Omit<CodeCopyProps, "children" | "copiedLabel">;
+export declare function CodeFloatingCopy({ className, ...props }: CodeFloatingCopyProps): import("react").JSX.Element;
+export declare function useCodeTokens({ code, lang, tokens, highlight }: {
   code: string;
   lang?: string;
   tokens?: CodeTokenLines | null;
   highlight: CodeHighlight;
 }): CodeTokenLines | null;
-declare function CodeTokenLine({ tokens, plain }: {
+export declare function CodeTokenLine({ tokens, plain }: {
   tokens: CodeTokenLines[number] | null;
   plain: string;
 }): ReactNode;
-type CodeContentProps = Omit<ComponentProps<"div">, "children" | "style"> & {
+export type CodeContentProps = Omit<ComponentProps<"div">, "children" | "style"> & {
   code: string;
   lang?: string;
   tokens?: CodeTokenLines | null;
   highlight?: CodeHighlight;
   showLineNumbers?: boolean;
   startLine?: number;
+  highlightLines?: readonly number[];
   maxHeight?: string;
   virtualize?: boolean;
   style?: CSSProperties & CodeKnobStyle;
 };
-declare function CodeContent({ code, lang, tokens, highlight, showLineNumbers, startLine, maxHeight, virtualize, className, ref, style, ...props }: CodeContentProps): import("react").JSX.Element;
-//#endregion
-export { Code, CodeActions, CodeActionsProps, CodeChrome, CodeContent, CodeContentProps, CodeCopy, CodeCopyProps, CodeDensity, CodeFloatingCopy, CodeFloatingCopyProps, CodeHeader, CodeHeaderProps, CodeHighlight, CodeOverflow, CodeProps, CodeTitle, CodeTitleProps, CodeTokenLine, useCodeTokens };
+export declare function CodeContent({ code, lang, tokens, highlight, showLineNumbers, startLine, highlightLines, maxHeight, virtualize, className, ref, style, ...props }: CodeContentProps): import("react").JSX.Element;
+export type CodeEditableProps = Omit<ComponentProps<"textarea">, "defaultValue" | "value" | "style"> & {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  fileName?: string;
+  style?: CSSProperties & CodeKnobStyle;
+};
+export declare function CodeEditable({ value, defaultValue, onValueChange, onChange, fileName, className, "aria-label": ariaLabel, ...props }: CodeEditableProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/code.js

@@ -4,13 +4,13 @@ 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 { Tooltip, TooltipContent, 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 MAX_STATIC_CODE_LINES = 1e3;
 const ESTIMATED_LINE_HEIGHT = 20;
 const CodeContext = createContext(null);
 function useCodeContext() {
@@ -21,14 +21,15 @@ function useCodeContext() {
 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 }) {
+function Code({ overflow = "scroll", chrome = "standalone", density = "default", copy = true, className, children, ...props }) {
 	const hasHeader = hasCodeHeader(children);
 	return /* @__PURE__ */ jsx(CodeContext.Provider, {
 		value: {
 			chrome,
 			density,
 			overflow,
-			hasHeader
+			hasHeader,
+			copy
 		},
 		children: /* @__PURE__ */ jsx("figure", {
 			"data-control-ui": "code",
@@ -95,13 +96,10 @@ function CodeCopy({ value, copiedLabel, copiedAriaLabel = "Copied", children, cl
 		})
 	});
 	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
-		})] })
-	});
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: button }), /* @__PURE__ */ jsx(TooltipContent, {
+		side: "left",
+		children: label
+	})] });
 }
 function CodeFloatingCopy({ className, ...props }) {
 	return /* @__PURE__ */ jsx(CodeCopy, {
@@ -110,7 +108,6 @@ function CodeFloatingCopy({ className, ...props }) {
 		...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);
@@ -152,13 +149,14 @@ function CodeTokenLine({ tokens, plain }) {
 		}, index);
 	});
 }
-function CodeRow({ index, number, tokens, plain, overflow, showLineNumbers, measureRef, style }) {
+function CodeRow({ index, number, tokens, plain, overflow, showLineNumbers, highlighted, measureRef, style }) {
 	return /* @__PURE__ */ jsxs("div", {
 		ref: measureRef,
 		"data-index": index,
 		"data-control-ui": "code",
 		"data-control-family": "code",
 		"data-slot": "line",
+		"data-highlighted": highlighted ? "true" : void 0,
 		className: "flex w-full",
 		style,
 		children: [showLineNumbers ? /* @__PURE__ */ jsx("span", {
@@ -177,8 +175,8 @@ function CodeRow({ index, number, tokens, plain, overflow, showLineNumbers, meas
 		})]
 	});
 }
-function CodeContent({ code, lang, tokens, highlight = "auto", showLineNumbers = false, startLine = 1, maxHeight = "32rem", virtualize, className, ref, style, ...props }) {
-	const { chrome, density, overflow, hasHeader } = useCodeContext();
+function CodeContent({ code, lang, tokens, highlight = "auto", showLineNumbers = false, startLine = 1, highlightLines, maxHeight = "32rem", virtualize, className, ref, style, ...props }) {
+	const { density, overflow, hasHeader, copy } = useCodeContext();
 	const resolvedTokens = useCodeTokens({
 		code,
 		lang,
@@ -186,6 +184,7 @@ function CodeContent({ code, lang, tokens, highlight = "auto", showLineNumbers =
 		highlight
 	});
 	const plainLines = useMemo(() => code.split("\n"), [code]);
+	const highlightedLineNumbers = new Set(highlightLines);
 	const isCompact = density === "compact";
 	const scrollRef = useRef(null);
 	function setScrollElement(node) {
@@ -193,7 +192,7 @@ function CodeContent({ code, lang, tokens, highlight = "auto", showLineNumbers =
 		if (typeof ref === "function") ref(node);
 		else if (ref) ref.current = node;
 	}
-	const shouldVirtualize = virtualize ?? plainLines.length > VIRTUALIZE_THRESHOLD;
+	const shouldVirtualize = virtualize ?? plainLines.length > MAX_STATIC_CODE_LINES;
 	const useScrollArea = density !== "compact" || overflow !== "wrap";
 	const virtualizer = useVirtualizer({
 		count: plainLines.length,
@@ -229,6 +228,7 @@ function CodeContent({ code, lang, tokens, highlight = "auto", showLineNumbers =
 			plain: plainLines[item.index] ?? "",
 			overflow,
 			showLineNumbers,
+			highlighted: highlightedLineNumbers.has(startLine + item.index),
 			measureRef: virtualizer.measureElement,
 			style: {
 				position: "absolute",
@@ -250,7 +250,8 @@ function CodeContent({ code, lang, tokens, highlight = "auto", showLineNumbers =
 			tokens: resolvedTokens?.[index] ?? null,
 			plain,
 			overflow,
-			showLineNumbers
+			showLineNumbers,
+			highlighted: highlightedLineNumbers.has(startLine + index)
 		}, index))
 	});
 	const content = useScrollArea ? /* @__PURE__ */ jsx(ScrollArea, {
@@ -278,15 +279,35 @@ function CodeContent({ code, lang, tokens, highlight = "auto", showLineNumbers =
 		...props,
 		children: grid
 	});
-	if (hasHeader || chrome === "embedded") return content;
+	if (hasHeader || !copy) 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]
 	});
 }
+function CodeEditable({ value, defaultValue = "", onValueChange, onChange, fileName, className, "aria-label": ariaLabel, ...props }) {
+	const { overflow } = useCodeContext();
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const currentValue = value ?? uncontrolledValue;
+	function handleChange(event) {
+		if (value === void 0) setUncontrolledValue(event.target.value);
+		onValueChange?.(event.target.value);
+		onChange?.(event);
+	}
+	return /* @__PURE__ */ jsx("textarea", {
+		"data-control-ui": "code",
+		"data-control-family": "code",
+		"data-slot": "editor",
+		value: currentValue,
+		onChange: handleChange,
+		"aria-label": ariaLabel ?? (fileName ? `${fileName} code` : "Code editor"),
+		spellCheck: false,
+		className: cn("block w-full max-w-full resize-y overflow-auto", overflow === "scroll" ? "whitespace-pre" : "whitespace-pre-wrap break-words", className),
+		...props
+	});
+}
 //#endregion
-export { Code, CodeActions, CodeContent, CodeCopy, CodeFloatingCopy, CodeHeader, CodeTitle, CodeTokenLine, useCodeTokens };
+export { Code, CodeActions, CodeContent, CodeCopy, CodeEditable, CodeFloatingCopy, CodeHeader, CodeTitle, CodeTokenLine, useCodeTokens };

package/dist/ui/collapsible.d.ts

@@ -2,7 +2,7 @@ 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"> & {
+export type CollapsibleProps = Omit<ComponentProps<"div">, "onChange"> & {
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
@@ -10,7 +10,7 @@ type CollapsibleProps = Omit<ComponentProps<"div">, "onChange"> & {
 } & {
   style?: CSSProperties & CollapsibleKnobStyle;
 };
-type CollapsibleTriggerProps = Omit<ComponentProps<"button">, "style"> & {
+export type CollapsibleTriggerProps = Omit<ComponentProps<"button">, "style"> & {
   "data-slot"?: string;
   render?: RenderProp<ComponentProps<"button">, {
     open: boolean;
@@ -18,14 +18,13 @@ type CollapsibleTriggerProps = Omit<ComponentProps<"button">, "style"> & {
   nativeButton?: boolean;
   style?: CSSProperties & CollapsibleKnobStyle;
 };
-type CollapsibleContentProps = ComponentProps<"div"> & {
+export 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 };
+export declare function Collapsible({ className, ...props }: CollapsibleProps): import("react").JSX.Element;
+export declare function CollapsibleTrigger({ render, className, children, ...props }: CollapsibleTriggerProps): import("react").JSX.Element;
+export declare function CollapsibleContent({ className, children, ...props }: CollapsibleContentProps): import("react").JSX.Element;
+//#endregion

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

@@ -5,8 +5,8 @@ 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 = {
+export type ColorFormat = "hex" | "rgb" | "hsl" | "oklch";
+export type ColorPickerProps = {
   value?: string;
   defaultValue?: string;
   onValueChange?: (value: string) => void;
@@ -20,43 +20,43 @@ type ColorPickerProps = {
   onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
   children?: ReactNode;
 };
-type ColorPickerTriggerProps = Omit<ComponentProps<"button">, "style"> & {
+export type ColorPickerTriggerProps = Omit<ComponentProps<"button">, "style"> & {
   style?: CSSProperties & ColorPickerKnobStyle;
 };
-type ColorPickerContentProps = Omit<ComponentProps<"div">, "style"> & {
+export 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"> & {
+export type ColorPickerPanelProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type ColorPickerAreaProps = Omit<ComponentProps<"div">, "style"> & {
+export type ColorPickerAreaProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ColorPickerKnobStyle;
 };
-type ColorPickerAreaThumbProps = Omit<ComponentProps<"div">, "style"> & {
+export type ColorPickerAreaThumbProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ColorPickerKnobStyle;
 };
-type ColorPickerHueProps = Omit<Pick<ComponentProps<"div">, "className" | "aria-label" | "aria-labelledby" | "style">, "style"> & {
+export 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"> & {
+export type ColorPickerAlphaProps = Omit<Pick<ComponentProps<"div">, "className" | "aria-label" | "aria-labelledby" | "style">, "style"> & {
   style?: CSSProperties & ColorPickerKnobStyle;
 };
-type ColorPickerWheelProps = Omit<ComponentProps<"div">, "style"> & {
+export type ColorPickerWheelProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ColorPickerKnobStyle;
 };
-type ColorPickerEyeDropperProps = Omit<Omit<ComponentProps<"button">, "onError">, "style"> & {
+export type ColorPickerEyeDropperProps = Omit<Omit<ComponentProps<"button">, "onError">, "style"> & {
   style?: CSSProperties & ButtonKnobStyle;
 };
-type ColorPickerInputProps = Omit<Omit<ComponentProps<"input">, "value" | "defaultValue" | "onChange" | "size">, "style"> & {
+export type ColorPickerInputProps = Omit<Omit<ComponentProps<"input">, "value" | "defaultValue" | "onChange" | "size">, "style"> & {
   style?: CSSProperties & ColorPickerKnobStyle;
 } & {
   size?: ControlSize;
 };
-type ColorPickerFormatSelectProps = {
+export type ColorPickerFormatSelectProps = {
   formats?: ColorFormat[];
   size?: ControlSize;
   className?: string;
@@ -64,38 +64,38 @@ type ColorPickerFormatSelectProps = {
   "aria-labelledby"?: string;
   style?: CSSProperties & ButtonKnobStyle;
 };
-type ColorPickerChannelsProps = ComponentProps<"div"> & {
+export type ColorPickerChannelsProps = ComponentProps<"div"> & {
   style?: CSSProperties & ColorPickerKnobStyle;
 };
-type ColorPickerChannelProps = Omit<Omit<ComponentProps<"div">, "children" | "aria-label">, "style"> & {
+export 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"> & {
+export type ColorPickerSwatchesProps = ComponentProps<"div"> & {
   colors?: string[];
   label?: ReactNode;
 } & {
   style?: CSSProperties & ColorPickerKnobStyle;
 };
-type ColorPickerSwatchProps = Omit<Omit<ComponentProps<"button">, "color">, "style"> & {
+export type ColorPickerSwatchProps = Omit<Omit<ComponentProps<"button">, "color">, "style"> & {
   style?: CSSProperties & ColorPickerKnobStyle;
 } & {
   color: string;
 };
-type ColorPickerSwatchAddProps = Omit<Omit<ComponentProps<"button">, "onClick">, "style"> & {
+export type ColorPickerSwatchAddProps = Omit<Omit<ComponentProps<"button">, "onClick">, "style"> & {
   style?: CSSProperties & ColorPickerKnobStyle;
 } & {
   onAdd?: (value: string) => void;
 };
-type ColorPickerContrastProps = Omit<Omit<ComponentProps<"div">, "children">, "style"> & {
+export type ColorPickerContrastProps = Omit<Omit<ComponentProps<"div">, "children">, "style"> & {
   style?: CSSProperties & ColorPickerKnobStyle;
 } & {
   background?: string;
 };
-type ColorPickerOutputProps = Omit<Omit<ComponentProps<"div">, "children">, "style"> & {
+export type ColorPickerOutputProps = Omit<Omit<ComponentProps<"div">, "children">, "style"> & {
   style?: CSSProperties & ColorPickerKnobStyle;
 } & {
   children?: ReactNode;
@@ -103,19 +103,19 @@ type ColorPickerOutputProps = Omit<Omit<ComponentProps<"div">, "children">, "sty
     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;
+export declare function ColorPicker({ open, defaultOpen, onOpenChange, children, ...state }: ColorPickerProps): import("react").JSX.Element;
+export declare function ColorPickerTrigger({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: ColorPickerTriggerProps): import("react").JSX.Element;
+export declare function ColorPickerContent({ className, children, side, align, sideOffset, ...props }: ColorPickerContentProps): import("react").JSX.Element;
+export declare function ColorPickerPanel({ className, children, ...props }: ColorPickerPanelProps): import("react").JSX.Element;
+export declare function ColorPickerArea({ className, style, ...props }: ColorPickerAreaProps): import("react").JSX.Element;
+export declare function ColorPickerAreaThumb({ className, ...props }: ColorPickerAreaThumbProps): import("react").JSX.Element;
+export declare function ColorPickerHue({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: ColorPickerHueProps): import("react").JSX.Element;
+export declare function ColorPickerAlpha({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: ColorPickerAlphaProps): import("react").JSX.Element | null;
+export declare function ColorPickerWheel({ className, style, ...props }: ColorPickerWheelProps): import("react").JSX.Element;
+export declare function ColorPickerInput({ size, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: ColorPickerInputProps): import("react").JSX.Element;
+export declare function ColorPickerFormatSelect({ formats, size, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, style }: ColorPickerFormatSelectProps): import("react").JSX.Element;
+export declare function ColorPickerChannels({ className, children, ...props }: ColorPickerChannelsProps): import("react").JSX.Element;
+export declare function ColorPickerChannel({ channel, label, className, "aria-label": ariaLabel, ...props }: ColorPickerChannelProps): import("react").JSX.Element | null;
 declare global {
   interface Window {
     EyeDropper?: {
@@ -127,11 +127,10 @@ declare global {
     };
   }
 }
-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 };
+export declare function ColorPickerEyeDropper({ className, children, ...props }: ColorPickerEyeDropperProps): import("react").JSX.Element | null;
+export declare function ColorPickerSwatches({ colors, label, className, children, ...props }: ColorPickerSwatchesProps): import("react").JSX.Element;
+export declare function ColorPickerSwatch({ color, className, "aria-label": ariaLabel, ...props }: ColorPickerSwatchProps): import("react").JSX.Element;
+export declare function ColorPickerSwatchAdd({ onAdd, className, children, ...props }: ColorPickerSwatchAddProps): import("react").JSX.Element;
+export declare function ColorPickerContrast({ background, className, ...props }: ColorPickerContrastProps): import("react").JSX.Element | null;
+export declare function ColorPickerOutput({ className, children, renderValue, ...props }: ColorPickerOutputProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/color-picker.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { skinEffects, skinId } from "../skin.js";
+import { controlEffectsAttribute } from "../skin.js";
+import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { formatColor, getChannels, hsvaToRgba, parseColor, pointToHueSat, pointToSaturationValue, setChannel } from "../lib/color.js";
@@ -179,17 +180,18 @@ function ColorPickerTrigger({ className, "aria-label": ariaLabel, "aria-labelled
 	});
 }
 function ColorPickerContent({ className, children, side = "bottom", align = "center", sideOffset = 6, ...props }) {
+	const skin = useSkin();
 	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
 		"data-control-ui": "color-picker",
 		"data-popup-kind": "color-picker",
 		"data-control-family": "popup",
 		"data-slot": "positioner",
-		"data-skin": skinId(),
-		"data-effects": skinEffects(),
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
 		side,
 		align,
 		sideOffset,
-		className: "z-[80]",
+		className: "z-(--z-popup)",
 		children: /* @__PURE__ */ jsx(Popover.Popup, {
 			"data-control-ui": "color-picker",
 			"data-popup-kind": "color-picker",
@@ -324,7 +326,7 @@ function ColorPickerHue({ className, "aria-label": ariaLabel, "aria-labelledby":
 		step: 1,
 		disabled,
 		onValueChange: (next) => setHsva({ h: Array.isArray(next) ? next[0] : next }),
-		className: cn("relative flex w-full touch-none select-none items-center", className),
+		className: cn("relative flex w-full touch-pan-y select-none items-center", className),
 		...props,
 		children: /* @__PURE__ */ jsx(Slider.Control, {
 			className: "flex h-full w-full items-center",
@@ -363,7 +365,7 @@ function ColorPickerAlpha({ className, "aria-label": ariaLabel, "aria-labelledby
 		step: .01,
 		disabled,
 		onValueChange: (next) => setHsva({ a: Array.isArray(next) ? next[0] : next }),
-		className: cn("relative flex w-full touch-none select-none items-center", className),
+		className: cn("relative flex w-full touch-pan-y select-none items-center", className),
 		...props,
 		children: /* @__PURE__ */ jsx(Slider.Control, {
 			className: "flex h-full w-full items-center",

package/dist/ui/combobox-disabled-selection.d.ts

@@ -1,5 +1,4 @@
 //#region src/ui/combobox-disabled-selection.d.ts
-declare function shouldAcceptComboboxValueChange<Value>(value: Value | null, disabledValues: ReadonlySet<unknown>): boolean;
-declare function emitComboboxValueChange<Value>(value: Value | null, disabledValues: ReadonlySet<unknown>, onValueChange: (value: Value | null) => void): boolean;
-//#endregion
-export { emitComboboxValueChange, shouldAcceptComboboxValueChange };
+export declare function shouldAcceptComboboxValueChange<Value>(value: Value | null, disabledValues: ReadonlySet<unknown>): boolean;
+export declare function emitComboboxValueChange<Value>(value: Value | null, disabledValues: ReadonlySet<unknown>, onValueChange: (value: Value | null) => void): boolean;
+//#endregion