@px-ui/ui 1.0.10 → 1.1.0

package/dist/components/rich-text-editor.js

@@ -0,0 +1,359 @@
+"use client";
+
+import { t as cn } from "../utils-DUlptRpf.js";
+import { t as Button } from "../button-DnHwqwy0.js";
+import { n as PopoverContent, o as PopoverTrigger, t as Popover } from "../popover-BGkU46G7.js";
+import { t as Separator } from "../separator-D0bew2D_.js";
+import { t as Input } from "../input-jIoNIdLQ.js";
+import { t as Toggle } from "../toggle-BZXrLBLK.js";
+import { BoldIcon, ItalicIcon, LinkIcon, ListIcon, ListOrderedIcon, UnlinkIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { EditorContent, useEditor, useEditorState } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+
+//#region src/components/rich-text-editor.tsx
+const SAFE_LINK_SCHEMES = [
+	"http",
+	"https",
+	"mailto",
+	"tel",
+	"ftp"
+];
+function isSafeHref(url) {
+	const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(url)?.[1]?.toLowerCase();
+	return scheme === void 0 || SAFE_LINK_SCHEMES.includes(scheme);
+}
+function RichTextToolbar({ editor, disabled }) {
+	const state = useEditorState({
+		editor,
+		selector: ({ editor: e }) => ({
+			isBold: e.isActive("bold"),
+			isItalic: e.isActive("italic"),
+			isBulletList: e.isActive("bulletList"),
+			isOrderedList: e.isActive("orderedList"),
+			isLinkActive: e.isActive("link"),
+			canBold: e.can().chain().focus().toggleBold().run(),
+			canItalic: e.can().chain().focus().toggleItalic().run()
+		})
+	});
+	const [linkOpen, setLinkOpen] = React$1.useState(false);
+	const [linkUrl, setLinkUrl] = React$1.useState("");
+	const [linkError, setLinkError] = React$1.useState(false);
+	const linkErrorId = React$1.useId();
+	const openLinkForm = React$1.useCallback((open) => {
+		if (open) {
+			const previous = editor.getAttributes("link").href;
+			setLinkUrl(previous ?? "https://");
+			setLinkError(false);
+		}
+		setLinkOpen(open);
+	}, [editor]);
+	const applyLink = React$1.useCallback(() => {
+		const url = linkUrl.trim();
+		if (url === "") editor.chain().focus().extendMarkRange("link").unsetLink().run();
+		else {
+			if (!isSafeHref(url)) {
+				setLinkError(true);
+				return;
+			}
+			editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+		}
+		setLinkOpen(false);
+	}, [editor, linkUrl]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "rich-text-editor-toolbar",
+		role: "toolbar",
+		"aria-label": "Formatting",
+		"aria-orientation": "horizontal",
+		className: "flex flex-wrap items-center gap-1 border-b border-border bg-muted/30 p-1",
+		children: [
+			/* @__PURE__ */ jsx(Toggle, {
+				size: "sm",
+				"aria-label": "Bold",
+				title: "Bold",
+				pressed: state.isBold,
+				disabled: disabled || !state.canBold,
+				onPressedChange: () => editor.chain().focus().toggleBold().run(),
+				children: /* @__PURE__ */ jsx(BoldIcon, {})
+			}),
+			/* @__PURE__ */ jsx(Toggle, {
+				size: "sm",
+				"aria-label": "Italic",
+				title: "Italic",
+				pressed: state.isItalic,
+				disabled: disabled || !state.canItalic,
+				onPressedChange: () => editor.chain().focus().toggleItalic().run(),
+				children: /* @__PURE__ */ jsx(ItalicIcon, {})
+			}),
+			/* @__PURE__ */ jsx(Separator, {
+				orientation: "vertical",
+				className: "mx-0.5 h-5 self-center"
+			}),
+			/* @__PURE__ */ jsx(Toggle, {
+				size: "sm",
+				"aria-label": "Bullet list",
+				title: "Bullet list",
+				pressed: state.isBulletList,
+				disabled,
+				onPressedChange: () => editor.chain().focus().toggleBulletList().run(),
+				children: /* @__PURE__ */ jsx(ListIcon, {})
+			}),
+			/* @__PURE__ */ jsx(Toggle, {
+				size: "sm",
+				"aria-label": "Ordered list",
+				title: "Ordered list",
+				pressed: state.isOrderedList,
+				disabled,
+				onPressedChange: () => editor.chain().focus().toggleOrderedList().run(),
+				children: /* @__PURE__ */ jsx(ListOrderedIcon, {})
+			}),
+			/* @__PURE__ */ jsx(Separator, {
+				orientation: "vertical",
+				className: "mx-0.5 h-5 self-center"
+			}),
+			/* @__PURE__ */ jsxs(Popover, {
+				open: linkOpen,
+				onOpenChange: openLinkForm,
+				children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsx(Toggle, {
+					size: "sm",
+					"aria-label": "Link",
+					title: "Add or edit link",
+					pressed: state.isLinkActive,
+					disabled,
+					children: /* @__PURE__ */ jsx(LinkIcon, {})
+				}) }), /* @__PURE__ */ jsx(PopoverContent, {
+					align: "start",
+					className: "w-72 gap-3",
+					children: /* @__PURE__ */ jsxs("form", {
+						className: "flex flex-col gap-3",
+						onSubmit: (event) => {
+							event.preventDefault();
+							applyLink();
+						},
+						children: [
+							/* @__PURE__ */ jsx(Input, {
+								autoFocus: true,
+								type: "url",
+								"aria-label": "Link URL",
+								"aria-invalid": linkError || void 0,
+								"aria-describedby": linkError ? linkErrorId : void 0,
+								placeholder: "https://example.com",
+								value: linkUrl,
+								onChange: (event) => {
+									setLinkUrl(event.target.value);
+									if (linkError) setLinkError(false);
+								}
+							}),
+							linkError ? /* @__PURE__ */ jsx("p", {
+								id: linkErrorId,
+								role: "alert",
+								className: "text-xs text-destructive",
+								children: "Enter a valid URL (http, https, mailto, tel)."
+							}) : null,
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex justify-end gap-2",
+								children: [/* @__PURE__ */ jsx(Button, {
+									type: "button",
+									variant: "outline",
+									size: "sm",
+									onClick: () => setLinkOpen(false),
+									children: "Cancel"
+								}), /* @__PURE__ */ jsx(Button, {
+									type: "submit",
+									size: "sm",
+									children: "Apply"
+								})]
+							})
+						]
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "icon-sm",
+				"aria-label": "Remove link",
+				title: "Remove link",
+				disabled: disabled || !state.isLinkActive,
+				onClick: () => editor.chain().focus().extendMarkRange("link").unsetLink().run(),
+				children: /* @__PURE__ */ jsx(UnlinkIcon, {})
+			})
+		]
+	});
+}
+/**
+* A minimal WYSIWYG rich-text editor built on Tiptap (`@tiptap/react` +
+* `@tiptap/starter-kit`). Supports bold, italic, bullet/ordered lists, and
+* links via a compact toolbar.
+*
+* The stored format is **HTML**: pass HTML in via `value` (controlled) or
+* `defaultValue` (uncontrolled), and read HTML out via `onValueChange`.
+*
+* Supported formatting is deliberately scoped to what the toolbar exposes:
+* paragraphs, bold, italic, bullet/ordered lists, and links. StarterKit nodes
+* with no toolbar control (headings, blockquote, strike, code/code blocks,
+* horizontal rules) are disabled so the editor, toolbar, and `EditorOutput`
+* stay in agreement. Opt back into any of them — or add your own (images,
+* mentions, …) — via the `extensions` prop, and reach the underlying instance
+* with `onCreate` to build a custom toolbar.
+*
+* Output handling:
+* - Tiptap only round-trips the tags its configured extensions understand —
+*   **unsupported tags/attributes are dropped** on parse.
+* - The emitted HTML is unsanitized. Render stored content through a
+*   sanitizing `EditorOutput` component (DOMPurify) rather than injecting it
+*   raw.
+*
+* Field integration: the editable surface is a `<div role="textbox">`, not a
+* labelable form control, so associate labels/help text with `aria-labelledby`
+* / `aria-describedby` (not `<FieldLabel htmlFor>`).
+*
+* SSR-safe: uses `immediatelyRender: false` so the first paint matches the
+* server render and avoids hydration mismatches.
+*
+* @example
+* ```tsx
+* function JobDescription() {
+*   const [html, setHtml] = React.useState("<p>Initial <strong>copy</strong></p>");
+*   return (
+*     <RichTextEditor
+*       value={html}
+*       onValueChange={setHtml}
+*       placeholder="Describe the role…"
+*       aria-label="Job description"
+*     />
+*   );
+* }
+*
+* // Render the stored HTML elsewhere (sanitized):
+* // <EditorOutput html={html} />
+* ```
+*/
+function RichTextEditor({ value, defaultValue = "", onValueChange, placeholder = "Write something…", disabled = false, editable = true, className, contentClassName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-required": ariaRequired, id, name, "aria-invalid": ariaInvalid, extensions: extraExtensions, onCreate }) {
+	const isControlled = value !== void 0;
+	const isEditable = editable && !disabled;
+	const isInvalid = ariaInvalid === true || ariaInvalid === "true" ? true : ariaInvalid === false || ariaInvalid === "false" || ariaInvalid == null ? void 0 : ariaInvalid;
+	const isRequired = ariaRequired === true || ariaRequired === "true";
+	const editor = useEditor({
+		immediatelyRender: false,
+		editable: isEditable,
+		extensions: [StarterKit.configure({
+			heading: false,
+			blockquote: false,
+			strike: false,
+			code: false,
+			codeBlock: false,
+			horizontalRule: false,
+			link: {
+				openOnClick: false,
+				autolink: true,
+				HTMLAttributes: {
+					rel: "noopener noreferrer nofollow",
+					target: "_blank"
+				}
+			}
+		}), ...extraExtensions ?? []],
+		content: isControlled ? value : defaultValue,
+		editorProps: { attributes: {
+			class: cn("min-h-32 w-full px-3 py-2 text-sm text-foreground outline-none", "[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-4", "[&_ul]:my-2 [&_ul]:list-disc [&_ul]:ps-5", "[&_ol]:my-2 [&_ol]:list-decimal [&_ol]:ps-5", "[&_li]:my-0.5", "[&_p]:my-1.5 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0", contentClassName),
+			role: "textbox",
+			"aria-multiline": "true",
+			...ariaLabel ? { "aria-label": ariaLabel } : {},
+			...ariaLabelledby ? { "aria-labelledby": ariaLabelledby } : {},
+			...ariaDescribedby ? { "aria-describedby": ariaDescribedby } : {},
+			...isRequired ? { "aria-required": "true" } : {},
+			...id ? { id } : {},
+			...isInvalid ? { "aria-invalid": String(isInvalid) } : {}
+		} },
+		onCreate: ({ editor: instance }) => {
+			onCreate?.(instance);
+		},
+		onUpdate: ({ editor: instance }) => {
+			const html = instance.getHTML();
+			setSerializedHtml(html);
+			onValueChange?.(html);
+		}
+	});
+	const [serializedHtml, setSerializedHtml] = React$1.useState(() => isControlled ? value ?? "" : defaultValue);
+	React$1.useEffect(() => {
+		if (!editor || !isControlled) return;
+		if (value !== editor.getHTML()) {
+			editor.commands.setContent(value ?? "", { emitUpdate: false });
+			setSerializedHtml(value ?? "");
+		}
+	}, [
+		editor,
+		isControlled,
+		value
+	]);
+	React$1.useEffect(() => {
+		editor?.setEditable(isEditable);
+	}, [editor, isEditable]);
+	React$1.useEffect(() => {
+		const dom = editor?.view.dom;
+		if (!dom) return;
+		const reflect = (name$1, value$1) => {
+			if (value$1 == null || value$1 === "") dom.removeAttribute(name$1);
+			else dom.setAttribute(name$1, value$1);
+		};
+		reflect("id", id);
+		reflect("aria-label", ariaLabel);
+		reflect("aria-labelledby", ariaLabelledby);
+		reflect("aria-describedby", ariaDescribedby);
+		reflect("aria-required", isRequired ? "true" : void 0);
+		reflect("aria-invalid", isInvalid ? String(isInvalid) : void 0);
+	}, [
+		editor,
+		id,
+		ariaLabel,
+		ariaLabelledby,
+		ariaDescribedby,
+		isRequired,
+		isInvalid
+	]);
+	const [isEmpty, setIsEmpty] = React$1.useState(true);
+	React$1.useEffect(() => {
+		if (!editor) return;
+		const update = () => setIsEmpty(editor.isEmpty);
+		update();
+		editor.on("update", update);
+		editor.on("create", update);
+		return () => {
+			editor.off("update", update);
+			editor.off("create", update);
+		};
+	}, [editor]);
+	const showPlaceholder = Boolean(placeholder) && isEmpty && isEditable;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "rich-text-editor",
+		"data-disabled": disabled || void 0,
+		"data-invalid": isInvalid || void 0,
+		"aria-disabled": disabled || void 0,
+		className: cn("flex w-full flex-col overflow-hidden rounded-md border border-input bg-background shadow-xs", "focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50", "data-[invalid=true]:border-destructive data-[invalid=true]:ring-3 data-[invalid=true]:ring-destructive/20", disabled && "pointer-events-none opacity-50", className),
+		children: [
+			editor && isEditable ? /* @__PURE__ */ jsx(RichTextToolbar, {
+				editor,
+				disabled
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative",
+				children: [showPlaceholder ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "pointer-events-none absolute top-2 left-3 text-sm text-muted-foreground select-none",
+					children: placeholder
+				}) : null, /* @__PURE__ */ jsx(EditorContent, { editor })]
+			}),
+			name ? /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: serializedHtml,
+				disabled
+			}) : null
+		]
+	});
+}
+
+//#endregion
+export { RichTextEditor };
+//# sourceMappingURL=rich-text-editor.js.map

