@ctrl-ui/react 0.9.11 → 0.9.13

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

@@ -46,7 +46,7 @@ function CommandDialog({ title = "Command palette", description = "Search for a
 					"data-popup-kind": "command",
 					"data-control-family": "popup",
 					"data-slot": "dialog-root",
-					className: cn("grid grid-rows-[auto_1fr] in-data-[starting-style]:grid-rows-[auto_0fr]", commandProps?.className),
+					className: cn("grid grid-rows-[auto_1fr]", commandProps?.className),
 					children
 				})
 			]
@@ -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/dropzone.d.ts

@@ -5,6 +5,7 @@ import { DropzoneKnobStyle } from "../knob-contracts/dropzone-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/ui/dropzone.d.ts
 export type DropzoneOverlayScope = "local" | "global";
+export type DropzoneSize = "default" | "sm";
 export type DropzoneProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange" | "onDrop" | "onError"> & {
   value?: readonly File[];
   defaultValue?: readonly File[];
@@ -16,6 +17,7 @@ export type DropzoneProps = Omit<ComponentProps<"div">, "defaultValue" | "onChan
   getFilesFromEvent?: DropzoneGetFilesFromEvent;
   onDrop?: (details: DropzoneDropDetails) => void;
   onError?: (error: Error) => void;
+  size?: DropzoneSize;
 } & {
   style?: CSSProperties & DropzoneKnobStyle;
 };
@@ -44,6 +46,7 @@ export type DropzoneRejectionListProps = Omit<ComponentProps<"ul">, "children">
 };
 export type DropzoneContextValue = UseDropzoneReturn & {
   registerGlobalOverlay: () => () => void;
+  size: DropzoneSize;
 };
 export type DropzoneStatusProps = Omit<ComponentProps<"div">, "children" | "style"> & {
   children?: (state: DropzoneContextValue) => ReactNode;
@@ -54,7 +57,7 @@ export type DropzoneRemoveProps = ComponentProps<typeof Button> & {
 };
 export type DropzoneClearProps = ComponentProps<typeof Button>;
 export declare function useDropzoneContext(): DropzoneContextValue;
-export declare function Dropzone({ value, defaultValue, onValueChange, policy, disabled, drag, paste, getFilesFromEvent, onDrop, onError, className, children, ...props }: DropzoneProps): import("react").JSX.Element;
+export declare function Dropzone({ value, defaultValue, onValueChange, policy, disabled, drag, paste, getFilesFromEvent, onDrop, onError, size, className, children, ...props }: DropzoneProps): import("react").JSX.Element;
 export declare function DropzoneArea({ className, ...props }: DropzoneAreaProps): import("react").JSX.Element;
 export declare function DropzoneInput({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: DropzoneInputProps): import("react").JSX.Element;
 export declare function DropzoneTrigger({ className, children, onClick, disabled, ref, ...props }: DropzoneTriggerProps): import("react").JSX.Element;

package/dist/ui/dropzone.js

@@ -64,7 +64,7 @@ function useFocusTargetRef(kind, ref) {
 		};
 	};
 }
