@px-ui/ui 1.0.10 → 1.1.0

package/dist/components/currency-select-field.js

@@ -1,14 +1,14 @@
-import { t as cn } from "../utils-mWJR2N24.js";
-import "../button-hBUFMmsZ.js";
-import "../input-8jqdnUZl.js";
-import "../textarea-Cq0o323P.js";
-import { n as InputGroupAddon } from "../input-group-DqEkmpXW.js";
-import "../spinner-Bo0sUZEg.js";
-import "../use-async-options-CcsImGX4.js";
-import "../use-intersection-observer-CZfnep4z.js";
-import "../use-infinite-scroll-CpbhGGT5.js";
-import "../use-debounce-_qaEZqtt.js";
-import { f as ComboboxList, l as ComboboxInput, m as ComboboxStatus, s as ComboboxContent, t as Combobox, u as ComboboxItem } from "../combobox-CHkmVNZ2.js";
+import { t as cn } from "../utils-DUlptRpf.js";
+import "../button-DnHwqwy0.js";
+import "../input-jIoNIdLQ.js";
+import "../textarea-hZg0gA8u.js";
+import { n as InputGroupAddon } from "../input-group-B5PMRYld.js";
+import "../spinner-9MdgLDTZ.js";
+import "../use-async-options-tueAuVs_.js";
+import "../use-intersection-observer-rlKEjyL1.js";
+import "../use-infinite-scroll-HpeMA2MK.js";
+import "../use-debounce-7gIeOwla.js";
+import { f as ComboboxList, l as ComboboxInput, m as ComboboxStatus, s as ComboboxContent, t as Combobox, u as ComboboxItem } from "../combobox-5IAivvXw.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import ReactCountryFlag from "react-country-flag";

package/dist/components/dialog.d.ts