package/dist/components/rich-text-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-text-editor.js","names":["React","value","name"],"sources":["../../src/components/rich-text-editor.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  EditorContent,\n  useEditor,\n  useEditorState,\n  type Editor,\n  type Extensions,\n} from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport {\n  BoldIcon,\n  ItalicIcon,\n  LinkIcon,\n  ListIcon,\n  ListOrderedIcon,\n  UnlinkIcon,\n} from \"lucide-react\";\n\nimport { cn } from \"@px-ui/ui/lib/utils\";\nimport { Button } from \"@px-ui/ui/components/button\";\nimport { Input } from \"@px-ui/ui/components/input\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@px-ui/ui/components/popover\";\nimport { Separator } from \"@px-ui/ui/components/separator\";\nimport { Toggle } from \"@px-ui/ui/components/toggle\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface RichTextEditorProps {\n  /**\n   * The current HTML value. Provide this together with `onValueChange` for a\n   * controlled editor. The string is parsed by Tiptap on mount and on every\n   * external change, so it must be valid HTML.\n   *\n   * Note: Tiptap only understands the tags produced by the configured\n   * extensions (`<p>`, `<strong>`, `<em>`, `<ul>`/`<ol>`/`<li>`, `<a>`,\n   * line breaks). **Any unsupported tag or attribute is silently dropped**\n   * when the HTML is parsed back into the document. Round-tripping arbitrary\n   * HTML is therefore lossy by design.\n   *\n   * @default \"\"\n   */\n  value?: string;\n\n  /**\n   * Initial HTML for an uncontrolled editor. Ignored when `value` is provided.\n   * Use this when you only need the final value (e.g. read it on submit) and\n   * do not want to re-sync on every keystroke.\n   *\n   * @default \"\"\n   */\n  defaultValue?: string;\n\n  /**\n   * Called on every document change with the serialized HTML string. This is\n   * the canonical stored format for the editor.\n   *\n   * The emitted HTML is **not** sanitized for rendering. When you later render\n   * stored content as HTML, pass it through your sanitizing `EditorOutput`\n   * component (or an equivalent DOMPurify pass) before injecting it into the\n   * DOM — never `dangerouslySetInnerHTML` raw editor output.\n   */\n  onValueChange?: (html: string) => void;\n\n  /**\n   * Placeholder shown while the document is empty.\n   * @default \"Write something…\"\n   */\n  placeholder?: string;\n\n  /**\n   * Disables the editor and toolbar entirely. Visually dimmed and\n   * non-interactive. Alias-friendly with `editable`; `disabled` wins when both\n   * are set.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether the content is editable. Set to `false` to render the content as a\n   * read-only rich-text view (toolbar hidden) while keeping the styled output.\n   * @default true\n   */\n  editable?: boolean;\n\n  /**\n   * Additional className applied to the editor wrapper (the bordered shell that\n   * contains the toolbar and the content area).\n   */\n  className?: string;\n\n  /**\n   * Additional className applied to the contenteditable content area.\n   */\n  contentClassName?: string;\n\n  /** Accessible label for the editor region. */\n  \"aria-label\"?: string;\n\n  /**\n   * Id(s) of the element(s) that label the editor. **Prefer this over\n   * `htmlFor` for `Field` integration:** the editable surface is a\n   * `<div role=\"textbox\">`, which is *not* a labelable element, so a native\n   * `<FieldLabel htmlFor={id}>` does **not** associate (clicking it won't focus\n   * the editor, and its text is not exposed as the accessible name). Instead\n   * give the label an `id` and pass it here:\n   *\n   * ```tsx\n   * <Field>\n   *   <FieldLabel id=\"bio-label\">Bio</FieldLabel>\n   *   <RichTextEditor aria-labelledby=\"bio-label\" aria-describedby=\"bio-help\" />\n   *   <FieldDescription id=\"bio-help\">Markdown shortcuts supported.</FieldDescription>\n   * </Field>\n   * ```\n   */\n  \"aria-labelledby\"?: string;\n\n  /**\n   * Id(s) of the element(s) that describe the editor (e.g. a `FieldDescription`\n   * or `FieldError`). Forwarded onto the editable surface so validation and\n   * help text are announced, mirroring `Input`/`Textarea`.\n   */\n  \"aria-describedby\"?: string;\n\n  /**\n   * Marks the control as required. Forwarded as `aria-required` on the editable\n   * surface (the contenteditable region cannot use the native `required`\n   * attribute).\n   */\n  \"aria-required\"?: boolean | \"true\" | \"false\";\n\n  /**\n   * Id for the editable region. Useful as a target for `aria-labelledby`/\n   * `aria-describedby` references or for testing. Note: pairing it with a\n   * native `<FieldLabel htmlFor>` will **not** associate the label, because the\n   * editable surface is a `<div role=\"textbox\">` rather than a form control —\n   * use `aria-labelledby` instead (see above).\n   */\n  id?: string;\n\n  /**\n   * Name for the form field. Because the contenteditable surface is not a\n   * form-associated element, the editor renders a hidden `<input>` carrying\n   * this `name` and the current editor HTML, so the value serializes in native\n   * forms / `FormData` like `Input`/`Textarea`.\n   */\n  name?: string;\n\n  /**\n   * Marks the control invalid. Forwarded as `aria-invalid` on the editable\n   * surface (and `data-invalid` on the wrapper) so `Field` validation styling\n   * applies, mirroring `Input`/`Textarea`.\n   */\n  \"aria-invalid\"?: boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\";\n\n  /**\n   * Additional Tiptap extensions appended to the built-in set (configured\n   * `StarterKit` + link). Use this to opt back into formatting the default\n   * toolbar omits (e.g. `Heading`, `Image`, a mention plugin). Applied on mount\n   * only — changing it later does not reconfigure the live editor.\n   *\n   * Note: re-enabling a node here means the toolbar won't expose a control for\n   * it and the built-in content styles won't cover it; pair it with\n   * `contentClassName` styling and your own toolbar (via `onCreate`) as needed.\n   */\n  extensions?: Extensions;\n\n  /**\n   * Called once with the Tiptap {@link Editor} instance after it is created\n   * (client-side, since `immediatelyRender` is `false`). Use this to drive the\n   * editor imperatively or to build a custom toolbar alongside the default one.\n   */\n  onCreate?: (editor: Editor) => void;\n}\n\n// ============================================================================\n// Toolbar\n// ============================================================================\n\ninterface RichTextToolbarProps {\n  editor: Editor;\n  disabled: boolean;\n}\n\n// Reject dangerous URL schemes (javascript:, data:, vbscript:, …) at input\n// time so they can't be stored on the link mark. Scheme-less values (relative\n// paths, anchors) and the safe schemes below are allowed.\nconst SAFE_LINK_SCHEMES = [\"http\", \"https\", \"mailto\", \"tel\", \"ftp\"];\nfunction isSafeHref(url: string): boolean {\n  const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(url)?.[1]?.toLowerCase();\n  // No explicit scheme → relative/anchor, treated as safe.\n  return scheme === undefined || SAFE_LINK_SCHEMES.includes(scheme);\n}\n\nfunction RichTextToolbar({ editor, disabled }: RichTextToolbarProps) {\n  // Subscribe only to the slice of editor state the toolbar renders from.\n  // useEditorState re-renders this component when (and only when) any of these\n  // selected values change — replacing the manual transaction/selectionUpdate\n  // forceUpdate plumbing.\n  const state = useEditorState({\n    editor,\n    selector: ({ editor: e }) => ({\n      isBold: e.isActive(\"bold\"),\n      isItalic: e.isActive(\"italic\"),\n      isBulletList: e.isActive(\"bulletList\"),\n      isOrderedList: e.isActive(\"orderedList\"),\n      isLinkActive: e.isActive(\"link\"),\n      canBold: e.can().chain().focus().toggleBold().run(),\n      canItalic: e.can().chain().focus().toggleItalic().run(),\n    }),\n  });\n\n  const [linkOpen, setLinkOpen] = React.useState(false);\n  const [linkUrl, setLinkUrl] = React.useState(\"\");\n  const [linkError, setLinkError] = React.useState(false);\n  // Unique per toolbar instance so multiple editors on one page don't collide.\n  const linkErrorId = React.useId();\n\n  // Seed the input with the existing href whenever the popover opens.\n  const openLinkForm = React.useCallback(\n    (open: boolean) => {\n      if (open) {\n        const previous = editor.getAttributes(\"link\").href as\n          | string\n          | undefined;\n        setLinkUrl(previous ?? \"https://\");\n        setLinkError(false);\n      }\n      setLinkOpen(open);\n    },\n    [editor]\n  );\n\n  const applyLink = React.useCallback(() => {\n    const url = linkUrl.trim();\n    // Empty string clears the link.\n    if (url === \"\") {\n      editor.chain().focus().extendMarkRange(\"link\").unsetLink().run();\n    } else {\n      // Block unsafe schemes (e.g. javascript:) before they reach the document.\n      if (!isSafeHref(url)) {\n        setLinkError(true);\n        return;\n      }\n      editor.chain().focus().extendMarkRange(\"link\").setLink({ href: url }).run();\n    }\n    setLinkOpen(false);\n  }, [editor, linkUrl]);\n\n  return (\n    <div\n      data-slot=\"rich-text-editor-toolbar\"\n      role=\"toolbar\"\n      aria-label=\"Formatting\"\n      aria-orientation=\"horizontal\"\n      className=\"flex flex-wrap items-center gap-1 border-b border-border bg-muted/30 p-1\"\n    >\n      <Toggle\n        size=\"sm\"\n        aria-label=\"Bold\"\n        title=\"Bold\"\n        pressed={state.isBold}\n        disabled={disabled || !state.canBold}\n        onPressedChange={() => editor.chain().focus().toggleBold().run()}\n      >\n        <BoldIcon />\n      </Toggle>\n\n      <Toggle\n        size=\"sm\"\n        aria-label=\"Italic\"\n        title=\"Italic\"\n        pressed={state.isItalic}\n        disabled={disabled || !state.canItalic}\n        onPressedChange={() => editor.chain().focus().toggleItalic().run()}\n      >\n        <ItalicIcon />\n      </Toggle>\n\n      <Separator\n        orientation=\"vertical\"\n        className=\"mx-0.5 h-5 self-center\"\n      />\n\n      <Toggle\n        size=\"sm\"\n        aria-label=\"Bullet list\"\n        title=\"Bullet list\"\n        pressed={state.isBulletList}\n        disabled={disabled}\n        onPressedChange={() => editor.chain().focus().toggleBulletList().run()}\n      >\n        <ListIcon />\n      </Toggle>\n\n      <Toggle\n        size=\"sm\"\n        aria-label=\"Ordered list\"\n        title=\"Ordered list\"\n        pressed={state.isOrderedList}\n        disabled={disabled}\n        onPressedChange={() => editor.chain().focus().toggleOrderedList().run()}\n      >\n        <ListOrderedIcon />\n      </Toggle>\n\n      <Separator\n        orientation=\"vertical\"\n        className=\"mx-0.5 h-5 self-center\"\n      />\n\n      <Popover open={linkOpen} onOpenChange={openLinkForm}>\n        <PopoverTrigger\n          render={\n            <Toggle\n              size=\"sm\"\n              aria-label=\"Link\"\n              title=\"Add or edit link\"\n              pressed={state.isLinkActive}\n              disabled={disabled}\n            >\n              <LinkIcon />\n            </Toggle>\n          }\n        />\n        <PopoverContent align=\"start\" className=\"w-72 gap-3\">\n          <form\n            className=\"flex flex-col gap-3\"\n            onSubmit={(event) => {\n              event.preventDefault();\n              applyLink();\n            }}\n          >\n            <Input\n              autoFocus\n              type=\"url\"\n              aria-label=\"Link URL\"\n              aria-invalid={linkError || undefined}\n              aria-describedby={linkError ? linkErrorId : undefined}\n              placeholder=\"https://example.com\"\n              value={linkUrl}\n              onChange={(event) => {\n                setLinkUrl(event.target.value);\n                if (linkError) setLinkError(false);\n              }}\n            />\n            {linkError ? (\n              <p\n                id={linkErrorId}\n                role=\"alert\"\n                className=\"text-xs text-destructive\"\n              >\n                Enter a valid URL (http, https, mailto, tel).\n              </p>\n            ) : null}\n            <div className=\"flex justify-end gap-2\">\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={() => setLinkOpen(false)}\n              >\n                Cancel\n              </Button>\n              <Button type=\"submit\" size=\"sm\">\n                Apply\n              </Button>\n            </div>\n          </form>\n        </PopoverContent>\n      </Popover>\n\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        aria-label=\"Remove link\"\n        title=\"Remove link\"\n        disabled={disabled || !state.isLinkActive}\n        onClick={() =>\n          editor.chain().focus().extendMarkRange(\"link\").unsetLink().run()\n        }\n      >\n        <UnlinkIcon />\n      </Button>\n    </div>\n  );\n}\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\n/**\n * A minimal WYSIWYG rich-text editor built on Tiptap (`@tiptap/react` +\n * `@tiptap/starter-kit`). Supports bold, italic, bullet/ordered lists, and\n * links via a compact toolbar.\n *\n * The stored format is **HTML**: pass HTML in via `value` (controlled) or\n * `defaultValue` (uncontrolled), and read HTML out via `onValueChange`.\n *\n * Supported formatting is deliberately scoped to what the toolbar exposes:\n * paragraphs, bold, italic, bullet/ordered lists, and links. StarterKit nodes\n * with no toolbar control (headings, blockquote, strike, code/code blocks,\n * horizontal rules) are disabled so the editor, toolbar, and `EditorOutput`\n * stay in agreement. Opt back into any of them — or add your own (images,\n * mentions, …) — via the `extensions` prop, and reach the underlying instance\n * with `onCreate` to build a custom toolbar.\n *\n * Output handling:\n * - Tiptap only round-trips the tags its configured extensions understand —\n *   **unsupported tags/attributes are dropped** on parse.\n * - The emitted HTML is unsanitized. Render stored content through a\n *   sanitizing `EditorOutput` component (DOMPurify) rather than injecting it\n *   raw.\n *\n * Field integration: the editable surface is a `<div role=\"textbox\">`, not a\n * labelable form control, so associate labels/help text with `aria-labelledby`\n * / `aria-describedby` (not `<FieldLabel htmlFor>`).\n *\n * SSR-safe: uses `immediatelyRender: false` so the first paint matches the\n * server render and avoids hydration mismatches.\n *\n * @example\n * ```tsx\n * function JobDescription() {\n *   const [html, setHtml] = React.useState(\"<p>Initial <strong>copy</strong></p>\");\n *   return (\n *     <RichTextEditor\n *       value={html}\n *       onValueChange={setHtml}\n *       placeholder=\"Describe the role…\"\n *       aria-label=\"Job description\"\n *     />\n *   );\n * }\n *\n * // Render the stored HTML elsewhere (sanitized):\n * // <EditorOutput html={html} />\n * ```\n */\nexport function RichTextEditor({\n  value,\n  defaultValue = \"\",\n  onValueChange,\n  placeholder = \"Write something…\",\n  disabled = false,\n  editable = true,\n  className,\n  contentClassName,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledby,\n  \"aria-describedby\": ariaDescribedby,\n  \"aria-required\": ariaRequired,\n  id,\n  name,\n  \"aria-invalid\": ariaInvalid,\n  extensions: extraExtensions,\n  onCreate,\n}: RichTextEditorProps) {\n  const isControlled = value !== undefined;\n  const isEditable = editable && !disabled;\n  const isInvalid =\n    ariaInvalid === true || ariaInvalid === \"true\"\n      ? true\n      : ariaInvalid === false || ariaInvalid === \"false\" || ariaInvalid == null\n        ? undefined\n        : ariaInvalid;\n  const isRequired = ariaRequired === true || ariaRequired === \"true\";\n\n  const editor = useEditor({\n    // SSR-safe: defer the first render to the client so the server-rendered\n    // markup and the hydrated DOM agree.\n    immediatelyRender: false,\n    editable: isEditable,\n    extensions: [\n      StarterKit.configure({\n        // Keep the enabled node/mark set in lock-step with the toolbar and the\n        // editor's content styles below. StarterKit enables these by default\n        // (incl. their markdown input rules and paste handling), but the\n        // minimal toolbar exposes no control for them and the content area\n        // doesn't style them — so disable them to avoid users creating content\n        // they can't toggle and that renders differently here than in\n        // `EditorOutput`. Opt back in via the `extensions` prop when needed.\n        heading: false,\n        blockquote: false,\n        strike: false,\n        code: false,\n        codeBlock: false,\n        horizontalRule: false,\n        link: {\n          openOnClick: false,\n          autolink: true,\n          HTMLAttributes: {\n            rel: \"noopener noreferrer nofollow\",\n            target: \"_blank\",\n          },\n        },\n      }),\n      ...(extraExtensions ?? []),\n    ],\n    content: isControlled ? value : defaultValue,\n    editorProps: {\n      attributes: {\n        // px-ui styling for the contenteditable surface. Design tokens only.\n        class: cn(\n          \"min-h-32 w-full px-3 py-2 text-sm text-foreground outline-none\",\n          \"[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-4\",\n          \"[&_ul]:my-2 [&_ul]:list-disc [&_ul]:ps-5\",\n          \"[&_ol]:my-2 [&_ol]:list-decimal [&_ol]:ps-5\",\n          \"[&_li]:my-0.5\",\n          \"[&_p]:my-1.5 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0\",\n          contentClassName\n        ),\n        role: \"textbox\",\n        \"aria-multiline\": \"true\",\n        ...(ariaLabel ? { \"aria-label\": ariaLabel } : {}),\n        ...(ariaLabelledby ? { \"aria-labelledby\": ariaLabelledby } : {}),\n        ...(ariaDescribedby ? { \"aria-describedby\": ariaDescribedby } : {}),\n        ...(isRequired ? { \"aria-required\": \"true\" } : {}),\n        ...(id ? { id } : {}),\n        ...(isInvalid ? { \"aria-invalid\": String(isInvalid) } : {}),\n      },\n    },\n    onCreate: ({ editor: instance }) => {\n      onCreate?.(instance);\n    },\n    onUpdate: ({ editor: instance }) => {\n      const html = instance.getHTML();\n      setSerializedHtml(html);\n      onValueChange?.(html);\n    },\n  });\n\n  // Mirror of the editor's HTML, kept in sync so the hidden form input below\n  // serializes the live value. The contenteditable surface is not\n  // form-associated, so a real <input> is what actually participates in native\n  // form submission / FormData.\n  const [serializedHtml, setSerializedHtml] = React.useState(\n    () => (isControlled ? (value ?? \"\") : defaultValue)\n  );\n\n  // Keep a controlled editor in sync when `value` changes from the outside,\n  // without clobbering the user's cursor while they type.\n  React.useEffect(() => {\n    if (!editor || !isControlled) return;\n    const current = editor.getHTML();\n    if (value !== current) {\n      editor.commands.setContent(value ?? \"\", { emitUpdate: false });\n      // setContent with emitUpdate:false skips onUpdate, so mirror the new\n      // value onto the hidden input explicitly.\n      setSerializedHtml(value ?? \"\");\n    }\n  }, [editor, isControlled, value]);\n\n  // Reflect disabled/editable changes onto the live instance.\n  React.useEffect(() => {\n    editor?.setEditable(isEditable);\n  }, [editor, isEditable]);\n\n  // Keep the editable surface's identity/ARIA attributes in sync. The values\n  // passed to `useEditor` only apply on mount, so reflect later changes\n  // (label, description, required, invalid toggling) directly onto the DOM\n  // node.\n  React.useEffect(() => {\n    const dom = editor?.view.dom as HTMLElement | undefined;\n    if (!dom) return;\n    const reflect = (name: string, value: string | undefined) => {\n      if (value == null || value === \"\") dom.removeAttribute(name);\n      else dom.setAttribute(name, value);\n    };\n    reflect(\"id\", id);\n    reflect(\"aria-label\", ariaLabel);\n    reflect(\"aria-labelledby\", ariaLabelledby);\n    reflect(\"aria-describedby\", ariaDescribedby);\n    reflect(\"aria-required\", isRequired ? \"true\" : undefined);\n    reflect(\"aria-invalid\", isInvalid ? String(isInvalid) : undefined);\n  }, [\n    editor,\n    id,\n    ariaLabel,\n    ariaLabelledby,\n    ariaDescribedby,\n    isRequired,\n    isInvalid,\n  ]);\n\n  // Track empty state so the placeholder overlay can show/hide without\n  // depending on the (uninstalled) Tiptap Placeholder extension.\n  const [isEmpty, setIsEmpty] = React.useState(true);\n  React.useEffect(() => {\n    if (!editor) return;\n    const update = () => setIsEmpty(editor.isEmpty);\n    update();\n    editor.on(\"update\", update);\n    editor.on(\"create\", update);\n    return () => {\n      editor.off(\"update\", update);\n      editor.off(\"create\", update);\n    };\n  }, [editor]);\n\n  const showPlaceholder = Boolean(placeholder) && isEmpty && isEditable;\n\n  return (\n    <div\n      data-slot=\"rich-text-editor\"\n      data-disabled={disabled || undefined}\n      data-invalid={isInvalid || undefined}\n      aria-disabled={disabled || undefined}\n      className={cn(\n        \"flex w-full flex-col overflow-hidden rounded-md border border-input bg-background shadow-xs\",\n        \"focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50\",\n        \"data-[invalid=true]:border-destructive data-[invalid=true]:ring-3 data-[invalid=true]:ring-destructive/20\",\n        disabled && \"pointer-events-none opacity-50\",\n        className\n      )}\n    >\n      {editor && isEditable ? (\n        <RichTextToolbar editor={editor} disabled={disabled} />\n      ) : null}\n      <div className=\"relative\">\n        {showPlaceholder ? (\n          <span\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute top-2 left-3 text-sm text-muted-foreground select-none\"\n          >\n            {placeholder}\n          </span>\n        ) : null}\n        <EditorContent editor={editor} />\n      </div>\n      {/* Form-association: the contenteditable surface is not a form control,\n          so mirror the editor's HTML onto a real hidden input that serializes\n          in native forms / FormData under the provided `name`. */}\n      {name ? (\n        <input\n          type=\"hidden\"\n          name={name}\n          value={serializedHtml}\n          disabled={disabled}\n        />\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/scroll-area.d.ts

