@ctrl-ui/react 0.8.18 → 0.8.19

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.18",
+  "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
     },