@@ -1,24 +1,24 @@
-import * as react_jsx_runtime109 from "react/jsx-runtime";
+import * as react_jsx_runtime137 from "react/jsx-runtime";
 import * as React$1 from "react";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 
 //#region src/components/dialog.d.ts
 declare function Dialog({
   ...props
-}: Dialog$1.Root.Props): react_jsx_runtime109.JSX.Element;
+}: Dialog$1.Root.Props): react_jsx_runtime137.JSX.Element;
 declare function DialogTrigger({
   ...props
-}: Dialog$1.Trigger.Props): react_jsx_runtime109.JSX.Element;
+}: Dialog$1.Trigger.Props): react_jsx_runtime137.JSX.Element;
 declare function DialogPortal({
   ...props
-}: Dialog$1.Portal.Props): react_jsx_runtime109.JSX.Element;
+}: Dialog$1.Portal.Props): react_jsx_runtime137.JSX.Element;
 declare function DialogClose({
   ...props
-}: Dialog$1.Close.Props): react_jsx_runtime109.JSX.Element;
+}: Dialog$1.Close.Props): react_jsx_runtime137.JSX.Element;
 declare function DialogOverlay({
   className,
   ...props
-}: Dialog$1.Backdrop.Props): react_jsx_runtime109.JSX.Element;
+}: Dialog$1.Backdrop.Props): react_jsx_runtime137.JSX.Element;
 declare function DialogContent({
   className,
   children,
@@ -26,11 +26,11 @@ declare function DialogContent({
   ...props
 }: Dialog$1.Popup.Props & {
   showCloseButton?: boolean;
-}): react_jsx_runtime109.JSX.Element;
+}): react_jsx_runtime137.JSX.Element;
 declare function DialogHeader({
   className,
   ...props
-}: React$1.ComponentProps<"div">): react_jsx_runtime109.JSX.Element;
+}: React$1.ComponentProps<"div">): react_jsx_runtime137.JSX.Element;
 declare function DialogFooter({
   className,
   showCloseButton,
@@ -38,15 +38,15 @@ declare function DialogFooter({
   ...props
 }: React$1.ComponentProps<"div"> & {
   showCloseButton?: boolean;
-}): react_jsx_runtime109.JSX.Element;
+}): react_jsx_runtime137.JSX.Element;
 declare function DialogTitle({
   className,
   ...props
-}: Dialog$1.Title.Props): react_jsx_runtime109.JSX.Element;
+}: Dialog$1.Title.Props): react_jsx_runtime137.JSX.Element;
 declare function DialogDescription({
   className,
   ...props
-}: Dialog$1.Description.Props): react_jsx_runtime109.JSX.Element;
+}: Dialog$1.Description.Props): react_jsx_runtime137.JSX.Element;
 /**
  * Creates a handle that links a `Dialog` to one or more `DialogTrigger`s via
  * their `handle` prop. Use it for detached triggers (a trigger rendered outside

package/dist/components/dialog.js

@@ -1,5 +1,5 @@
-import "../utils-mWJR2N24.js";
-import "../button-hBUFMmsZ.js";
-import { a as DialogFooter, c as DialogPortal, d as createDialogHandle, i as DialogDescription, l as DialogTitle, n as DialogClose, o as DialogHeader, r as DialogContent, s as DialogOverlay, t as Dialog, u as DialogTrigger } from "../dialog-DrdXva1a.js";
+import "../utils-DUlptRpf.js";
+import "../button-DnHwqwy0.js";
+import { a as DialogFooter, c as DialogPortal, d as createDialogHandle, i as DialogDescription, l as DialogTitle, n as DialogClose, o as DialogHeader, r as DialogContent, s as DialogOverlay, t as Dialog, u as DialogTrigger } from "../dialog-DuGJUPQl.js";
 
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, createDialogHandle };

package/dist/components/direction.js

@@ -1,3 +1,3 @@
-import { n as useDirection, t as DirectionProvider } from "../direction-BKSh6e6q.js";
+import { n as useDirection, t as DirectionProvider } from "../direction-DFPbwDSF.js";
 
 export { DirectionProvider, useDirection };

package/dist/components/drawer.d.ts

@@ -1,45 +1,45 @@
-import * as react_jsx_runtime120 from "react/jsx-runtime";
+import * as react_jsx_runtime147 from "react/jsx-runtime";
 import * as React$1 from "react";
 import { Drawer as Drawer$1 } from "@base-ui/react/drawer";
 
 //#region src/components/drawer.d.ts
 declare function Drawer({
   ...props
-}: React$1.ComponentProps<typeof Drawer$1.Root>): react_jsx_runtime120.JSX.Element;
+}: React$1.ComponentProps<typeof Drawer$1.Root>): react_jsx_runtime147.JSX.Element;
 declare function DrawerTrigger({
   ...props
-}: React$1.ComponentProps<typeof Drawer$1.Trigger>): react_jsx_runtime120.JSX.Element;
+}: React$1.ComponentProps<typeof Drawer$1.Trigger>): react_jsx_runtime147.JSX.Element;
 declare function DrawerPortal({
   ...props
-}: React$1.ComponentProps<typeof Drawer$1.Portal>): react_jsx_runtime120.JSX.Element;
+}: React$1.ComponentProps<typeof Drawer$1.Portal>): react_jsx_runtime147.JSX.Element;
 declare function DrawerClose({
   ...props
-}: React$1.ComponentProps<typeof Drawer$1.Close>): react_jsx_runtime120.JSX.Element;
+}: React$1.ComponentProps<typeof Drawer$1.Close>): react_jsx_runtime147.JSX.Element;
 declare function DrawerOverlay({
   className,
   ...props
-}: React$1.ComponentProps<typeof Drawer$1.Backdrop>): react_jsx_runtime120.JSX.Element;
+}: React$1.ComponentProps<typeof Drawer$1.Backdrop>): react_jsx_runtime147.JSX.Element;
 declare function DrawerContent({
   className,
   children,
   ...props
-}: React$1.ComponentProps<typeof Drawer$1.Popup>): react_jsx_runtime120.JSX.Element;
+}: React$1.ComponentProps<typeof Drawer$1.Popup>): react_jsx_runtime147.JSX.Element;
 declare function DrawerHeader({
   className,
   ...props
-}: React$1.ComponentProps<"div">): react_jsx_runtime120.JSX.Element;
+}: React$1.ComponentProps<"div">): react_jsx_runtime147.JSX.Element;
 declare function DrawerFooter({
   className,
   ...props
-}: React$1.ComponentProps<"div">): react_jsx_runtime120.JSX.Element;
+}: React$1.ComponentProps<"div">): react_jsx_runtime147.JSX.Element;
 declare function DrawerTitle({
   className,
   ...props
-}: React$1.ComponentProps<typeof Drawer$1.Title>): react_jsx_runtime120.JSX.Element;
+}: React$1.ComponentProps<typeof Drawer$1.Title>): react_jsx_runtime147.JSX.Element;
 declare function DrawerDescription({
   className,
   ...props
-}: React$1.ComponentProps<typeof Drawer$1.Description>): react_jsx_runtime120.JSX.Element;
+}: React$1.ComponentProps<typeof Drawer$1.Description>): react_jsx_runtime147.JSX.Element;
 //#endregion
 export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };
 //# sourceMappingURL=drawer.d.ts.map

package/dist/components/drawer.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { t as cn } from "../utils-mWJR2N24.js";
+import { t as cn } from "../utils-DUlptRpf.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import { Drawer as Drawer$1 } from "@base-ui/react/drawer";

package/dist/components/dropdown-menu.d.ts

@@ -1,2 +1,2 @@
-import { a as DropdownMenuItem, c as DropdownMenuRadioGroup, d as DropdownMenuShortcut, f as DropdownMenuSub, h as DropdownMenuTrigger, i as DropdownMenuGroup, l as DropdownMenuRadioItem, m as DropdownMenuSubTrigger, n as DropdownMenuCheckboxItem, o as DropdownMenuLabel, p as DropdownMenuSubContent, r as DropdownMenuContent, s as DropdownMenuPortal, t as DropdownMenu, u as DropdownMenuSeparator } from "../dropdown-menu-BC7zFA2L.js";
+import { a as DropdownMenuItem, c as DropdownMenuRadioGroup, d as DropdownMenuShortcut, f as DropdownMenuSub, h as DropdownMenuTrigger, i as DropdownMenuGroup, l as DropdownMenuRadioItem, m as DropdownMenuSubTrigger, n as DropdownMenuCheckboxItem, o as DropdownMenuLabel, p as DropdownMenuSubContent, r as DropdownMenuContent, s as DropdownMenuPortal, t as DropdownMenu, u as DropdownMenuSeparator } from "../dropdown-menu-DGgfWYrK.js";
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/components/dropdown-menu.js

@@ -1,4 +1,4 @@
-import "../utils-mWJR2N24.js";
-import { a as DropdownMenuItem, c as DropdownMenuRadioGroup, d as DropdownMenuShortcut, f as DropdownMenuSub, h as DropdownMenuTrigger, i as DropdownMenuGroup, l as DropdownMenuRadioItem, m as DropdownMenuSubTrigger, n as DropdownMenuCheckboxItem, o as DropdownMenuLabel, p as DropdownMenuSubContent, r as DropdownMenuContent, s as DropdownMenuPortal, t as DropdownMenu, u as DropdownMenuSeparator } from "../dropdown-menu-CcumvwhM.js";
+import "../utils-DUlptRpf.js";
+import { a as DropdownMenuItem, c as DropdownMenuRadioGroup, d as DropdownMenuShortcut, f as DropdownMenuSub, h as DropdownMenuTrigger, i as DropdownMenuGroup, l as DropdownMenuRadioItem, m as DropdownMenuSubTrigger, n as DropdownMenuCheckboxItem, o as DropdownMenuLabel, p as DropdownMenuSubContent, r as DropdownMenuContent, s as DropdownMenuPortal, t as DropdownMenu, u as DropdownMenuSeparator } from "../dropdown-menu-BWEfcvmP.js";
 
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/components/editor-output.d.ts

@@ -0,0 +1,87 @@
+import * as react_jsx_runtime172 from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Config } from "dompurify";
+
+//#region src/components/editor-output.d.ts
+
+/**
+ * Default DOMPurify allow-list used by {@link EditorOutput}.
+ *
+ * Covers the formatting that the paired `RichTextEditor` can produce —
+ * headings, emphasis, lists, links, blockquotes, code, tables, and images —
+ * while stripping anything that could execute (`<script>`, `<style>`,
+ * `<iframe>`, inline event handlers like `onclick`, and `javascript:` URIs).
+ * `RETURN_TRUSTED_TYPE` is intentionally off so the result is a plain string
+ * suitable for `dangerouslySetInnerHTML`.
+ */
+declare const DEFAULT_SANITIZE_CONFIG: Config;
+/**
+ * Token-driven prose styling for sanitized rich-text output.
+ *
+ * These are the descendant typography rules applied to whatever HTML
+ * {@link EditorOutput} renders (headings, lists, links, code, tables, …).
+ * Kept as a single exported constant so the component's `cn()` call merges
+ * this prose base with the consumer's layout-only `className` — and so other
+ * surfaces can reuse the exact same prose treatment if needed.
+ *
+ * All colors resolve to `globals.css` semantic tokens, so it adapts to
+ * light/dark themes automatically.
+ */
+declare const EDITOR_OUTPUT_PROSE: string;
+interface EditorOutputProps extends Omit<React$1.ComponentProps<"div">, "children" | "dangerouslySetInnerHTML"> {
+  /**
+   * The raw, untrusted rich-text HTML string to render. It is sanitized with
+   * DOMPurify before being injected into the DOM. Pass the value produced by
+   * the paired `RichTextEditor`.
+   */
+  html: string;
+  /**
+   * Additional DOMPurify configuration, shallow-merged over the built-in
+   * allow-list. The merge is per-key, so passing `ALLOWED_TAGS` or
+   * `ALLOWED_ATTR` *replaces* that list rather than extending it. Spread
+   * {@link DEFAULT_SANITIZE_CONFIG} to widen from the defaults. `FORBID_TAGS`
+   * keeps `<script>`, `<style>`, `<iframe>` and friends stripped regardless of
+   * what you pass.
+   */
+  sanitizeConfig?: Config;
+  /** Additional class names applied to the prose-styled wrapper. */
+  className?: string;
+}
+/**
+ * `EditorOutput` — the read-only renderer for sanitized rich-text HTML.
+ *
+ * Pairs with `RichTextEditor`: the editor produces an HTML string, and this
+ * component safely displays it. The input is **never** trusted: it is run
+ * through DOMPurify against a sensible allow-list (formatting, links, lists,
+ * tables, images) with all scripts, inline event handlers, and unsafe URI
+ * schemes stripped before being rendered via `dangerouslySetInnerHTML`.
+ *
+ * Client-rendered: DOMPurify needs a DOM (`window`), so sanitization runs in
+ * the browser and the markup is injected on the first paint. If imported into
+ * a server render (no `window`) it emits empty markup and fills in on the
+ * client.
+ *
+ * Styling resolves entirely to `globals.css` design tokens, so output adapts
+ * to light/dark themes automatically.
+ *
+ * @example
+ * ```tsx
+ * // Render the value coming out of a RichTextEditor
+ * <EditorOutput html={job.descriptionHtml} />
+ *
+ * // Tighten the allow-list for a comment surface (no images, no tables)
+ * <EditorOutput
+ *   html={comment.body}
+ *   sanitizeConfig={{ ALLOWED_TAGS: ["p", "br", "b", "i", "em", "strong", "a"] }}
+ * />
+ * ```
+ */
+declare function EditorOutput({
+  html,
+  sanitizeConfig,
+  className,
+  ...props
+}: EditorOutputProps): react_jsx_runtime172.JSX.Element;
+//#endregion
+export { DEFAULT_SANITIZE_CONFIG, EDITOR_OUTPUT_PROSE, EditorOutput, EditorOutputProps };
+//# sourceMappingURL=editor-output.d.ts.map