@@ -1,17 +1,27 @@
-import * as react_jsx_runtime181 from "react/jsx-runtime";
+import * as react_jsx_runtime333 from "react/jsx-runtime";
 import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
 
 //#region src/components/scroll-area.d.ts
 declare function ScrollArea({
   className,
   children,
+  viewportProps,
   ...props
-}: ScrollArea$1.Root.Props): react_jsx_runtime181.JSX.Element;
+}: ScrollArea$1.Root.Props & {
+  /**
+   * Props forwarded to the scroll viewport (the element that actually
+   * scrolls). Use this to size the viewport — e.g.
+   * `viewportProps={{ style: { maxHeight: "16rem" } }}` — since a `max-height`
+   * belongs on the viewport, not the root: the viewport carries `overflow`,
+   * and a `height: 100%` viewport cannot resolve against an auto-height root.
+   */
+  viewportProps?: ScrollArea$1.Viewport.Props;
+}): react_jsx_runtime333.JSX.Element;
 declare function ScrollBar({
   className,
   orientation,
   ...props
-}: ScrollArea$1.Scrollbar.Props): react_jsx_runtime181.JSX.Element;
+}: ScrollArea$1.Scrollbar.Props): react_jsx_runtime333.JSX.Element;
 //#endregion
 export { ScrollArea, ScrollBar };
 //# sourceMappingURL=scroll-area.d.ts.map

