@ctrl-ui/react 0.9.12 → 0.9.14

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

@@ -1,3 +1,4 @@
+import { ButtonKnobStyle } from "../knob-contracts/button-knobs.js";
 import { ColorPickerKnobStyle } from "../knob-contracts/color-picker-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/ui/color-picker-swatches.d.ts
@@ -12,12 +13,12 @@ export type ColorPickerSwatchProps = Omit<Omit<ComponentProps<"button">, "color"
 } & {
   color: string;
 };
-export type ColorPickerSwatchAddProps = Omit<Omit<ComponentProps<"button">, "onClick">, "style"> & {
-  style?: CSSProperties & ColorPickerKnobStyle;
+export type ColorPickerSwatchAddProps = Omit<ComponentProps<"button">, "onClick" | "style"> & {
+  style?: CSSProperties & ButtonKnobStyle;
 } & {
   onAdd?: (value: string) => void;
 };
 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 ColorPickerSwatchAdd({ onAdd, children, ...props }: ColorPickerSwatchAddProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/color-picker-swatches.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
 import { formatColor, parseColor } from "../lib/color.js";
 import { useColorPicker } from "./color-picker-context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -57,17 +58,16 @@ function ColorPickerSwatch({ color, className, "aria-label": ariaLabel, ...props
 		})]
 	});
 }
-function ColorPickerSwatchAdd({ onAdd, className, children, ...props }) {
+function ColorPickerSwatchAdd({ onAdd, children, ...props }) {
 	const { valueString, disabled } = useColorPicker();
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		"data-control-ui": "color-picker",
-		"data-control-family": "color-picker",
-		"data-slot": "swatch-add",
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "dashed",
+		size: "xs",
+		iconOnly: true,
+		"data-color-picker-swatch-add": "true",
 		"aria-label": "Add current color",
 		disabled,
 		onClick: () => onAdd?.(valueString),
-		className: cn("relative flex shrink-0 cursor-pointer items-center justify-center disabled:cursor-not-allowed", className),
 		...props,
 		children: children ?? /* @__PURE__ */ jsx(PlusIcon, {})
 	});
@@ -81,7 +81,6 @@ function sameColor(a, b) {
 function PlusIcon() {
 	return /* @__PURE__ */ jsx("svg", {
 		viewBox: "0 0 16 16",
-		className: "size-3.5",
 		fill: "none",
 		stroke: "currentColor",
 		strokeWidth: "1.5",

package/dist/ui/command.d.ts

@@ -46,6 +46,18 @@ export type CommandItemProps = Omit<ComponentProps<typeof Command$1.Item>, "styl
   style?: CSSProperties & PopupKnobStyle;
 };
 export declare function CommandItem({ className, disabled, onSelect, ...props }: CommandItemProps): import("react").JSX.Element;
+export type CommandItemContentProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+export declare function CommandItemContent({ className, ...props }: CommandItemContentProps): import("react").JSX.Element;
+export type CommandItemTitleProps = Omit<ComponentProps<"span">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+export declare function CommandItemTitle({ className, ...props }: CommandItemTitleProps): import("react").JSX.Element;
+export type CommandItemDescriptionProps = Omit<ComponentProps<"span">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+export declare function CommandItemDescription({ className, ...props }: CommandItemDescriptionProps): import("react").JSX.Element;
 export type CommandShortcutProps = Omit<ComponentProps<"span">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };

package/dist/ui/command.js

@@ -225,6 +225,36 @@ function CommandItem({ className, disabled, onSelect, ...props }) {
 		onSelect: handleSelect
 	});
 }