-function Dropzone({ value, defaultValue, onValueChange, policy, disabled, drag, paste, getFilesFromEvent, onDrop, onError, className, children, ...props }) {
+function Dropzone({ value, defaultValue, onValueChange, policy, disabled, drag, paste, getFilesFromEvent, onDrop, onError, size = "default", className, children, ...props }) {
 	const [globalOverlayCount, setGlobalOverlayCount] = useState(0);
 	const [focusTargets] = useState(createFocusTargets);
 	const [registerGlobalOverlay] = useState(() => () => {
@@ -91,7 +91,8 @@ function Dropzone({ value, defaultValue, onValueChange, policy, disabled, drag,
 	});
 	const context = {
 		...dropzone,
-		registerGlobalOverlay
+		registerGlobalOverlay,
+		size
 	};
 	const empty = dropzone.value.length === 0 && dropzone.fileRejections.length === 0;
 	return /* @__PURE__ */ jsx(DropzoneContext.Provider, {
@@ -103,6 +104,7 @@ function Dropzone({ value, defaultValue, onValueChange, policy, disabled, drag,
 				"data-control-ui": "dropzone",
 				"data-control-family": "dropzone",
 				"data-slot": "root",
+				"data-size": size,
 				"data-disabled": dropzone.disabled ? "true" : void 0,
 				"data-empty": empty ? "true" : void 0,
 				className: cn("min-w-0", className),
@@ -156,13 +158,16 @@ function DropzoneTrigger({ className, children, onClick, disabled, ref, ...props
 		"data-slot": "trigger",
 		"data-state": context.visualState,
 		"data-disabled": triggerDisabled || busy ? "true" : void 0,
-		className: cn("flex w-full cursor-pointer flex-col items-center justify-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed", className),
+		className: cn("flex w-full cursor-pointer items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed", context.size === "sm" ? "flex-row justify-start [&>svg]:size-4 [&>svg]:shrink-0" : "flex-col justify-center", className),
 		onClick: (event) => {
 			if (busy) return;
 			onClick?.(event);
 			if (!event.defaultPrevented) context.open();
 		},
-		children: children ?? /* @__PURE__ */ jsx(DropzoneFeedback, { state: context.visualState })
+		children: children ?? /* @__PURE__ */ jsx(DropzoneFeedback, {
+			state: context.visualState,
+			size: context.size
+		})
 	});
 }
 function DropzoneOverlay({ scope = "local", className, children, ...props }) {
@@ -182,7 +187,10 @@ function DropzoneOverlay({ scope = "local", className, children, ...props }) {
 		"data-active": active ? "true" : void 0,
 		"data-scope": scope,
 		className: cn("pointer-events-none absolute inset-0 z-10 hidden items-center justify-center data-[active=true]:flex", className),
-		children: children ?? /* @__PURE__ */ jsx(DropzoneFeedback, { state: context.visualState })
+		children: children ?? /* @__PURE__ */ jsx(DropzoneFeedback, {
+			state: context.visualState,
+			size: context.size
+		})
 	});
 }
 function DropzoneFileList({ className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
@@ -284,7 +292,7 @@ function DropzoneClear({ children, onClick, disabled, ...props }) {
 		children: children ?? "Clear all"
 	});
 }
-function DropzoneFeedback({ state }) {
+function DropzoneFeedback({ state, size }) {
 	let icon = /* @__PURE__ */ jsx(CloudUpload, { "aria-hidden": "true" });
 	let message = "Drop files here or choose files.";
 	if (state === "processing") {
@@ -310,12 +318,12 @@ function DropzoneFeedback({ state }) {
 		"data-control-ui": "dropzone",
 		"data-control-family": "dropzone",
 		"data-slot": "feedback",
-		className: "flex flex-col items-center",
+		className: cn("flex items-center", size === "sm" ? "flex-row" : "flex-col"),
 		children: [/* @__PURE__ */ jsx("span", {
 			"data-control-ui": "dropzone",
 			"data-control-family": "dropzone",
 			"data-slot": "feedback-icon",
-			className: "[&>svg]:size-6",
+			className: size === "sm" ? "flex [&>svg]:size-4" : "[&>svg]:size-6",
 			children: icon
 		}), /* @__PURE__ */ jsx("span", {
 			"data-control-ui": "dropzone",

package/dist/ui/field.d.ts

@@ -11,7 +11,9 @@ export type FieldProps = ComponentProps<"div"> & {
 } & {
   style?: CSSProperties & FieldKnobStyle;
 };
+export type FieldLabelVariant = "default" | "card";
 export type FieldLabelProps = Omit<ComponentProps<"label">, "style"> & {
+  variant?: FieldLabelVariant;
   style?: CSSProperties & FieldKnobStyle;
 };
 export type FieldContentProps = ComponentProps<"div"> & {
@@ -41,6 +43,7 @@ export type FieldSeparatorProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
 export type FieldItemProps = ComponentProps<"div"> & {
+  disabled?: boolean;
   style?: CSSProperties & FieldKnobStyle;
 };
 export type FieldSetProps = Omit<ComponentProps<"fieldset">, "style"> & {
@@ -54,7 +57,7 @@ export type FieldLegendProps = Omit<ComponentProps<"div">, "style"> & {
 export declare function Field({ className, orientation, ...props }: FieldProps): import("react").JSX.Element;
 export declare function FieldContent({ className, ...props }: FieldContentProps): import("react").JSX.Element;
 export declare function FieldTitle({ className, ...props }: FieldTitleProps): import("react").JSX.Element;
-export declare function FieldLabel({ className, ...props }: FieldLabelProps): import("react").JSX.Element;
+export declare function FieldLabel({ className, variant, ...props }: FieldLabelProps): import("react").JSX.Element;
 type RefinedFieldControlProps = FieldControlProps & Pick<ComponentProps<typeof Field$1.Control>, "render">;
 export declare function FieldControl({ className, render, ...props }: RefinedFieldControlProps): import("react").JSX.Element;
 export declare function FieldDescription({ className, ...props }: FieldDescriptionProps): import("react").JSX.Element;

package/dist/ui/field.js

@@ -45,13 +45,15 @@ function FieldTitle({ className, ...props }) {
 		...props
 	});
 }
-function FieldLabel({ className, ...props }) {
+function FieldLabel({ className, variant = "default", ...props }) {
 	return /* @__PURE__ */ jsx(Field$1.Label, {
 		"data-control-ui": "field",
 		"data-control-family": "field",
 		"data-field-kind": "field",
 		"data-slot": "label",
-		className,
+		"data-variant": variant,
+		"data-focus-ring": variant === "card" ? "within" : void 0,
+		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 };