package/dist/components/scroll-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.d.ts","names":[],"sources":["../../src/components/scroll-area.tsx"],"sourcesContent":[],"mappings":";;;;iBAKS,UAAA;;;;GAIN,YAAA,CAAoB,IAAA,CAAK,QAAK,oBAAA,CAAA,GAAA,CAAA;iBAmBxB,SAAA;;;;GAIN,YAAA,CAAoB,SAAA,CAAU,QAAK,oBAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"scroll-area.d.ts","names":[],"sources":["../../src/components/scroll-area.tsx"],"sourcesContent":[],"mappings":";;;;iBAKS,UAAA;;;;;GAKN,YAAA,CAAoB,IAAA,CAAK;;;AATkD;;;;;EAiB5D,aAAoB,CAAA,EAApB,YAAA,CAAoB,QAAA,CAAS,KAAA;CAC9C,CAAA,EAAA,oBAAA,CAAA,GAAA,CAAA,OAAA;iBAuBQ,SAAA,CAvBR;EAAA,SAAA;EAAA,WAAA;EAAA,GAAA;AAAA,CAAA,EA2BE,YAAA,CAAoB,SAAA,CAAU,KA3BhC,CAAA,EA2BqC,oBAAA,CAAA,GAAA,CAAA,OA3BrC"}