+function CommandItemContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "command",
+		"data-popup-kind": "command",
+		"data-control-family": "popup",
+		"data-slot": "item-content",
+		className: cn("flex min-w-0 flex-1 flex-col", className),
+		...props
+	});
+}
+function CommandItemTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "command",
+		"data-popup-kind": "command",
+		"data-control-family": "popup",
+		"data-slot": "item-title",
+		className: cn("truncate", className),
+		...props
+	});
+}
+function CommandItemDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "command",
+		"data-popup-kind": "command",
+		"data-control-family": "popup",
+		"data-slot": "item-description",
+		className: cn("truncate", className),
+		...props
+	});
+}
 function CommandShortcut({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-control-ui": "command",
@@ -238,4 +268,4 @@ function CommandShortcut({ className, ...props }) {
 	});
 }
 //#endregion
-export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut };
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandItemContent, CommandItemDescription, CommandItemTitle, CommandList, CommandLoading, CommandSeparator, CommandShortcut };

package/dist/ui/field.js

@@ -53,7 +53,7 @@ function FieldLabel({ className, variant = "default", ...props }) {
 		"data-slot": "label",
 		"data-variant": variant,
 		"data-focus-ring": variant === "card" ? "within" : void 0,
-		className: cn(variant === "card" && "flex w-full cursor-pointer items-start gap-3 has-[[data-disabled]]:cursor-not-allowed [&>[data-control-family=choice]]:mt-[calc((1lh_-_var(--spacing)*4)/2)]", className),
+		className: cn(variant === "card" && "flex w-full cursor-pointer items-start gap-3 self-stretch has-[[data-disabled]]:cursor-not-allowed [&>[data-control-family=choice]]:mt-[calc((1lh_-_var(--spacing)*4)/2)]", className),
 		...props
 	});
 }

package/dist/ui/gradient-editor.d.ts

@@ -1,3 +1,4 @@
+import { ButtonKnobStyle } from "../knob-contracts/button-knobs.js";
 import { GradientEditorKnobStyle } from "../knob-contracts/gradient-editor-knobs.js";
 import { GradientInterpolation, GradientStop, GradientType, GradientValue } from "../lib/gradient.js";
 import { CSSProperties, ComponentProps, RefObject } from "react";
@@ -20,7 +21,7 @@ export type GradientEditorStopProps = Omit<ComponentProps<"button">, "style"> &
   style?: CSSProperties & GradientEditorKnobStyle;
 };
 export type GradientEditorStopAddProps = Omit<ComponentProps<"button">, "onClick" | "style"> & {
-  style?: CSSProperties & GradientEditorKnobStyle;
+  style?: CSSProperties & ButtonKnobStyle;
 };
 type GradientEditorContextValue = GradientValue & {
   gradient: string;
@@ -42,6 +43,6 @@ export declare function GradientEditor({ value: controlledValue, defaultValue, o
 export declare function GradientEditorPreview({ className, style, "aria-label": ariaLabel, ...props }: GradientEditorPreviewProps): import("react").JSX.Element;
 export declare function GradientEditorTrack({ className, children, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: GradientEditorTrackProps): import("react").JSX.Element;
 export declare function GradientEditorStop({ stop, className, style, onPointerDown, onKeyDown, onFocus, onDoubleClick, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...props }: GradientEditorStopProps): import("react").JSX.Element;
-export declare function GradientEditorStopAdd({ className, children, ...props }: GradientEditorStopAddProps): import("react").JSX.Element;
+export declare function GradientEditorStopAdd({ children, ...props }: GradientEditorStopAddProps): import("react").JSX.Element;
 //#endregion
 export type { GradientInterpolation, GradientStop, GradientType, GradientValue };

package/dist/ui/gradient-editor.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
 import { useColorArea } from "../hooks/use-color-area.js";
 import { formatGradient, gradientColorAt } from "../lib/gradient.js";
 import { createContext, useContext, useRef, useState } from "react";
@@ -244,20 +245,18 @@ function GradientEditorStop({ stop, className, style, onPointerDown, onKeyDown,
 		...props
 	});
 }
-function GradientEditorStopAdd({ className, children, ...props }) {
+function GradientEditorStopAdd({ children, ...props }) {
 	const { addStop } = useGradientEditor();
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		"data-control-ui": "gradient-editor",
-		"data-control-family": "gradient-editor",
-		"data-slot": "stop-add",
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "dashed",
+		size: "xs",
+		iconOnly: true,
+		"data-gradient-editor-stop-add": "true",
 		"aria-label": "Add gradient stop",
 		onClick: () => addStop(.5),
-		className: cn("flex shrink-0 cursor-pointer items-center justify-center", className),
 		...props,
 		children: children ?? /* @__PURE__ */ jsx("svg", {
 			viewBox: "0 0 16 16",
-			className: "size-3.5",
 			fill: "none",
 			stroke: "currentColor",
 			strokeWidth: "1.5",

package/dist/ui/markdown-components.d.ts

@@ -0,0 +1,27 @@
+import { MarkdownA, MarkdownBlockquote, MarkdownCodeProps, MarkdownEm, MarkdownH1, MarkdownH2, MarkdownH3, MarkdownH4, MarkdownH5, MarkdownH6, MarkdownHr, MarkdownInlineCode, MarkdownInput, MarkdownLi, MarkdownOl, MarkdownP, MarkdownStrong, MarkdownTable, MarkdownTd, MarkdownTh, MarkdownUl } from "./markdown-elements.js";
+//#region src/ui/markdown-components.d.ts
+export declare function MarkdownCode({ className, children, node: _node, ...props }: MarkdownCodeProps): import("react").JSX.Element;
+export declare const markdownComponents: {
+  input: typeof MarkdownInput;
+  code: typeof MarkdownCode;
+  inlineCode: typeof MarkdownInlineCode;
+  h1: typeof MarkdownH1;
+  h2: typeof MarkdownH2;
+  h3: typeof MarkdownH3;
+  h4: typeof MarkdownH4;
+  h5: typeof MarkdownH5;
+  h6: typeof MarkdownH6;
+  p: typeof MarkdownP;
+  ul: typeof MarkdownUl;
+  ol: typeof MarkdownOl;
+  li: typeof MarkdownLi;
+  a: typeof MarkdownA;
+  blockquote: typeof MarkdownBlockquote;
+  hr: typeof MarkdownHr;
+  strong: typeof MarkdownStrong;
+  em: typeof MarkdownEm;
+  table: typeof MarkdownTable;
+  th: typeof MarkdownTh;
+  td: typeof MarkdownTd;
+};
+//#endregion

package/dist/ui/markdown-components.js

@@ -0,0 +1,57 @@
+"use client";
+import { Code, CodeActions, CodeContent, CodeCopy, CodeHeader, CodeTitle } from "./code.js";
+import { CodeDiff } from "./code-diff.js";
+import { MarkdownA, MarkdownBlockquote, MarkdownEm, MarkdownH1, MarkdownH2, MarkdownH3, MarkdownH4, MarkdownH5, MarkdownH6, MarkdownHr, MarkdownInlineCode, MarkdownInput, MarkdownLi, MarkdownOl, MarkdownP, MarkdownStrong, MarkdownTable, MarkdownTd, MarkdownTh, MarkdownUl } from "./markdown-elements.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/markdown-components.tsx
+function textValue(children) {
+	return Array.isArray(children) ? children.join("") : String(children ?? "");
+}
+function languageFromClassName(className) {
+	return /language-([\w-]+)/.exec(className ?? "")?.[1];
+}
+function MarkdownCode({ className, children, node: _node, ...props }) {
+	const lang = languageFromClassName(className);
+	const rawValue = textValue(children);
+	if (!lang && !rawValue.includes("\n")) return /* @__PURE__ */ jsx(MarkdownInlineCode, {
+		className,
+		...props,
+		children
+	});
+	const value = rawValue.replace(/^\n/, "").replace(/\n$/, "");
+	if (lang === "diff" && value.includes("@@")) return /* @__PURE__ */ jsx(CodeDiff, {
+		patch: value,
+		lang: "diff",
+		diffStyle: "unified"
+	});
+	return /* @__PURE__ */ jsxs(Code, { children: [/* @__PURE__ */ jsxs(CodeHeader, { children: [lang ? /* @__PURE__ */ jsx(CodeTitle, { children: lang }) : null, /* @__PURE__ */ jsx(CodeActions, { children: /* @__PURE__ */ jsx(CodeCopy, { value }) })] }), /* @__PURE__ */ jsx(CodeContent, {
+		code: value,
+		lang,
+		highlight: lang ? "auto" : "none"
+	})] });
+}
+const markdownComponents = {
+	input: MarkdownInput,
+	code: MarkdownCode,
+	inlineCode: MarkdownInlineCode,
+	h1: MarkdownH1,
+	h2: MarkdownH2,
+	h3: MarkdownH3,
+	h4: MarkdownH4,
+	h5: MarkdownH5,
+	h6: MarkdownH6,
+	p: MarkdownP,
+	ul: MarkdownUl,
+	ol: MarkdownOl,
+	li: MarkdownLi,
+	a: MarkdownA,
+	blockquote: MarkdownBlockquote,
+	hr: MarkdownHr,
+	strong: MarkdownStrong,
+	em: MarkdownEm,
+	table: MarkdownTable,
+	th: MarkdownTh,
+	td: MarkdownTd
+};
+//#endregion
+export { MarkdownCode, markdownComponents };

package/dist/ui/markdown-elements.d.ts

@@ -1,7 +1,7 @@
 import { MarkdownKnobStyle } from "../knob-contracts/markdown-knobs.js";
 import { CSSProperties, ComponentProps, JSX } from "react";
 //#region src/ui/markdown-elements.d.ts
-type MarkdownCodeProps = ComponentProps<"code"> & {
+export type MarkdownCodeProps = ComponentProps<"code"> & {
   node?: unknown;
 } & {
   style?: CSSProperties & MarkdownKnobStyle;
@@ -11,10 +11,14 @@ type MarkdownElementProps<Tag extends keyof JSX.IntrinsicElements> = ComponentPr
 } & {
   style?: CSSProperties & MarkdownKnobStyle;
 };
+export type MarkdownRootProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & MarkdownKnobStyle;
+};
+export declare function MarkdownRoot({ className, ...props }: MarkdownRootProps): JSX.Element;
+export declare function MarkdownFlow(props: MarkdownRootProps): JSX.Element;
 export declare function MarkdownInput({ type, checked, className, node: _node, ...props }: MarkdownElementProps<"input">): JSX.Element;
 export declare function MarkdownInlineCode({ className, children, node: _node, ...props }: MarkdownCodeProps): JSX.Element;
 export declare function MarkdownPre({ children, node: _node }: MarkdownElementProps<"pre">): JSX.Element;
-export declare function MarkdownCode({ className, children, node: _node, ...props }: MarkdownCodeProps): JSX.Element;
 export declare function MarkdownH1({ className, node: _node, ...props }: MarkdownElementProps<"h1">): JSX.Element;
 export declare function MarkdownH2({ className, node: _node, ...props }: MarkdownElementProps<"h2">): JSX.Element;
 export declare function MarkdownH3({ className, node: _node, ...props }: MarkdownElementProps<"h3">): JSX.Element;
@@ -33,27 +37,4 @@ export declare function MarkdownEm({ className, node: _node, ...props }: Markdow
 export declare function MarkdownTable({ className, children, node: _node, ...props }: MarkdownElementProps<"table">): JSX.Element;
 export declare function MarkdownTh({ className, node: _node, ...props }: MarkdownElementProps<"th">): JSX.Element;
 export declare function MarkdownTd({ className, node: _node, ...props }: MarkdownElementProps<"td">): JSX.Element;
-export declare const markdownComponents: {
-  input: typeof MarkdownInput;
-  code: typeof MarkdownCode;
-  inlineCode: typeof MarkdownInlineCode;
-  h1: typeof MarkdownH1;
-  h2: typeof MarkdownH2;
-  h3: typeof MarkdownH3;
-  h4: typeof MarkdownH4;
-  h5: typeof MarkdownH5;
-  h6: typeof MarkdownH6;
-  p: typeof MarkdownP;
-  ul: typeof MarkdownUl;
-  ol: typeof MarkdownOl;
-  li: typeof MarkdownLi;
-  a: typeof MarkdownA;
-  blockquote: typeof MarkdownBlockquote;
-  hr: typeof MarkdownHr;
-  strong: typeof MarkdownStrong;
-  em: typeof MarkdownEm;
-  table: typeof MarkdownTable;
-  th: typeof MarkdownTh;
-  td: typeof MarkdownTd;
-};
 //#endregion

package/dist/ui/markdown-elements.js

@@ -2,13 +2,28 @@
 import { cn } from "../lib/cn.js";
 import { ScrollArea } from "./scroll-area.js";
 import { Heading } from "./typography.js";
-import { Code, CodeActions, CodeContent, CodeCopy, CodeHeader, CodeTitle } from "./code.js";
 import { Checkbox } from "./checkbox.js";
-import { CodeDiff } from "./code-diff.js";
 import { markdownHeadingAttributes } from "./markdown-heading.js";
 import { createContext, use, useId } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 //#region src/ui/markdown-elements.tsx
+function MarkdownRoot({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "markdown",
+		"data-control-family": "markdown",
+		"data-slot": "root",
+		className: cn("[&>*:first-child]:mt-0 [&>*:last-child]:mb-0", className),
+		...props
+	});
+}
+function MarkdownFlow(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "markdown",
+		"data-control-family": "markdown",
+		"data-slot": "flow",
+		...props
+	});
+}
 const MarkdownTaskLabelContext = createContext(void 0);
 function MarkdownInput({ type, checked, className, node: _node, ...props }) {
 	const labelId = use(MarkdownTaskLabelContext);
@@ -26,12 +41,6 @@ function MarkdownInput({ type, checked, className, node: _node, ...props }) {
 		"aria-labelledby": labelId
 	});
 }
-function textValue(children) {
-	return Array.isArray(children) ? children.join("") : String(children ?? "");
-}
-function languageFromClassName(className) {
-	return /language-([\w-]+)/.exec(className ?? "")?.[1];
-}
 function MarkdownInlineCode({ className, children, node: _node, ...props }) {
 	return /* @__PURE__ */ jsx("code", {
 		"data-control-ui": "markdown",
@@ -45,26 +54,6 @@ function MarkdownInlineCode({ className, children, node: _node, ...props }) {
 function MarkdownPre({ children, node: _node }) {
 	return /* @__PURE__ */ jsx(Fragment$1, { children });
 }
-function MarkdownCode({ className, children, node: _node, ...props }) {
-	const lang = languageFromClassName(className);
-	const rawValue = textValue(children);
-	if (!lang && !rawValue.includes("\n")) return /* @__PURE__ */ jsx(MarkdownInlineCode, {
-		className,
-		...props,
-		children
-	});
-	const value = rawValue.replace(/^\n/, "").replace(/\n$/, "");
-	if (lang === "diff" && value.includes("@@")) return /* @__PURE__ */ jsx(CodeDiff, {
-		patch: value,
-		lang: "diff",
-		diffStyle: "unified"
-	});
-	return /* @__PURE__ */ jsxs(Code, { children: [/* @__PURE__ */ jsxs(CodeHeader, { children: [lang ? /* @__PURE__ */ jsx(CodeTitle, { children: lang }) : null, /* @__PURE__ */ jsx(CodeActions, { children: /* @__PURE__ */ jsx(CodeCopy, { value }) })] }), /* @__PURE__ */ jsx(CodeContent, {
-		code: value,
-		lang,
-		highlight: lang ? "auto" : "none"
-	})] });
-}
 function MarkdownH1({ className, node: _node, ...props }) {
 	const { class: headingClass } = markdownHeadingAttributes(1);
 	return /* @__PURE__ */ jsx(Heading, {
@@ -253,28 +242,5 @@ function MarkdownTd({ className, node: _node, ...props }) {
 		...props
 	});
 }
-const markdownComponents = {
-	input: MarkdownInput,
-	code: MarkdownCode,
-	inlineCode: MarkdownInlineCode,
-	h1: MarkdownH1,
-	h2: MarkdownH2,
-	h3: MarkdownH3,
-	h4: MarkdownH4,
-	h5: MarkdownH5,
-	h6: MarkdownH6,
-	p: MarkdownP,
-	ul: MarkdownUl,
-	ol: MarkdownOl,
-	li: MarkdownLi,
-	a: MarkdownA,
-	blockquote: MarkdownBlockquote,
-	hr: MarkdownHr,
-	strong: MarkdownStrong,
-	em: MarkdownEm,
-	table: MarkdownTable,
-	th: MarkdownTh,
-	td: MarkdownTd
-};
 //#endregion
-export { MarkdownA, MarkdownBlockquote, MarkdownCode, MarkdownEm, MarkdownH1, MarkdownH2, MarkdownH3, MarkdownH4, MarkdownH5, MarkdownH6, MarkdownHr, MarkdownInlineCode, MarkdownInput, MarkdownLi, MarkdownOl, MarkdownP, MarkdownPre, MarkdownStrong, MarkdownTable, MarkdownTd, MarkdownTh, MarkdownUl, markdownComponents };
+export { MarkdownA, MarkdownBlockquote, MarkdownEm, MarkdownFlow, MarkdownH1, MarkdownH2, MarkdownH3, MarkdownH4, MarkdownH5, MarkdownH6, MarkdownHr, MarkdownInlineCode, MarkdownInput, MarkdownLi, MarkdownOl, MarkdownP, MarkdownPre, MarkdownRoot, MarkdownStrong, MarkdownTable, MarkdownTd, MarkdownTh, MarkdownUl };

package/dist/ui/markdown.d.ts

@@ -1,15 +1,10 @@
-import { MarkdownKnobStyle } from "../knob-contracts/markdown-knobs.js";
-import { CSSProperties, ComponentProps } from "react";
+import { MarkdownRootProps } from "./markdown-elements.js";
+import { ComponentProps } from "react";
 //#region src/ui/markdown.d.ts
-export type MarkdownRootProps = Omit<ComponentProps<"div">, "style"> & {
-  style?: CSSProperties & MarkdownKnobStyle;
-};
 export type MarkdownProps = Omit<MarkdownRootProps, "children"> & {
   content: string;
   mode?: "streaming" | "static";
 };
-export declare function MarkdownRoot({ className, ...props }: MarkdownRootProps): import("react").JSX.Element;
-export declare function MarkdownFlow(props: MarkdownRootProps): import("react").JSX.Element;
 export declare function Markdown({ content, mode, className, ...props }: MarkdownProps): import("react").JSX.Element;
 export type MarkdownComponentProps = ComponentProps<typeof Markdown>;
 //#endregion

package/dist/ui/markdown.js

@@ -1,26 +1,9 @@
 "use client";
-import { cn } from "../lib/cn.js";
-import { markdownComponents } from "./markdown-elements.js";
+import { MarkdownFlow, MarkdownRoot } from "./markdown-elements.js";
+import { markdownComponents } from "./markdown-components.js";
 import { jsx } from "react/jsx-runtime";
 import { Streamdown } from "streamdown";
 //#region src/ui/markdown.tsx
-function MarkdownRoot({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-control-ui": "markdown",
-		"data-control-family": "markdown",
-		"data-slot": "root",
-		className: cn("[&>*:first-child]:mt-0 [&>*:last-child]:mb-0", className),
-		...props
-	});
-}
-function MarkdownFlow(props) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-control-ui": "markdown",
-		"data-control-family": "markdown",
-		"data-slot": "flow",
-		...props
-	});
-}
 function Markdown({ content, mode = "streaming", className, ...props }) {
 	return /* @__PURE__ */ jsx(MarkdownRoot, {
 		className,
@@ -36,4 +19,4 @@ function Markdown({ content, mode = "streaming", className, ...props }) {
 	});
 }
 //#endregion
-export { Markdown, MarkdownFlow, MarkdownRoot };
+export { Markdown };

package/dist/ui/phone-input.js

@@ -3,12 +3,12 @@ import { cn } from "../lib/cn.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { InputGroup, InputGroupAddon } from "./input-group.js";
 import { Input } from "./input.js";
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command.js";
 import { normalizePhoneInputText, normalizePhoneInputValue } from "../lib/phone-input-format.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import flags from "react-phone-number-input/flags";
 import PhoneNumberInput, { getCountryCallingCode, parsePhoneNumber } from "react-phone-number-input/max";
+import flags from "react-phone-number-input/flags";
 //#region src/ui/phone-input.tsx
 const FLAG_COMPONENTS = flags;
 const PhoneNumberInputWithRef = PhoneNumberInput;

package/lint/biome-preset.json

@@ -1,3 +1,10 @@
 {
-  "plugins": ["./node_modules/@ctrl-ui/react/lint/no-component-style-classes.grit"]
+  "plugins": [
+    "./node_modules/@ctrl-ui/react/lint/no-component-style-classes.grit",
+    "./node_modules/@ctrl-ui/react/lint/no-component-style-props.grit",
+    {
+      "path": "./node_modules/@ctrl-ui/react/lint/no-component-part-css.grit",
+      "includes": ["**/*.css", "!**/components/control-ui/**"]
+    }
+  ]
 }

package/lint/class-policy.mjs

@@ -36,7 +36,47 @@ const textLayoutSuffixes = [
   "clip",
 ];
 
-export const componentStyleClass = String.raw`[^${classDelimiter}]!${classEnd}|(?:^|[${classDelimiter}])![\w\[-]|(?:^|[^\w-])(?:p[xytrblse]?-|bg-[\w\[]|text-${classSuffixOtherThan(textLayoutSuffixes)}|font-|leading-|tracking-|border|divide-|rounded|shadow|inset-shadow|drop-shadow|ring\b|ring-|inset-ring|outline|opacity-|backdrop-|fill-|stroke-|caret-|accent-|scheme-|mask-|decoration-|underline|no-underline|overline|line-through|italic|not-italic|uppercase|lowercase|capitalize|normal-case|antialiased|subpixel-antialiased|ordinal|slashed-zero|(?:normal|lining|oldstyle|proportional|tabular)-nums|(?:diagonal|stacked)-fractions|(?:hover|focus|focus-visible|focus-within|active|disabled|enabled|open|checked|indeterminate|visited|target|invalid|valid|user-invalid|user-valid|required|optional|read-only|autofill|placeholder-shown|in-range|out-of-range|inert|starting|dark|placeholder|selection|marker|file|first-letter|first-line|backdrop|details-content|aria-[^:\s]*|data-[^:\s]*|group-[^:\s]*|peer-[^:\s]*|has-[^:\s]*|\*|\[&[^\s]*?\]):)`;
+const paintProperties = [
+  "padding",
+  "background",
+  "color",
+  "font",
+  "line-height",
+  "letter-spacing",
+  "border",
+  "outline",
+  "box-shadow",
+  "text-shadow",
+  "text-decoration",
+  "text-underline",
+  "text-transform",
+  "opacity",
+  "filter",
+  "backdrop-filter",
+  "fill",
+  "stroke",
+  "caret-color",
+  "accent-color",
+  "mask",
+  "-webkit-mask",
+  "-webkit-font-smoothing",
+  "-moz-osx-font-smoothing",
+];
+
+const camelCase = (property) =>
+  property.replace(/^-(\w)/, (_, first) => first.toUpperCase()).replace(/-(\w)/g, (_, letter) => letter.toUpperCase());
+
+export const paintProperty = String.raw`(?:${paintProperties.join("|")})(?:-[\w-]*)?`;
+
+export const componentStyleKey = String.raw`["']?(?:(?:${paintProperties.map(camelCase).join("|")})(?:[A-Z]\w*)?|${paintProperty})["']?`;
+
+const partAttribute = String.raw`data-(?:control|slot)\b`;
+
+export const componentPartClass = String.raw`\[&[^${classDelimiter}]*?${partAttribute}|(?:^|[${classDelimiter}:])\*{1,2}:data-\[(?:control|slot)\b`;
+
+export const componentPartSelector = String.raw`(?s).*\[${partAttribute}[^\s>+~]*\s*`;
+
+export const componentStyleClass = String.raw`[^${classDelimiter}]!${classEnd}|(?:^|[${classDelimiter}])![\w\[-]|(?:^|[^\w-])(?:p[xytrblse]?-|bg-[\w\[]|text-${classSuffixOtherThan(textLayoutSuffixes)}|font-|leading-|tracking-|border|divide-|rounded|shadow|inset-shadow|drop-shadow|ring\b|ring-|inset-ring|outline|opacity-|backdrop-|fill-|stroke-|caret-|accent-|scheme-|mask-|decoration-|underline|no-underline|overline|line-through|italic|not-italic|uppercase|lowercase|capitalize|normal-case|antialiased|subpixel-antialiased|ordinal|slashed-zero|(?:normal|lining|oldstyle|proportional|tabular)-nums|(?:diagonal|stacked)-fractions|blur(?:-|${classEnd})|brightness-|contrast-[\d\[]|grayscale|hue-rotate-|invert|saturate-|sepia|(?:hover|focus|focus-visible|focus-within|active|disabled|enabled|open|checked|indeterminate|visited|target|invalid|valid|user-invalid|user-valid|required|optional|read-only|autofill|placeholder-shown|in-range|out-of-range|inert|starting|dark|placeholder|selection|marker|file|first-letter|first-line|backdrop|details-content|aria-[^:\s]*|data-[^:\s]*|group-[^:\s]*|peer-[^:\s]*|has-[^:\s]*|\*|\[&[^\s]*?\]):)|(?:^|[^\w-])\[${paintProperty}:`;
 
 export const rawTypeClass = String.raw`(?:^|[^\w-])text-(?:micro|caption|label|body|body-lg|heading-[1-4]|display|xs|sm|base|lg|xl|[2-9]xl)\b|(?:^|[^\w-])text-\[\d[^\]]*\]`;
 
@@ -45,3 +85,12 @@ export const componentStyleMessage =
 
 export const rawTypeMessage =
   "Text size in className: render text through <Text>/<Heading> on the type scale, or size the control with its size prop or --cui-*-font-size knob.";
+
+export const componentPartMessage =
+  "className styles a Control UI component's parts from outside through a data-slot or data-control selector. The component owns its parts: use its props, compose its parts, or set a --cui-* knob on it.";
+
+export const componentStylePropMessage =
+  "Control UI component painted through style: color, type, padding, borders, radius, shadows and opacity belong to the component. Set a --cui-* knob in style or use its props; keep other style keys for layout.";
+
+export const componentPartCssMessage =
+  "Stylesheet paints a Control UI part: color, type, padding, borders, radius, shadows and opacity belong to the component recipe. Set the part's --cui-* knobs here instead, or use the component's props.";