package/dist/components/editor-output.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-output.d.ts","names":[],"sources":["../../src/components/editor-output.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAGkD;AAkEjD;AAsCD;;;;;AAmBC,cA7GK,uBA4Ie,EA5IU,MA4IV;;;;;;;;;;;;;cA1Ef;UAwBW,iBAAA,SACP,KAAK,OAAA,CAAM;;;;;;;;;;;;;;;mBAeF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkCV,YAAA;;;;;GAKN,oBAAiB,oBAAA,CAAA,GAAA,CAAA"}

package/dist/components/editor-output.js

@@ -0,0 +1,158 @@
+"use client";
+
+import { t as cn } from "../utils-DUlptRpf.js";
+import { jsx } from "react/jsx-runtime";
+import * as React$1 from "react";
+import DOMPurify from "dompurify";
+
+//#region src/components/editor-output.tsx
+/**
+* Default DOMPurify allow-list used by {@link EditorOutput}.
+*
+* Covers the formatting that the paired `RichTextEditor` can produce —
+* headings, emphasis, lists, links, blockquotes, code, tables, and images —
+* while stripping anything that could execute (`<script>`, `<style>`,
+* `<iframe>`, inline event handlers like `onclick`, and `javascript:` URIs).
+* `RETURN_TRUSTED_TYPE` is intentionally off so the result is a plain string
+* suitable for `dangerouslySetInnerHTML`.
+*/
+const DEFAULT_SANITIZE_CONFIG = {
+	ALLOWED_TAGS: [
+		"a",
+		"b",
+		"blockquote",
+		"br",
+		"code",
+		"div",
+		"em",
+		"h1",
+		"h2",
+		"h3",
+		"h4",
+		"h5",
+		"h6",
+		"hr",
+		"i",
+		"img",
+		"li",
+		"ol",
+		"p",
+		"pre",
+		"s",
+		"span",
+		"strong",
+		"sub",
+		"sup",
+		"table",
+		"tbody",
+		"td",
+		"th",
+		"thead",
+		"tr",
+		"u",
+		"ul"
+	],
+	ALLOWED_ATTR: [
+		"href",
+		"target",
+		"rel",
+		"src",
+		"alt",
+		"title",
+		"colspan",
+		"rowspan"
+	],
+	ALLOWED_URI_REGEXP: /^(?:(?:https?|mailto|tel|ftp):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i,
+	FORBID_TAGS: [
+		"script",
+		"style",
+		"iframe",
+		"object",
+		"embed",
+		"form"
+	],
+	FORBID_ATTR: ["style", "srcset"]
+};
+/**
+* Token-driven prose styling for sanitized rich-text output.
+*
+* These are the descendant typography rules applied to whatever HTML
+* {@link EditorOutput} renders (headings, lists, links, code, tables, …).
+* Kept as a single exported constant so the component's `cn()` call merges
+* this prose base with the consumer's layout-only `className` — and so other
+* surfaces can reuse the exact same prose treatment if needed.
+*
+* All colors resolve to `globals.css` semantic tokens, so it adapts to
+* light/dark themes automatically.
+*/
+const EDITOR_OUTPUT_PROSE = [
+	"text-foreground text-sm leading-relaxed break-words",
+	"[&_h1]:mt-4 [&_h1]:mb-2 [&_h1]:text-2xl [&_h1]:font-semibold",
+	"[&_h2]:mt-4 [&_h2]:mb-2 [&_h2]:text-xl [&_h2]:font-semibold",
+	"[&_h3]:mt-3 [&_h3]:mb-1.5 [&_h3]:text-lg [&_h3]:font-semibold",
+	"[&_h4]:mt-3 [&_h4]:mb-1.5 [&_h4]:text-base [&_h4]:font-semibold",
+	"[&_p]:my-2",
+	"[&_ul]:my-2 [&_ul]:list-disc [&_ul]:ps-6",
+	"[&_ol]:my-2 [&_ol]:list-decimal [&_ol]:ps-6",
+	"[&_li]:my-0.5",
+	"[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:no-underline",
+	"[&_strong]:font-semibold [&_b]:font-semibold",
+	"[&_em]:italic [&_i]:italic",
+	"[&_blockquote]:my-3 [&_blockquote]:border-s-2 [&_blockquote]:border-border [&_blockquote]:ps-4 [&_blockquote]:text-muted-foreground [&_blockquote]:italic",
+	"[&_code]:rounded [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-xs",
+	"[&_pre]:my-3 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:text-xs",
+	"[&_pre_code]:bg-transparent [&_pre_code]:p-0",
+	"[&_hr]:my-4 [&_hr]:border-border",
+	"[&_img]:my-2 [&_img]:max-w-full [&_img]:rounded-md",
+	"[&_table]:my-3 [&_table]:w-full [&_table]:border-collapse [&_table]:text-left",
+	"[&_th]:border [&_th]:border-border [&_th]:bg-muted [&_th]:px-2.5 [&_th]:py-1.5 [&_th]:font-medium",
+	"[&_td]:border [&_td]:border-border [&_td]:px-2.5 [&_td]:py-1.5"
+].join(" ");
+/**
+* `EditorOutput` — the read-only renderer for sanitized rich-text HTML.
+*
+* Pairs with `RichTextEditor`: the editor produces an HTML string, and this
+* component safely displays it. The input is **never** trusted: it is run
+* through DOMPurify against a sensible allow-list (formatting, links, lists,
+* tables, images) with all scripts, inline event handlers, and unsafe URI
+* schemes stripped before being rendered via `dangerouslySetInnerHTML`.
+*
+* Client-rendered: DOMPurify needs a DOM (`window`), so sanitization runs in
+* the browser and the markup is injected on the first paint. If imported into
+* a server render (no `window`) it emits empty markup and fills in on the
+* client.
+*
+* Styling resolves entirely to `globals.css` design tokens, so output adapts
+* to light/dark themes automatically.
+*
+* @example
+* ```tsx
+* // Render the value coming out of a RichTextEditor
+* <EditorOutput html={job.descriptionHtml} />
+*
+* // Tighten the allow-list for a comment surface (no images, no tables)
+* <EditorOutput
+*   html={comment.body}
+*   sanitizeConfig={{ ALLOWED_TAGS: ["p", "br", "b", "i", "em", "strong", "a"] }}
+* />
+* ```
+*/
+function EditorOutput({ html, sanitizeConfig, className, ...props }) {
+	const sanitized = React$1.useMemo(() => {
+		if (typeof window === "undefined") return "";
+		return DOMPurify.sanitize(html ?? "", {
+			...DEFAULT_SANITIZE_CONFIG,
+			...sanitizeConfig
+		});
+	}, [html, sanitizeConfig]);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "editor-output",
+		className: cn(EDITOR_OUTPUT_PROSE, className),
+		dangerouslySetInnerHTML: { __html: sanitized },
+		...props
+	});
+}
+
+//#endregion
+export { DEFAULT_SANITIZE_CONFIG, EDITOR_OUTPUT_PROSE, EditorOutput };
+//# sourceMappingURL=editor-output.js.map

