@ctrl-ui/react 0.8.17 → 0.8.19

package/dist/ui/markdown.d.ts

@@ -6,9 +6,10 @@ export type MarkdownRootProps = Omit<ComponentProps<"div">, "style"> & {
 };
 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, className, ...props }: MarkdownProps): 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

@@ -21,13 +21,13 @@ function MarkdownFlow(props) {
 		...props
 	});
 }
-function Markdown({ content, className, ...props }) {
+function Markdown({ content, mode = "streaming", className, ...props }) {
 	return /* @__PURE__ */ jsx(MarkdownRoot, {
 		className,
 		...props,
 		children: /* @__PURE__ */ jsx(MarkdownFlow, { children: /* @__PURE__ */ jsx(Streamdown, {
-			mode: "streaming",
-			parseIncompleteMarkdown: true,
+			mode,
+			parseIncompleteMarkdown: mode === "streaming",
 			controls: false,
 			components: markdownComponents,
 			className: "cui-markdown-streamdown [&>[data-control-family]]:[margin-block:revert-layer]",

package/dist/ui/responsive-dialog.js

@@ -2,8 +2,8 @@
 import { cn } from "../lib/cn.js";
 import { Button } from "./button.js";
 import { PopupCloseButton } from "../popup-parts.js";
-import { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "./drawer.js";
 import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./dialog.js";
+import { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "./drawer.js";
 import { createContext, useContext, useState, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/responsive-dialog.tsx

package/dist/ui/sidebar-menu.js

@@ -2,8 +2,8 @@
 import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
-import { SidebarSurfaceContext, useSidebar } from "./sidebar-provider.js";
 import { TrackHighlight } from "../extensions/track-highlight.js";
+import { SidebarSurfaceContext, useSidebar } from "./sidebar-provider.js";
 import { createContext, useContext, useRef, useState } from "react";
 import { useRender } from "@base-ui/react/use-render";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/ui/sidebar.js

@@ -257,7 +257,7 @@ function SidebarContent({ className, children, ...props }) {
 		"data-slot": "content",
 		className: cn("min-h-0 flex-1 group-data-[collapsible=icon]:overflow-hidden", className),
 		lockAxis: "x",
-		viewportClassName: "overscroll-contain",
+		viewportClassName: "overscroll-y-contain",
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
 			"data-control-ui": "sidebar",

package/dist/ui/typography.d.ts

@@ -0,0 +1,44 @@
+import { ComponentProps, HTMLAttributes, Ref } from "react";
+//#region src/ui/typography.d.ts
+declare const sizeClassNames: {
+  readonly display: "text-display";
+  readonly "heading-1": "text-heading-1";
+  readonly "heading-2": "text-heading-2";
+  readonly "heading-3": "text-heading-3";
+  readonly "heading-4": "text-heading-4";
+  readonly "body-lg": "text-body-lg";
+  readonly body: "text-body";
+  readonly label: "text-label";
+  readonly caption: "text-caption";
+  readonly micro: "text-micro";
+};
+declare const toneClassNames: {
+  readonly default: undefined;
+  readonly muted: "text-muted-foreground";
+  readonly destructive: "text-destructive-text";
+};
+declare const weightClassNames: {
+  readonly normal: "font-normal";
+  readonly medium: "font-medium";
+  readonly semibold: "font-semibold";
+};
+export type TypeSize = keyof typeof sizeClassNames;
+export type TypeTone = keyof typeof toneClassNames;
+export type TextWeight = keyof typeof weightClassNames;
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type HeadingProps = ComponentProps<"h1"> & {
+  level: HeadingLevel;
+  size?: TypeSize;
+  tone?: TypeTone;
+};
+export declare function Heading({ level, size, tone, className, ...props }: HeadingProps): import("react").JSX.Element;
+export type TextTag = "p" | "span" | "div" | "small" | "strong" | "em" | "li" | "dt" | "dd" | "figcaption" | "legend" | "blockquote";
+export type TextProps = HTMLAttributes<HTMLElement> & {
+  ref?: Ref<HTMLElement>;
+  as?: TextTag;
+  size?: TypeSize;
+  weight?: TextWeight;
+  tone?: TypeTone;
+};
+export declare function Text({ as: Tag, size, weight, tone, className, ref, ...props }: TextProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/typography.js

@@ -0,0 +1,59 @@
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/typography.tsx
+const sizeClassNames = {
+	display: "text-display",
+	"heading-1": "text-heading-1",
+	"heading-2": "text-heading-2",
+	"heading-3": "text-heading-3",
+	"heading-4": "text-heading-4",
+	"body-lg": "text-body-lg",
+	body: "text-body",
+	label: "text-label",
+	caption: "text-caption",
+	micro: "text-micro"
+};
+const toneClassNames = {
+	default: void 0,
+	muted: "text-muted-foreground",
+	destructive: "text-destructive-text"
+};
+const weightClassNames = {
+	normal: "font-normal",
+	medium: "font-medium",
+	semibold: "font-semibold"
+};
+const headingSizeByLevel = {
+	1: "heading-1",
+	2: "heading-2",
+	3: "heading-3",
+	4: "heading-4",
+	5: "heading-4",
+	6: "heading-4"
+};
+function Heading({ level, size = headingSizeByLevel[level], tone = "default", className, ...props }) {
+	const Tag = `h${level}`;
+	return /* @__PURE__ */ jsx(Tag, {
+		"data-control-ui": "typography",
+		"data-control-family": "typography",
+		"data-slot": "heading",
+		className: cn(sizeClassNames[size], toneClassNames[tone], className),
+		...props
+	});
+}
+function attachRef(ref, node) {
+	if (typeof ref === "function") return ref(node);
+	if (ref) ref.current = node;
+}
+function Text({ as: Tag = "span", size = "body", weight, tone = "default", className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Tag, {
+		ref: (node) => attachRef(ref, node),
+		"data-control-ui": "typography",
+		"data-control-family": "typography",
+		"data-slot": "text",
+		className: cn(sizeClassNames[size], weight ? weightClassNames[weight] : void 0, toneClassNames[tone], className),
+		...props
+	});
+}
+//#endregion
+export { Heading, Text };

package/dist/ui/use-switch-drag.js

@@ -25,7 +25,7 @@ function useSwitchDrag() {
 				if (!(event.isPrimary && event.button === 0 && !isSwitchLocked(root)) || !thumbRef.current) return;
 				setDragProgress(null);
 				const styles = getComputedStyle(root);
-				const travel = root.clientWidth - Number.parseFloat(styles.paddingLeft) - Number.parseFloat(styles.paddingRight) - thumbRef.current.offsetWidth;
+				const travel = root.clientWidth - Number.parseFloat(styles.paddingLeft) - Number.parseFloat(styles.paddingRight) - Number.parseFloat(styles.getPropertyValue("--cui-switch-thumb-inline-size"));
 				if (travel <= 0) return;
 				const progress = root.hasAttribute("data-checked") ? 1 : 0;
 				gestureRef.current = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.8.17",
+  "version": "0.8.19",
   "description": "Control UI components, blocks, and primitives with neutral defaults and consumer-owned themes.",
   "license": "MIT",
   "repository": {
@@ -36,6 +36,15 @@
   "peerDependencies": {
     "@base-ui/react": "^1.8.0",
     "@tanstack/react-virtual": "^3.14.13",
+    "@tiptap/core": "3.31.4",
+    "@tiptap/extension-image": "3.31.4",
+    "@tiptap/extension-list": "3.31.4",
+    "@tiptap/extension-paragraph": "3.31.4",
+    "@tiptap/extension-table": "3.31.4",
+    "@tiptap/markdown": "3.31.4",
+    "@tiptap/pm": "3.31.4",
+    "@tiptap/react": "3.31.4",
+    "@tiptap/starter-kit": "3.31.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -64,6 +73,33 @@
     "@tanstack/react-virtual": {
       "optional": true
     },
+    "@tiptap/core": {
+      "optional": true
+    },
+    "@tiptap/extension-image": {
+      "optional": true
+    },
+    "@tiptap/extension-list": {
+      "optional": true
+    },
+    "@tiptap/extension-paragraph": {
+      "optional": true
+    },
+    "@tiptap/extension-table": {
+      "optional": true
+    },
+    "@tiptap/markdown": {
+      "optional": true
+    },
+    "@tiptap/pm": {
+      "optional": true
+    },
+    "@tiptap/react": {
+      "optional": true
+    },
+    "@tiptap/starter-kit": {
+      "optional": true
+    },
     "cmdk": {
       "optional": true
     },