package/dist/components/scroll-area.js

@@ -1,39 +1,4 @@
-import { t as cn } from "../utils-mWJR2N24.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import "react";
-import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
+import "../utils-DUlptRpf.js";
+import { n as ScrollBar, t as ScrollArea } from "../scroll-area-mNVMQ0Of.js";
 
-//#region src/components/scroll-area.tsx
-function ScrollArea({ className, children, ...props }) {
-	return /* @__PURE__ */ jsxs(ScrollArea$1.Root, {
-		"data-slot": "scroll-area",
-		className: cn("relative", className),
-		...props,
-		children: [
-			/* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
-				"data-slot": "scroll-area-viewport",
-				className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
-				children
-			}),
-			/* @__PURE__ */ jsx(ScrollBar, {}),
-			/* @__PURE__ */ jsx(ScrollArea$1.Corner, {})
-		]
-	});
-}
-function ScrollBar({ className, orientation = "vertical", ...props }) {
-	return /* @__PURE__ */ jsx(ScrollArea$1.Scrollbar, {
-		"data-slot": "scroll-area-scrollbar",
-		"data-orientation": orientation,
-		orientation,
-		className: cn("flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-s data-vertical:border-s-transparent", className),
-		...props,
-		children: /* @__PURE__ */ jsx(ScrollArea$1.Thumb, {
-			"data-slot": "scroll-area-thumb",
-			className: "relative flex-1 rounded-full bg-border"
-		})
-	});
-}
-
-//#endregion
-export { ScrollArea, ScrollBar };
-//# sourceMappingURL=scroll-area.js.map
+export { ScrollArea, ScrollBar };