package/dist/components/editor-output.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-output.js","names":["DEFAULT_SANITIZE_CONFIG: Config","React"],"sources":["../../src/components/editor-output.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport DOMPurify, { type Config } from \"dompurify\"\n\nimport { cn } from \"@px-ui/ui/lib/utils\"\n\n/**\n * Default DOMPurify allow-list used by {@link EditorOutput}.\n *\n * Covers the formatting that the paired `RichTextEditor` can produce —\n * headings, emphasis, lists, links, blockquotes, code, tables, and images —\n * while stripping anything that could execute (`<script>`, `<style>`,\n * `<iframe>`, inline event handlers like `onclick`, and `javascript:` URIs).\n * `RETURN_TRUSTED_TYPE` is intentionally off so the result is a plain string\n * suitable for `dangerouslySetInnerHTML`.\n */\nconst DEFAULT_SANITIZE_CONFIG: Config = {\n  ALLOWED_TAGS: [\n    \"a\",\n    \"b\",\n    \"blockquote\",\n    \"br\",\n    \"code\",\n    \"div\",\n    \"em\",\n    \"h1\",\n    \"h2\",\n    \"h3\",\n    \"h4\",\n    \"h5\",\n    \"h6\",\n    \"hr\",\n    \"i\",\n    \"img\",\n    \"li\",\n    \"ol\",\n    \"p\",\n    \"pre\",\n    \"s\",\n    \"span\",\n    \"strong\",\n    \"sub\",\n    \"sup\",\n    \"table\",\n    \"tbody\",\n    \"td\",\n    \"th\",\n    \"thead\",\n    \"tr\",\n    \"u\",\n    \"ul\",\n  ],\n  ALLOWED_ATTR: [\n    \"href\",\n    \"target\",\n    \"rel\",\n    \"src\",\n    \"alt\",\n    \"title\",\n    \"colspan\",\n    \"rowspan\",\n  ],\n  // Only safe URI schemes; blocks javascript:, data: (except images), etc.\n  ALLOWED_URI_REGEXP:\n    /^(?:(?:https?|mailto|tel|ftp):|[^a-z]|[a-z+.-]+(?:[^a-z+.\\-:]|$))/i,\n  // Force-strip anything that can execute or leak.\n  FORBID_TAGS: [\"script\", \"style\", \"iframe\", \"object\", \"embed\", \"form\"],\n  FORBID_ATTR: [\"style\", \"srcset\"],\n}\n\n/**\n * Token-driven prose styling for sanitized rich-text output.\n *\n * These are the descendant typography rules applied to whatever HTML\n * {@link EditorOutput} renders (headings, lists, links, code, tables, …).\n * Kept as a single exported constant so the component's `cn()` call merges\n * this prose base with the consumer's layout-only `className` — and so other\n * surfaces can reuse the exact same prose treatment if needed.\n *\n * All colors resolve to `globals.css` semantic tokens, so it adapts to\n * light/dark themes automatically.\n */\nconst EDITOR_OUTPUT_PROSE = [\n  \"text-foreground text-sm leading-relaxed break-words\",\n  \"[&_h1]:mt-4 [&_h1]:mb-2 [&_h1]:text-2xl [&_h1]:font-semibold\",\n  \"[&_h2]:mt-4 [&_h2]:mb-2 [&_h2]:text-xl [&_h2]:font-semibold\",\n  \"[&_h3]:mt-3 [&_h3]:mb-1.5 [&_h3]:text-lg [&_h3]:font-semibold\",\n  \"[&_h4]:mt-3 [&_h4]:mb-1.5 [&_h4]:text-base [&_h4]:font-semibold\",\n  \"[&_p]:my-2\",\n  \"[&_ul]:my-2 [&_ul]:list-disc [&_ul]:ps-6\",\n  \"[&_ol]:my-2 [&_ol]:list-decimal [&_ol]:ps-6\",\n  \"[&_li]:my-0.5\",\n  \"[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:no-underline\",\n  \"[&_strong]:font-semibold [&_b]:font-semibold\",\n  \"[&_em]:italic [&_i]:italic\",\n  \"[&_blockquote]:my-3 [&_blockquote]:border-s-2 [&_blockquote]:border-border [&_blockquote]:ps-4 [&_blockquote]:text-muted-foreground [&_blockquote]:italic\",\n  \"[&_code]:rounded [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-xs\",\n  \"[&_pre]:my-3 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:text-xs\",\n  \"[&_pre_code]:bg-transparent [&_pre_code]:p-0\",\n  \"[&_hr]:my-4 [&_hr]:border-border\",\n  \"[&_img]:my-2 [&_img]:max-w-full [&_img]:rounded-md\",\n  \"[&_table]:my-3 [&_table]:w-full [&_table]:border-collapse [&_table]:text-left\",\n  \"[&_th]:border [&_th]:border-border [&_th]:bg-muted [&_th]:px-2.5 [&_th]:py-1.5 [&_th]:font-medium\",\n  \"[&_td]:border [&_td]:border-border [&_td]:px-2.5 [&_td]:py-1.5\",\n].join(\" \")\n\nexport interface EditorOutputProps\n  extends Omit<React.ComponentProps<\"div\">, \"children\" | \"dangerouslySetInnerHTML\"> {\n  /**\n   * The raw, untrusted rich-text HTML string to render. It is sanitized with\n   * DOMPurify before being injected into the DOM. Pass the value produced by\n   * the paired `RichTextEditor`.\n   */\n  html: string\n  /**\n   * Additional DOMPurify configuration, shallow-merged over the built-in\n   * allow-list. The merge is per-key, so passing `ALLOWED_TAGS` or\n   * `ALLOWED_ATTR` *replaces* that list rather than extending it. Spread\n   * {@link DEFAULT_SANITIZE_CONFIG} to widen from the defaults. `FORBID_TAGS`\n   * keeps `<script>`, `<style>`, `<iframe>` and friends stripped regardless of\n   * what you pass.\n   */\n  sanitizeConfig?: Config\n  /** Additional class names applied to the prose-styled wrapper. */\n  className?: string\n}\n\n/**\n * `EditorOutput` — the read-only renderer for sanitized rich-text HTML.\n *\n * Pairs with `RichTextEditor`: the editor produces an HTML string, and this\n * component safely displays it. The input is **never** trusted: it is run\n * through DOMPurify against a sensible allow-list (formatting, links, lists,\n * tables, images) with all scripts, inline event handlers, and unsafe URI\n * schemes stripped before being rendered via `dangerouslySetInnerHTML`.\n *\n * Client-rendered: DOMPurify needs a DOM (`window`), so sanitization runs in\n * the browser and the markup is injected on the first paint. If imported into\n * a server render (no `window`) it emits empty markup and fills in on the\n * client.\n *\n * Styling resolves entirely to `globals.css` design tokens, so output adapts\n * to light/dark themes automatically.\n *\n * @example\n * ```tsx\n * // Render the value coming out of a RichTextEditor\n * <EditorOutput html={job.descriptionHtml} />\n *\n * // Tighten the allow-list for a comment surface (no images, no tables)\n * <EditorOutput\n *   html={comment.body}\n *   sanitizeConfig={{ ALLOWED_TAGS: [\"p\", \"br\", \"b\", \"i\", \"em\", \"strong\", \"a\"] }}\n * />\n * ```\n */\nfunction EditorOutput({\n  html,\n  sanitizeConfig,\n  className,\n  ...props\n}: EditorOutputProps) {\n  // DOMPurify requires a DOM. Consumer apps render on the client, so `window`\n  // is present at first paint and the sanitized markup shows immediately, with\n  // no empty-then-fill flash. useMemo keeps re-sanitizing cheap. The\n  // `typeof window` guard is purely defensive: if this is ever imported into a\n  // server render, it emits empty markup instead of throwing, then fills in on\n  // the client.\n  const sanitized = React.useMemo(() => {\n    if (typeof window === \"undefined\") return \"\"\n    return DOMPurify.sanitize(html ?? \"\", {\n      ...DEFAULT_SANITIZE_CONFIG,\n      ...sanitizeConfig,\n    }) as string\n  }, [html, sanitizeConfig])\n\n  return (\n    <div\n      data-slot=\"editor-output\"\n      // Prose base (typography) + consumer className (layout only).\n      className={cn(EDITOR_OUTPUT_PROSE, className)}\n      dangerouslySetInnerHTML={{ __html: sanitized }}\n      {...props}\n    />\n  )\n}\n\nexport { EditorOutput, DEFAULT_SANITIZE_CONFIG, EDITOR_OUTPUT_PROSE }\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,MAAMA,0BAAkC;CACtC,cAAc;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,cAAc;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CAED,oBACE;CAEF,aAAa;EAAC;EAAU;EAAS;EAAU;EAAU;EAAS;EAAO;CACrE,aAAa,CAAC,SAAS,SAAS;CACjC;;;;;;;;;;;;;AAcD,MAAM,sBAAsB;CAC1B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,CAAC,KAAK,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDX,SAAS,aAAa,EACpB,MACA,gBACA,WACA,GAAG,SACiB;CAOpB,MAAM,YAAYC,QAAM,cAAc;AACpC,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,SAAO,UAAU,SAAS,QAAQ,IAAI;GACpC,GAAG;GACH,GAAG;GACJ,CAAC;IACD,CAAC,MAAM,eAAe,CAAC;AAE1B,QACE,oBAAC;EACC,aAAU;EAEV,WAAW,GAAG,qBAAqB,UAAU;EAC7C,yBAAyB,EAAE,QAAQ,WAAW;EAC9C,GAAI;GACJ"}

package/dist/components/empty.d.ts

@@ -1,36 +1,36 @@
-import * as react_jsx_runtime145 from "react/jsx-runtime";
+import * as react_jsx_runtime173 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
-import * as class_variance_authority_types2 from "class-variance-authority/types";
+import * as class_variance_authority_types7 from "class-variance-authority/types";
 
 //#region src/components/empty.d.ts
 declare function Empty({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime145.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime173.JSX.Element;
 declare function EmptyHeader({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime145.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime173.JSX.Element;
 declare const emptyMediaVariants: (props?: ({
   variant?: "default" | "icon" | null | undefined;
-} & class_variance_authority_types2.ClassProp) | undefined) => string;
+} & class_variance_authority_types7.ClassProp) | undefined) => string;
 declare function EmptyMedia({
   className,
   variant,
   ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>): react_jsx_runtime145.JSX.Element;
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>): react_jsx_runtime173.JSX.Element;
 declare function EmptyTitle({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime145.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime173.JSX.Element;
 declare function EmptyDescription({
   className,
   ...props
-}: React.ComponentProps<"p">): react_jsx_runtime145.JSX.Element;
+}: React.ComponentProps<"p">): react_jsx_runtime173.JSX.Element;
 declare function EmptyContent({
   className,
   ...props
-}: React.ComponentProps<"div">): react_jsx_runtime145.JSX.Element;
+}: React.ComponentProps<"div">): react_jsx_runtime173.JSX.Element;
 //#endregion
 export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };
 //# sourceMappingURL=empty.d.ts.map

package/dist/components/empty.js

@@ -1,62 +1,4 @@
-import { t as cn } from "../utils-mWJR2N24.js";
-import { jsx } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
+import "../utils-DUlptRpf.js";
+import { a as EmptyMedia, i as EmptyHeader, n as EmptyContent, o as EmptyTitle, r as EmptyDescription, t as Empty } from "../empty-U4zrLmFU.js";
 
-//#region src/components/empty.tsx
-function Empty({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "empty",
-		className: cn("flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-lg border-dashed p-12 text-center text-balance", className),
-		...props
-	});
-}
-function EmptyHeader({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "empty-header",
-		className: cn("flex max-w-sm flex-col items-center gap-2", className),
-		...props
-	});
-}
-const emptyMediaVariants = cva("mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
-	variants: { variant: {
-		default: "bg-transparent",
-		icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6"
-	} },
-	defaultVariants: { variant: "default" }
-});
-function EmptyMedia({ className, variant = "default", ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "empty-icon",
-		"data-variant": variant,
-		className: cn(emptyMediaVariants({
-			variant,
-			className
-		})),
-		...props
-	});
-}
-function EmptyTitle({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "empty-title",
-		className: cn("font-heading text-lg font-medium tracking-ppx-tight", className),
-		...props
-	});
-}
-function EmptyDescription({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "empty-description",
-		className: cn("text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
-		...props
-	});
-}
-function EmptyContent({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "empty-content",
-		className: cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance", className),
-		...props
-	});
-}
-
-//#endregion
-export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };
-//# sourceMappingURL=empty.js.map
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };