@aznabee/freehand-ui 0.1.8 → 0.2.1

package/dist/react.cjs

@@ -582,8 +582,13 @@ function annotationAnchor(position, rect, offset = 12) {
   return point;
 }
 
-// src/renderer.js
+// src/svg-dom.js
 var SVG_NS = "http://www.w3.org/2000/svg";
+function createSvgElement(tag) {
+  return document.createElementNS(SVG_NS, tag);
+}
+
+// src/renderer.js
 var XML_NS = "http://www.w3.org/XML/1998/namespace";
 var HANDWRITTEN_FONT = '"Caveat", "Kalam", "Patrick Hand", "Bradley Hand", "Segoe Script", "Comic Sans MS", cursive';
 var NOTE_FONT_SIZE = 19;
@@ -807,7 +812,7 @@ function createBorderBreaks(perimeter, config, random) {
   return breaks;
 }
 function createGroup(parent, x, y, rotation = 0) {
-  const group = document.createElementNS(SVG_NS, "g");
+  const group = createSvgElement("g");
   group.setAttribute(
     "transform",
     `translate(${fmt(x)} ${fmt(y)}) rotate(${rotation.toFixed(1)})`
@@ -816,7 +821,7 @@ function createGroup(parent, x, y, rotation = 0) {
   return group;
 }
 function appendPath(svg, d, style) {
-  const path = document.createElementNS(SVG_NS, "path");
+  const path = createSvgElement("path");
   path.setAttribute("d", d);
   path.setAttribute("fill", style.fill ?? "none");
   path.setAttribute("stroke", style.color);
@@ -831,7 +836,7 @@ function appendPath(svg, d, style) {
   return path;
 }
 function appendGlow(svg, radius, style) {
-  const circle = document.createElementNS(SVG_NS, "circle");
+  const circle = createSvgElement("circle");
   circle.setAttribute("r", fmt(radius));
   circle.setAttribute("fill", style.color);
   circle.setAttribute("opacity", String(style.opacity));
@@ -1135,7 +1140,7 @@ function drawArrow(svg, rect, arrowOptions, style, seed, origin = null, context
       tipAngle = Math.atan2(end.y - c2y, end.x - c2x);
     }
   }
-  const group = document.createElementNS(SVG_NS, "g");
+  const group = createSvgElement("g");
   svg.appendChild(group);
   const shaftPaths = [];
   if (ghost) {
@@ -1225,8 +1230,8 @@ function createNoteText(svg, text, style, options = {}) {
   const lines = wrapWords(text, options.wordsPerLine ?? DEFAULT_WORDS_PER_LINE);
   const lineHeight = fontSize * 1.05;
   const rtl = options.rtl ?? isRtlText(text);
-  const group = document.createElementNS(SVG_NS, "g");
-  const textEl = document.createElementNS(SVG_NS, "text");
+  const group = createSvgElement("g");
+  const textEl = createSvgElement("text");
   textEl.setAttribute("x", "0");
   textEl.setAttribute("y", "0");
   textEl.setAttribute("fill", style.color);
@@ -1245,7 +1250,7 @@ function createNoteText(svg, text, style, options = {}) {
     textEl.setAttributeNS(XML_NS, "xml:lang", options.locale);
   }
   const tspans = lines.map((line, index) => {
-    const tspan = document.createElementNS(SVG_NS, "tspan");
+    const tspan = createSvgElement("tspan");
     tspan.textContent = line;
     tspan.setAttribute("x", "0");
     tspan.setAttribute("dy", index === 0 ? "0" : String(lineHeight));
@@ -1309,7 +1314,7 @@ function placeNoteText(note, box, style, seed, options = {}) {
   return note.group;
 }
 function createOverlaySvg(left, top, width, height) {
-  const svg = document.createElementNS(SVG_NS, "svg");
+  const svg = createSvgElement("svg");
   svg.setAttribute("class", OVERLAY_CLASS);
   svg.setAttribute("xmlns", SVG_NS);
   svg.setAttribute("width", String(width));

package/dist/react.js

@@ -565,8 +565,13 @@ function annotationAnchor(position, rect, offset = 12) {
   return point;
 }
 
-// src/renderer.js
+// src/svg-dom.js
 var SVG_NS = "http://www.w3.org/2000/svg";
+function createSvgElement(tag) {
+  return document.createElementNS(SVG_NS, tag);
+}
+
+// src/renderer.js
 var XML_NS = "http://www.w3.org/XML/1998/namespace";
 var HANDWRITTEN_FONT = '"Caveat", "Kalam", "Patrick Hand", "Bradley Hand", "Segoe Script", "Comic Sans MS", cursive';
 var NOTE_FONT_SIZE = 19;
@@ -790,7 +795,7 @@ function createBorderBreaks(perimeter, config, random) {
   return breaks;
 }
 function createGroup(parent, x, y, rotation = 0) {
-  const group = document.createElementNS(SVG_NS, "g");
+  const group = createSvgElement("g");
   group.setAttribute(
     "transform",
     `translate(${fmt(x)} ${fmt(y)}) rotate(${rotation.toFixed(1)})`
@@ -799,7 +804,7 @@ function createGroup(parent, x, y, rotation = 0) {
   return group;
 }
 function appendPath(svg, d, style) {
-  const path = document.createElementNS(SVG_NS, "path");
+  const path = createSvgElement("path");
   path.setAttribute("d", d);
   path.setAttribute("fill", style.fill ?? "none");
   path.setAttribute("stroke", style.color);
@@ -814,7 +819,7 @@ function appendPath(svg, d, style) {
   return path;
 }
 function appendGlow(svg, radius, style) {
-  const circle = document.createElementNS(SVG_NS, "circle");
+  const circle = createSvgElement("circle");
   circle.setAttribute("r", fmt(radius));
   circle.setAttribute("fill", style.color);
   circle.setAttribute("opacity", String(style.opacity));
@@ -1118,7 +1123,7 @@ function drawArrow(svg, rect, arrowOptions, style, seed, origin = null, context
       tipAngle = Math.atan2(end.y - c2y, end.x - c2x);
     }
   }
-  const group = document.createElementNS(SVG_NS, "g");
+  const group = createSvgElement("g");
   svg.appendChild(group);
   const shaftPaths = [];
   if (ghost) {
@@ -1208,8 +1213,8 @@ function createNoteText(svg, text, style, options = {}) {
   const lines = wrapWords(text, options.wordsPerLine ?? DEFAULT_WORDS_PER_LINE);
   const lineHeight = fontSize * 1.05;
   const rtl = options.rtl ?? isRtlText(text);
-  const group = document.createElementNS(SVG_NS, "g");
-  const textEl = document.createElementNS(SVG_NS, "text");
+  const group = createSvgElement("g");
+  const textEl = createSvgElement("text");
   textEl.setAttribute("x", "0");
   textEl.setAttribute("y", "0");
   textEl.setAttribute("fill", style.color);
@@ -1228,7 +1233,7 @@ function createNoteText(svg, text, style, options = {}) {
     textEl.setAttributeNS(XML_NS, "xml:lang", options.locale);
   }
   const tspans = lines.map((line, index) => {
-    const tspan = document.createElementNS(SVG_NS, "tspan");
+    const tspan = createSvgElement("tspan");
     tspan.textContent = line;
     tspan.setAttribute("x", "0");
     tspan.setAttribute("dy", index === 0 ? "0" : String(lineHeight));
@@ -1292,7 +1297,7 @@ function placeNoteText(note, box, style, seed, options = {}) {
   return note.group;
 }
 function createOverlaySvg(left, top, width, height) {
-  const svg = document.createElementNS(SVG_NS, "svg");
+  const svg = createSvgElement("svg");
   svg.setAttribute("class", OVERLAY_CLASS);
   svg.setAttribute("xmlns", SVG_NS);
   svg.setAttribute("width", String(width));

package/native/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@aznabee/freehand-ui-native",
+  "private": true,
+  "main": "../dist/native.cjs",
+  "module": "../dist/native.js",
+  "types": "../dist/native.d.ts"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aznabee/freehand-ui",
-  "version": "0.1.8",
+  "version": "0.2.1",
   "description": "Wrap any existing web element with a beautiful, responsive, hand-drawn doodle layer",
   "type": "module",
   "main": "./dist/freehand-ui.cjs",
@@ -17,10 +17,17 @@
       "types": "./dist/react.d.ts",
       "import": "./dist/react.js",
       "require": "./dist/react.cjs"
+    },
+    "./native": {
+      "types": "./dist/native.d.ts",
+      "import": "./dist/native.js",
+      "require": "./dist/native.cjs"
     }
   },
   "files": [
     "dist",
+    "native",
+    "react",
     "README.md",
     "LICENSE"
   ],
@@ -48,15 +55,24 @@
     "sketch",
     "ui",
     "react",
+    "react-native",
     "gpt-hand-drawn-style"
   ],
   "license": "MIT",
   "peerDependencies": {
-    "react": ">=17"
+    "react": ">=17",
+    "react-native": ">=0.70",
+    "react-native-svg": ">=13"
   },
   "peerDependenciesMeta": {
     "react": {
       "optional": true
+    },
+    "react-native": {
+      "optional": true
+    },
+    "react-native-svg": {
+      "optional": true
     }
   },
   "devDependencies": {

package/react/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@aznabee/freehand-ui-react",
+  "private": true,
+  "main": "../dist/react.cjs",
+  "module": "../dist/react.js",
+  "types": "../dist/react.d.ts"
+}