package/dist/components/select.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime202 from "react/jsx-runtime";
+import * as react_jsx_runtime299 from "react/jsx-runtime";
 import * as React$1 from "react";
 import { Select as Select$1 } from "@base-ui/react/select";
 
@@ -7,11 +7,11 @@ declare const Select: typeof Select$1.Root;
 declare function SelectGroup({
   className,
   ...props
-}: Select$1.Group.Props): react_jsx_runtime202.JSX.Element;
+}: Select$1.Group.Props): react_jsx_runtime299.JSX.Element;
 declare function SelectValue({
   className,
   ...props
-}: Select$1.Value.Props): react_jsx_runtime202.JSX.Element;
+}: Select$1.Value.Props): react_jsx_runtime299.JSX.Element;
 declare function SelectTrigger({
   className,
   size,
@@ -19,7 +19,7 @@ declare function SelectTrigger({
   ...props
 }: Select$1.Trigger.Props & {
   size?: "sm" | "default";
-}): react_jsx_runtime202.JSX.Element;
+}): react_jsx_runtime299.JSX.Element;
 declare function SelectContent({
   className,
   children,
@@ -29,28 +29,28 @@ declare function SelectContent({
   alignOffset,
   alignItemWithTrigger,
   ...props
-}: Select$1.Popup.Props & Pick<Select$1.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger">): react_jsx_runtime202.JSX.Element;
+}: Select$1.Popup.Props & Pick<Select$1.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger">): react_jsx_runtime299.JSX.Element;
 declare function SelectLabel({
   className,
   ...props
-}: Select$1.GroupLabel.Props): react_jsx_runtime202.JSX.Element;
+}: Select$1.GroupLabel.Props): react_jsx_runtime299.JSX.Element;
 declare function SelectItem({
   className,
   children,
   ...props
-}: Select$1.Item.Props): react_jsx_runtime202.JSX.Element;
+}: Select$1.Item.Props): react_jsx_runtime299.JSX.Element;
 declare function SelectSeparator({
   className,
   ...props
-}: Select$1.Separator.Props): react_jsx_runtime202.JSX.Element;
+}: Select$1.Separator.Props): react_jsx_runtime299.JSX.Element;
 declare function SelectScrollUpButton({
   className,
   ...props
-}: React$1.ComponentProps<typeof Select$1.ScrollUpArrow>): react_jsx_runtime202.JSX.Element;
+}: React$1.ComponentProps<typeof Select$1.ScrollUpArrow>): react_jsx_runtime299.JSX.Element;
 declare function SelectScrollDownButton({
   className,
   ...props
-}: React$1.ComponentProps<typeof Select$1.ScrollDownArrow>): react_jsx_runtime202.JSX.Element;
+}: React$1.ComponentProps<typeof Select$1.ScrollDownArrow>): react_jsx_runtime299.JSX.Element;
 //#endregion
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
 //# sourceMappingURL=select.d.ts.map

package/dist/components/select.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { t as cn } from "../utils-mWJR2N24.js";
+import { t as cn } from "../utils-DUlptRpf.js";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";

package/dist/components/separator.d.ts

@@ -1,2 +1,2 @@
-import { t as Separator } from "../separator-D0hWdzUT.js";
+import { t as Separator } from "../separator-Df76guaT.js";
 export { Separator };

package/dist/components/separator.js

@@ -1,4 +1,4 @@
-import "../utils-mWJR2N24.js";
-import { t as Separator } from "../separator-BS3ilczC.js";
+import "../utils-DUlptRpf.js";
+import { t as Separator } from "../separator-D0bew2D_.js";
 
 export { Separator };

package/dist/components/sheet.d.ts

@@ -1,17 +1,17 @@
-import * as react_jsx_runtime211 from "react/jsx-runtime";
+import * as react_jsx_runtime320 from "react/jsx-runtime";
 import * as React$1 from "react";
 import { Dialog } from "@base-ui/react/dialog";
 
 //#region src/components/sheet.d.ts
 declare function Sheet({
   ...props
-}: Dialog.Root.Props): react_jsx_runtime211.JSX.Element;
+}: Dialog.Root.Props): react_jsx_runtime320.JSX.Element;
 declare function SheetTrigger({
   ...props
-}: Dialog.Trigger.Props): react_jsx_runtime211.JSX.Element;
+}: Dialog.Trigger.Props): react_jsx_runtime320.JSX.Element;
 declare function SheetClose({
   ...props
-}: Dialog.Close.Props): react_jsx_runtime211.JSX.Element;
+}: Dialog.Close.Props): react_jsx_runtime320.JSX.Element;
 declare function SheetContent({
   className,
   children,
@@ -21,23 +21,23 @@ declare function SheetContent({
 }: Dialog.Popup.Props & {
   side?: "top" | "right" | "bottom" | "left";
   showCloseButton?: boolean;
-}): react_jsx_runtime211.JSX.Element;
+}): react_jsx_runtime320.JSX.Element;
 declare function SheetHeader({
   className,
   ...props
-}: React$1.ComponentProps<"div">): react_jsx_runtime211.JSX.Element;
+}: React$1.ComponentProps<"div">): react_jsx_runtime320.JSX.Element;
 declare function SheetFooter({
   className,
   ...props
-}: React$1.ComponentProps<"div">): react_jsx_runtime211.JSX.Element;
+}: React$1.ComponentProps<"div">): react_jsx_runtime320.JSX.Element;
 declare function SheetTitle({
   className,
   ...props
-}: Dialog.Title.Props): react_jsx_runtime211.JSX.Element;
+}: Dialog.Title.Props): react_jsx_runtime320.JSX.Element;
 declare function SheetDescription({
   className,
   ...props
-}: Dialog.Description.Props): react_jsx_runtime211.JSX.Element;
+}: Dialog.Description.Props): react_jsx_runtime320.JSX.Element;
 //#endregion
 export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };
 //# sourceMappingURL=sheet.d.ts.map

package/dist/components/sheet.js

@@ -1,7 +1,7 @@
 "use client";
 
-import "../utils-mWJR2N24.js";
-import "../button-hBUFMmsZ.js";
-import { a as SheetFooter, c as SheetTrigger, i as SheetDescription, n as SheetClose, o as SheetHeader, r as SheetContent, s as SheetTitle, t as Sheet } from "../sheet-CLjNDrfL.js";
+import "../utils-DUlptRpf.js";
+import "../button-DnHwqwy0.js";
+import { a as SheetFooter, c as SheetTrigger, i as SheetDescription, n as SheetClose, o as SheetHeader, r as SheetContent, s as SheetTitle, t as Sheet } from "../sheet-BB23q6wd.js";
 
 export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };