@openpolicy/react 0.0.14

package/dist/index.d.ts

@@ -0,0 +1,135 @@
+import * as _openpolicy_core0 from "@openpolicy/core";
+import { BoldNode, CookiePolicyConfig, Document, DocumentSection, HeadingNode, ItalicNode, LinkNode, ListNode, Node, OpenPolicyConfig, ParagraphNode, PrivacyPolicyConfig, TermsOfServiceConfig, TextNode } from "@openpolicy/core";
+import { CSSProperties, ComponentType, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/types.d.ts
+type PolicyTheme = Partial<Record<"--op-heading-color" | "--op-body-color" | "--op-section-gap" | "--op-font-family" | "--op-font-size-heading" | "--op-font-weight-heading" | "--op-font-size-body" | "--op-line-height" | "--op-link-color" | "--op-link-color-hover" | "--op-border-color" | "--op-border-radius", string>>;
+interface PolicyComponents {
+  Section?: ComponentType<{
+    section: DocumentSection;
+    children: ReactNode;
+  }>;
+  Heading?: ComponentType<{
+    node: HeadingNode;
+  }>;
+  Paragraph?: ComponentType<{
+    node: ParagraphNode;
+    children: ReactNode;
+  }>;
+  List?: ComponentType<{
+    node: ListNode;
+    children: ReactNode;
+  }>;
+  Text?: ComponentType<{
+    node: TextNode;
+  }>;
+  Bold?: ComponentType<{
+    node: BoldNode;
+  }>;
+  Italic?: ComponentType<{
+    node: ItalicNode;
+  }>;
+  Link?: ComponentType<{
+    node: LinkNode;
+  }>;
+}
+//#endregion
+//#region src/components/CookiePolicy.d.ts
+interface CookiePolicyProps {
+  config?: OpenPolicyConfig | CookiePolicyConfig;
+  components?: PolicyComponents;
+  style?: CSSProperties;
+}
+declare function CookiePolicy({
+  config: configProp,
+  components,
+  style
+}: CookiePolicyProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+//#region src/components/defaults.d.ts
+declare function DefaultHeading({
+  node
+}: {
+  node: HeadingNode;
+}): react_jsx_runtime0.JSX.Element;
+declare function DefaultText({
+  node
+}: {
+  node: TextNode;
+}): react_jsx_runtime0.JSX.Element;
+declare function DefaultBold({
+  node
+}: {
+  node: BoldNode;
+}): react_jsx_runtime0.JSX.Element;
+declare function DefaultLink({
+  node
+}: {
+  node: LinkNode;
+}): react_jsx_runtime0.JSX.Element;
+declare function DefaultSection({
+  section,
+  children
+}: {
+  section: DocumentSection;
+  children: ReactNode;
+}): react_jsx_runtime0.JSX.Element;
+declare function DefaultParagraph({
+  node: _node,
+  children
+}: {
+  node: _openpolicy_core0.ParagraphNode;
+  children: ReactNode;
+}): react_jsx_runtime0.JSX.Element;
+declare function DefaultList({
+  node,
+  children
+}: {
+  node: _openpolicy_core0.ListNode;
+  children: ReactNode;
+}): react_jsx_runtime0.JSX.Element;
+declare function renderNode(node: Node, components: PolicyComponents, key?: number): ReactNode;
+//#endregion
+//#region src/components/PrivacyPolicy.d.ts
+interface PrivacyPolicyProps {
+  config?: OpenPolicyConfig | PrivacyPolicyConfig;
+  components?: PolicyComponents;
+  style?: CSSProperties;
+}
+declare function PrivacyPolicy({
+  config: configProp,
+  components,
+  style
+}: PrivacyPolicyProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+//#region src/components/TermsOfService.d.ts
+interface TermsOfServiceProps {
+  config?: OpenPolicyConfig | TermsOfServiceConfig;
+  components?: PolicyComponents;
+  style?: CSSProperties;
+}
+declare function TermsOfService({
+  config: configProp,
+  components,
+  style
+}: TermsOfServiceProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+//#region src/context.d.ts
+interface OpenPolicyProviderProps {
+  config: OpenPolicyConfig;
+  children: ReactNode;
+}
+declare function OpenPolicyProvider({
+  config,
+  children
+}: OpenPolicyProviderProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/render.d.ts
+declare function renderDocument(doc: Document, components?: PolicyComponents): ReactNode;
+//#endregion
+//#region src/styles.d.ts
+declare const defaultStyles = "\n.op-policy {\n  --op-font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --op-font-size-body: 1rem;\n  --op-font-size-heading: 1.125rem;\n  --op-font-weight-heading: 600;\n  --op-line-height: 1.7;\n  --op-body-color: #374151;\n  --op-heading-color: #111827;\n  --op-link-color: #2563eb;\n  --op-link-color-hover: #1d4ed8;\n  --op-section-gap: 2rem;\n  --op-border-color: #e5e7eb;\n  --op-border-radius: 0.375rem;\n\n  font-family: var(--op-font-family);\n  font-size: var(--op-font-size-body);\n  color: var(--op-body-color);\n  line-height: var(--op-line-height);\n  max-width: 65ch;\n}\n\n.op-section {\n  margin-bottom: var(--op-section-gap);\n  padding-bottom: var(--op-section-gap);\n  border-bottom: 1px solid var(--op-border-color);\n}\n.op-section:last-child {\n  border-bottom: none;\n  margin-bottom: 0;\n  padding-bottom: 0;\n}\n\n.op-heading {\n  font-size: var(--op-font-size-heading);\n  font-weight: var(--op-font-weight-heading);\n  color: var(--op-heading-color);\n  line-height: 1.3;\n  margin: 0 0 0.75rem;\n}\n\n.op-paragraph {\n  margin: 0 0 0.75rem;\n}\n.op-paragraph:last-child { margin-bottom: 0; }\n\n.op-list {\n  margin: 0 0 0.75rem;\n  padding-left: 1.5rem;\n  list-style-type: disc;\n}\n.op-list:last-child { margin-bottom: 0; }\n.op-list .op-list {\n  margin-top: 0.375rem;\n  margin-bottom: 0;\n  list-style-type: circle;\n}\n\n.op-list-item {\n  margin-bottom: 0.375rem;\n}\n.op-list-item:last-child { margin-bottom: 0; }\n\n.op-bold {\n  font-weight: 600;\n  color: var(--op-heading-color);\n}\n\n.op-link {\n  color: var(--op-link-color);\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  transition: color 0.15s ease;\n}\n.op-link:hover { color: var(--op-link-color-hover); }\n";
+//#endregion
+export { CookiePolicy, DefaultBold, DefaultHeading, DefaultLink, DefaultList, DefaultParagraph, DefaultSection, DefaultText, OpenPolicyProvider as OpenPolicy, type PolicyComponents, type PolicyTheme, PrivacyPolicy, TermsOfService, defaultStyles, renderDocument, renderNode };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/types.ts","../src/components/CookiePolicy.tsx","../src/components/defaults.tsx","../src/components/PrivacyPolicy.tsx","../src/components/TermsOfService.tsx","../src/context.tsx","../src/render.tsx","../src/styles.ts"],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,256 @@
+import { compile, expandOpenPolicyConfig, isOpenPolicyConfig } from "@openpolicy/core";
+import { createContext, useContext } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/styles.ts
+const defaultStyles = `
+.op-policy {
+  --op-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --op-font-size-body: 1rem;
+  --op-font-size-heading: 1.125rem;
+  --op-font-weight-heading: 600;
+  --op-line-height: 1.7;
+  --op-body-color: #374151;
+  --op-heading-color: #111827;
+  --op-link-color: #2563eb;
+  --op-link-color-hover: #1d4ed8;
+  --op-section-gap: 2rem;
+  --op-border-color: #e5e7eb;
+  --op-border-radius: 0.375rem;
+
+  font-family: var(--op-font-family);
+  font-size: var(--op-font-size-body);
+  color: var(--op-body-color);
+  line-height: var(--op-line-height);
+  max-width: 65ch;
+}
+
+.op-section {
+  margin-bottom: var(--op-section-gap);
+  padding-bottom: var(--op-section-gap);
+  border-bottom: 1px solid var(--op-border-color);
+}
+.op-section:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.op-heading {
+  font-size: var(--op-font-size-heading);
+  font-weight: var(--op-font-weight-heading);
+  color: var(--op-heading-color);
+  line-height: 1.3;
+  margin: 0 0 0.75rem;
+}
+
+.op-paragraph {
+  margin: 0 0 0.75rem;
+}
+.op-paragraph:last-child { margin-bottom: 0; }
+
+.op-list {
+  margin: 0 0 0.75rem;
+  padding-left: 1.5rem;
+  list-style-type: disc;
+}
+.op-list:last-child { margin-bottom: 0; }
+.op-list .op-list {
+  margin-top: 0.375rem;
+  margin-bottom: 0;
+  list-style-type: circle;
+}
+
+.op-list-item {
+  margin-bottom: 0.375rem;
+}
+.op-list-item:last-child { margin-bottom: 0; }
+
+.op-bold {
+  font-weight: 600;
+  color: var(--op-heading-color);
+}
+
+.op-link {
+  color: var(--op-link-color);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition: color 0.15s ease;
+}
+.op-link:hover { color: var(--op-link-color-hover); }
+`;
+//#endregion
+//#region src/context.tsx
+const OpenPolicyContext = createContext({ config: null });
+function OpenPolicyProvider({ config, children }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", {
+		href: "@openpolicy/react",
+		precedence: "default",
+		children: defaultStyles
+	}), /* @__PURE__ */ jsx(OpenPolicyContext.Provider, {
+		value: { config },
+		children
+	})] });
+}
+//#endregion
+//#region src/components/defaults.tsx
+function DefaultHeading({ node }) {
+	return /* @__PURE__ */ jsx(`h${node.level ?? 2}`, {
+		"data-op-heading": true,
+		className: "op-heading",
+		children: node.value
+	});
+}
+function DefaultText({ node }) {
+	return /* @__PURE__ */ jsx(Fragment, { children: node.value });
+}
+function DefaultBold({ node }) {
+	return /* @__PURE__ */ jsx("strong", {
+		className: "op-bold",
+		children: node.value
+	});
+}
+function DefaultItalic({ node }) {
+	return /* @__PURE__ */ jsx("em", {
+		className: "op-italic",
+		children: node.value
+	});
+}
+function DefaultLink({ node }) {
+	return /* @__PURE__ */ jsx("a", {
+		href: node.href,
+		className: "op-link",
+		children: node.value
+	});
+}
+function DefaultSection({ section, children }) {
+	return /* @__PURE__ */ jsx("section", {
+		"data-op-section": true,
+		className: "op-section",
+		id: section.id,
+		...section.context?.reason && { "data-op-reason": section.context.reason },
+		children
+	});
+}
+function DefaultParagraph({ node: _node, children }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-op-paragraph": true,
+		className: "op-paragraph",
+		children
+	});
+}
+function DefaultList({ node, children }) {
+	return /* @__PURE__ */ jsx(node.ordered ? "ol" : "ul", {
+		"data-op-list": true,
+		className: "op-list",
+		children
+	});
+}
+function renderNode(node, components, key) {
+	switch (node.type) {
+		case "document": return /* @__PURE__ */ jsx(Fragment, { children: node.sections.map((s, i) => renderNode(s, components, i)) });
+		case "section": return /* @__PURE__ */ jsx(components.Section ?? DefaultSection, {
+			section: node,
+			children: node.content.map((n, i) => renderNode(n, components, i))
+		}, key);
+		case "heading": return /* @__PURE__ */ jsx(components.Heading ?? DefaultHeading, { node }, key);
+		case "paragraph": {
+			const children = node.children.map((n, i) => renderNode(n, components, i));
+			if (components.Paragraph) return /* @__PURE__ */ jsx(components.Paragraph, {
+				node,
+				children
+			}, key);
+			return /* @__PURE__ */ jsx("p", {
+				"data-op-paragraph": true,
+				className: "op-paragraph",
+				children
+			}, key);
+		}
+		case "list": {
+			const children = node.items.map((item, i) => renderNode(item, components, i));
+			if (components.List) return /* @__PURE__ */ jsx(components.List, {
+				node,
+				children
+			}, key);
+			return /* @__PURE__ */ jsx(node.ordered ? "ol" : "ul", {
+				"data-op-list": true,
+				className: "op-list",
+				children
+			}, key);
+		}
+		case "listItem": return /* @__PURE__ */ jsx("li", {
+			"data-op-list-item": true,
+			className: "op-list-item",
+			children: node.children.map((n, i) => renderNode(n, components, i))
+		}, key);
+		case "text": return /* @__PURE__ */ jsx(components.Text ?? DefaultText, { node }, key);
+		case "bold": return /* @__PURE__ */ jsx(components.Bold ?? DefaultBold, { node }, key);
+		case "italic": return /* @__PURE__ */ jsx(components.Italic ?? DefaultItalic, { node }, key);
+		case "link": return /* @__PURE__ */ jsx(components.Link ?? DefaultLink, { node }, key);
+	}
+}
+//#endregion
+//#region src/render.tsx
+function renderDocument(doc, components = {}) {
+	return renderNode(doc, components);
+}
+//#endregion
+//#region src/components/CookiePolicy.tsx
+function CookiePolicy({ config: configProp, components, style }) {
+	const { config: contextConfig } = useContext(OpenPolicyContext);
+	const config = configProp ?? contextConfig ?? void 0;
+	if (!config) return null;
+	const input = isOpenPolicyConfig(config) ? expandOpenPolicyConfig(config).find((i) => i.type === "cookie") : {
+		type: "cookie",
+		...config
+	};
+	if (!input) return null;
+	const doc = compile(input);
+	return /* @__PURE__ */ jsx("div", {
+		"data-op-policy": true,
+		className: "op-policy",
+		style,
+		children: renderDocument(doc, components)
+	});
+}
+//#endregion
+//#region src/components/PrivacyPolicy.tsx
+function PrivacyPolicy({ config: configProp, components, style }) {
+	const { config: contextConfig } = useContext(OpenPolicyContext);
+	const config = configProp ?? contextConfig ?? void 0;
+	if (!config) return null;
+	const input = isOpenPolicyConfig(config) ? expandOpenPolicyConfig(config).find((i) => i.type === "privacy") : {
+		type: "privacy",
+		...config
+	};
+	if (!input) return null;
+	const doc = compile(input);
+	return /* @__PURE__ */ jsx("div", {
+		"data-op-policy": true,
+		className: "op-policy",
+		style,
+		children: renderDocument(doc, components)
+	});
+}
+//#endregion
+//#region src/components/TermsOfService.tsx
+function TermsOfService({ config: configProp, components, style }) {
+	const { config: contextConfig } = useContext(OpenPolicyContext);
+	const config = configProp ?? contextConfig ?? void 0;
+	if (!config) return null;
+	const input = isOpenPolicyConfig(config) ? expandOpenPolicyConfig(config).find((i) => i.type === "terms") : {
+		type: "terms",
+		...config
+	};
+	if (!input) return null;
+	const doc = compile(input);
+	return /* @__PURE__ */ jsx("div", {
+		"data-op-policy": true,
+		className: "op-policy",
+		style,
+		children: renderDocument(doc, components)
+	});
+}
+//#endregion
+export { CookiePolicy, DefaultBold, DefaultHeading, DefaultLink, DefaultList, DefaultParagraph, DefaultSection, DefaultText, OpenPolicyProvider as OpenPolicy, PrivacyPolicy, TermsOfService, defaultStyles, renderDocument, renderNode };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/styles.ts","../src/context.tsx","../src/components/defaults.tsx","../src/render.tsx","../src/components/CookiePolicy.tsx","../src/components/PrivacyPolicy.tsx","../src/components/TermsOfService.tsx"],"sourcesContent":["export const defaultStyles = `\n.op-policy {\n  --op-font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --op-font-size-body: 1rem;\n  --op-font-size-heading: 1.125rem;\n  --op-font-weight-heading: 600;\n  --op-line-height: 1.7;\n  --op-body-color: #374151;\n  --op-heading-color: #111827;\n  --op-link-color: #2563eb;\n  --op-link-color-hover: #1d4ed8;\n  --op-section-gap: 2rem;\n  --op-border-color: #e5e7eb;\n  --op-border-radius: 0.375rem;\n\n  font-family: var(--op-font-family);\n  font-size: var(--op-font-size-body);\n  color: var(--op-body-color);\n  line-height: var(--op-line-height);\n  max-width: 65ch;\n}\n\n.op-section {\n  margin-bottom: var(--op-section-gap);\n  padding-bottom: var(--op-section-gap);\n  border-bottom: 1px solid var(--op-border-color);\n}\n.op-section:last-child {\n  border-bottom: none;\n  margin-bottom: 0;\n  padding-bottom: 0;\n}\n\n.op-heading {\n  font-size: var(--op-font-size-heading);\n  font-weight: var(--op-font-weight-heading);\n  color: var(--op-heading-color);\n  line-height: 1.3;\n  margin: 0 0 0.75rem;\n}\n\n.op-paragraph {\n  margin: 0 0 0.75rem;\n}\n.op-paragraph:last-child { margin-bottom: 0; }\n\n.op-list {\n  margin: 0 0 0.75rem;\n  padding-left: 1.5rem;\n  list-style-type: disc;\n}\n.op-list:last-child { margin-bottom: 0; }\n.op-list .op-list {\n  margin-top: 0.375rem;\n  margin-bottom: 0;\n  list-style-type: circle;\n}\n\n.op-list-item {\n  margin-bottom: 0.375rem;\n}\n.op-list-item:last-child { margin-bottom: 0; }\n\n.op-bold {\n  font-weight: 600;\n  color: var(--op-heading-color);\n}\n\n.op-link {\n  color: var(--op-link-color);\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  transition: color 0.15s ease;\n}\n.op-link:hover { color: var(--op-link-color-hover); }\n`;\n","import type { OpenPolicyConfig } from \"@openpolicy/core\";\nimport { createContext, type ReactNode } from \"react\";\nimport { defaultStyles } from \"./styles\";\n\ninterface OpenPolicyContextValue {\n\tconfig: OpenPolicyConfig | null;\n}\n\nexport const OpenPolicyContext = createContext<OpenPolicyContextValue>({\n\tconfig: null,\n});\n\ninterface OpenPolicyProviderProps {\n\tconfig: OpenPolicyConfig;\n\tchildren: ReactNode;\n}\n\nexport function OpenPolicyProvider({\n\tconfig,\n\tchildren,\n}: OpenPolicyProviderProps) {\n\treturn (\n\t\t<>\n\t\t\t<style href=\"@openpolicy/react\" precedence=\"default\">\n\t\t\t\t{defaultStyles}\n\t\t\t</style>\n\t\t\t<OpenPolicyContext.Provider value={{ config }}>\n\t\t\t\t{children}\n\t\t\t</OpenPolicyContext.Provider>\n\t\t</>\n\t);\n}\n","import type {\n\tBoldNode,\n\tDocumentSection,\n\tHeadingNode,\n\tItalicNode,\n\tLinkNode,\n\tNode,\n\tTextNode,\n} from \"@openpolicy/core\";\nimport type { ReactNode } from \"react\";\nimport type { PolicyComponents } from \"../types\";\n\nexport function DefaultHeading({ node }: { node: HeadingNode }) {\n\tconst level = node.level ?? 2;\n\tconst Tag = `h${level}` as \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\treturn (\n\t\t<Tag data-op-heading className=\"op-heading\">\n\t\t\t{node.value}\n\t\t</Tag>\n\t);\n}\n\nexport function DefaultText({ node }: { node: TextNode }) {\n\treturn <>{node.value}</>;\n}\n\nexport function DefaultBold({ node }: { node: BoldNode }) {\n\treturn <strong className=\"op-bold\">{node.value}</strong>;\n}\n\nfunction DefaultItalic({ node }: { node: ItalicNode }) {\n\treturn <em className=\"op-italic\">{node.value}</em>;\n}\n\nexport function DefaultLink({ node }: { node: LinkNode }) {\n\treturn (\n\t\t<a href={node.href} className=\"op-link\">\n\t\t\t{node.value}\n\t\t</a>\n\t);\n}\n\nexport function DefaultSection({\n\tsection,\n\tchildren,\n}: {\n\tsection: DocumentSection;\n\tchildren: ReactNode;\n}) {\n\treturn (\n\t\t<section\n\t\t\tdata-op-section\n\t\t\tclassName=\"op-section\"\n\t\t\tid={section.id}\n\t\t\t{...(section.context?.reason && {\n\t\t\t\t\"data-op-reason\": section.context.reason,\n\t\t\t})}\n\t\t>\n\t\t\t{children}\n\t\t</section>\n\t);\n}\n\nexport function DefaultParagraph({\n\tnode: _node,\n\tchildren,\n}: {\n\tnode: import(\"@openpolicy/core\").ParagraphNode;\n\tchildren: ReactNode;\n}) {\n\treturn (\n\t\t<p data-op-paragraph className=\"op-paragraph\">\n\t\t\t{children}\n\t\t</p>\n\t);\n}\n\nexport function DefaultList({\n\tnode,\n\tchildren,\n}: {\n\tnode: import(\"@openpolicy/core\").ListNode;\n\tchildren: ReactNode;\n}) {\n\tconst Tag = node.ordered ? \"ol\" : \"ul\";\n\treturn (\n\t\t<Tag data-op-list className=\"op-list\">\n\t\t\t{children}\n\t\t</Tag>\n\t);\n}\n\nexport function renderNode(\n\tnode: Node,\n\tcomponents: PolicyComponents,\n\tkey?: number,\n): ReactNode {\n\tswitch (node.type) {\n\t\tcase \"document\":\n\t\t\treturn <>{node.sections.map((s, i) => renderNode(s, components, i))}</>;\n\n\t\tcase \"section\": {\n\t\t\tconst SectionComp = components.Section ?? DefaultSection;\n\t\t\treturn (\n\t\t\t\t<SectionComp key={key} section={node}>\n\t\t\t\t\t{node.content.map((n, i) => renderNode(n, components, i))}\n\t\t\t\t</SectionComp>\n\t\t\t);\n\t\t}\n\n\t\tcase \"heading\": {\n\t\t\tconst HeadingComp = components.Heading ?? DefaultHeading;\n\t\t\treturn <HeadingComp key={key} node={node} />;\n\t\t}\n\n\t\tcase \"paragraph\": {\n\t\t\tconst children = node.children.map((n, i) =>\n\t\t\t\trenderNode(n, components, i),\n\t\t\t);\n\t\t\tif (components.Paragraph)\n\t\t\t\treturn (\n\t\t\t\t\t<components.Paragraph key={key} node={node}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</components.Paragraph>\n\t\t\t\t);\n\t\t\treturn (\n\t\t\t\t<p key={key} data-op-paragraph className=\"op-paragraph\">\n\t\t\t\t\t{children}\n\t\t\t\t</p>\n\t\t\t);\n\t\t}\n\n\t\tcase \"list\": {\n\t\t\tconst children = node.items.map((item, i) =>\n\t\t\t\trenderNode(item, components, i),\n\t\t\t);\n\t\t\tif (components.List)\n\t\t\t\treturn (\n\t\t\t\t\t<components.List key={key} node={node}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</components.List>\n\t\t\t\t);\n\t\t\tconst ListTag = node.ordered ? \"ol\" : \"ul\";\n\t\t\treturn (\n\t\t\t\t<ListTag key={key} data-op-list className=\"op-list\">\n\t\t\t\t\t{children}\n\t\t\t\t</ListTag>\n\t\t\t);\n\t\t}\n\n\t\tcase \"listItem\":\n\t\t\treturn (\n\t\t\t\t<li key={key} data-op-list-item className=\"op-list-item\">\n\t\t\t\t\t{node.children.map((n, i) => renderNode(n, components, i))}\n\t\t\t\t</li>\n\t\t\t);\n\n\t\tcase \"text\": {\n\t\t\tconst Comp = components.Text ?? DefaultText;\n\t\t\treturn <Comp key={key} node={node} />;\n\t\t}\n\t\tcase \"bold\": {\n\t\t\tconst Comp = components.Bold ?? DefaultBold;\n\t\t\treturn <Comp key={key} node={node} />;\n\t\t}\n\t\tcase \"italic\": {\n\t\t\tconst Comp = components.Italic ?? DefaultItalic;\n\t\t\treturn <Comp key={key} node={node} />;\n\t\t}\n\t\tcase \"link\": {\n\t\t\tconst Comp = components.Link ?? DefaultLink;\n\t\t\treturn <Comp key={key} node={node} />;\n\t\t}\n\t}\n}\n","import type { Document } from \"@openpolicy/core\";\nimport type { ReactNode } from \"react\";\nimport { renderNode } from \"./components/defaults\";\nimport type { PolicyComponents } from \"./types\";\n\nexport function renderDocument(\n\tdoc: Document,\n\tcomponents: PolicyComponents = {},\n): ReactNode {\n\treturn renderNode(doc, components);\n}\n","import {\n\ttype CookiePolicyConfig,\n\tcompile,\n\texpandOpenPolicyConfig,\n\tisOpenPolicyConfig,\n\ttype OpenPolicyConfig,\n} from \"@openpolicy/core\";\nimport { type CSSProperties, useContext } from \"react\";\nimport { OpenPolicyContext } from \"../context\";\nimport { renderDocument } from \"../render\";\nimport type { PolicyComponents } from \"../types\";\n\ninterface CookiePolicyProps {\n\tconfig?: OpenPolicyConfig | CookiePolicyConfig;\n\tcomponents?: PolicyComponents;\n\tstyle?: CSSProperties;\n}\n\nexport function CookiePolicy({\n\tconfig: configProp,\n\tcomponents,\n\tstyle,\n}: CookiePolicyProps) {\n\tconst { config: contextConfig } = useContext(OpenPolicyContext);\n\tconst config = configProp ?? contextConfig ?? undefined;\n\tif (!config) return null;\n\tconst input = isOpenPolicyConfig(config)\n\t\t? expandOpenPolicyConfig(config).find((i) => i.type === \"cookie\")\n\t\t: { type: \"cookie\" as const, ...config };\n\tif (!input) return null;\n\tconst doc = compile(input);\n\treturn (\n\t\t<div data-op-policy className=\"op-policy\" style={style}>\n\t\t\t{renderDocument(doc, components)}\n\t\t</div>\n\t);\n}\n","import {\n\tcompile,\n\texpandOpenPolicyConfig,\n\tisOpenPolicyConfig,\n\ttype OpenPolicyConfig,\n\ttype PrivacyPolicyConfig,\n} from \"@openpolicy/core\";\nimport { type CSSProperties, useContext } from \"react\";\nimport { OpenPolicyContext } from \"../context\";\nimport { renderDocument } from \"../render\";\nimport type { PolicyComponents } from \"../types\";\n\ninterface PrivacyPolicyProps {\n\tconfig?: OpenPolicyConfig | PrivacyPolicyConfig;\n\tcomponents?: PolicyComponents;\n\tstyle?: CSSProperties;\n}\n\nexport function PrivacyPolicy({\n\tconfig: configProp,\n\tcomponents,\n\tstyle,\n}: PrivacyPolicyProps) {\n\tconst { config: contextConfig } = useContext(OpenPolicyContext);\n\tconst config = configProp ?? contextConfig ?? undefined;\n\tif (!config) return null;\n\tconst input = isOpenPolicyConfig(config)\n\t\t? expandOpenPolicyConfig(config).find((i) => i.type === \"privacy\")\n\t\t: { type: \"privacy\" as const, ...config };\n\tif (!input) return null;\n\tconst doc = compile(input);\n\treturn (\n\t\t<div data-op-policy className=\"op-policy\" style={style}>\n\t\t\t{renderDocument(doc, components)}\n\t\t</div>\n\t);\n}\n","import {\n\tcompile,\n\texpandOpenPolicyConfig,\n\tisOpenPolicyConfig,\n\ttype OpenPolicyConfig,\n\ttype TermsOfServiceConfig,\n} from \"@openpolicy/core\";\nimport { type CSSProperties, useContext } from \"react\";\nimport { OpenPolicyContext } from \"../context\";\nimport { renderDocument } from \"../render\";\nimport type { PolicyComponents } from \"../types\";\n\ninterface TermsOfServiceProps {\n\tconfig?: OpenPolicyConfig | TermsOfServiceConfig;\n\tcomponents?: PolicyComponents;\n\tstyle?: CSSProperties;\n}\n\nexport function TermsOfService({\n\tconfig: configProp,\n\tcomponents,\n\tstyle,\n}: TermsOfServiceProps) {\n\tconst { config: contextConfig } = useContext(OpenPolicyContext);\n\tconst config = configProp ?? contextConfig ?? undefined;\n\tif (!config) return null;\n\tconst input = isOpenPolicyConfig(config)\n\t\t? expandOpenPolicyConfig(config).find((i) => i.type === \"terms\")\n\t\t: { type: \"terms\" as const, ...config };\n\tif (!input) return null;\n\tconst doc = compile(input);\n\treturn (\n\t\t<div data-op-policy className=\"op-policy\" style={style}>\n\t\t\t{renderDocument(doc, components)}\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,51 @@
+{
+	"name": "@openpolicy/react",
+	"version": "0.0.14",
+	"type": "module",
+	"description": "React components and hooks for OpenPolicy",
+	"license": "GPL-3.0-only",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/jamiedavenport/openpolicy",
+		"directory": "packages/react"
+	},
+	"files": [
+		"dist",
+		"styles.css",
+		"README.md"
+	],
+	"exports": {
+		".": {
+			"import": "./dist/index.js",
+			"types": "./dist/index.d.ts"
+		},
+		"./styles.css": "./styles.css"
+	},
+	"scripts": {
+		"dev": "rolldown -c --watch",
+		"build": "rolldown -c",
+		"check-types": "tsc --noEmit",
+		"test": "bun test"
+	},
+	"peerDependencies": {
+		"react": ">=19",
+		"react-dom": ">=19"
+	},
+	"dependencies": {
+		"@openpolicy/core": "workspace:*"
+	},
+	"devDependencies": {
+		"@openpolicy/tooling": "workspace:*",
+		"@types/react": "^19.0.0",
+		"react": "^19.0.0"
+	},
+	"publishConfig": {
+		"exports": {
+			".": {
+				"import": "./dist/index.js",
+				"types": "./dist/index.d.ts"
+			},
+			"./styles.css": "./styles.css"
+		}
+	}
+}

package/styles.css

@@ -0,0 +1,30 @@
+/* @openpolicy/react/styles.css — opt-in default styles */
+:root {
+  --op-font-family: system-ui, sans-serif;
+  --op-font-size-body: 1rem;
+  --op-font-size-heading: 1.25rem;
+  --op-heading-color: #111;
+  --op-body-color: #444;
+  --op-section-gap: 2rem;
+  --op-border-color: #e5e5e5;
+  --op-border-radius: 0.25rem;
+  --op-line-height: 1.6;
+}
+
+[data-op-policy] {
+  font-family: var(--op-font-family);
+  color: var(--op-body-color);
+}
+
+[data-op-section] {
+  margin-bottom: var(--op-section-gap);
+}
+
+[data-op-heading] {
+  color: var(--op-heading-color);
+  font-size: var(--op-font-size-heading);
+}
+
+[data-op-body] {
+  line-height: var(--op-line-height);
+}