@retikz/core 0.0.1-rc.0 → 0.0.1-rc.1

package/dist/lib/components/draw/segment/useConvertWay.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const require$$0 = require("react");
+const react = require("react");
 const useNodes = require("../../../hooks/context/useNodes.cjs");
 const useForceUpdate = require("../../../hooks/useForceUpdate.cjs");
 const DescartesPoint = require("../../../model/geometry/point/DescartesPoint.cjs");
@@ -8,7 +8,7 @@ const PolarPoint = require("../../../model/geometry/point/PolarPoint.cjs");
 const common = require("../common.cjs");
 const formatPointPosition = (point) => {
   if (Array.isArray(point)) return point;
-  if (point.hasOwnProperty("x") && point.hasOwnProperty("y")) {
+  if ("x" in point && "y" in point) {
     const p = point;
     return [p.x, p.y];
   }
@@ -20,13 +20,13 @@ const getVerticalPoint = (point1, point2, type) => {
   return type === "-|" ? [p2[0], p1[1]] : [p1[0], p2[1]];
 };
 const convertOffsetAndMovePoint = (point) => {
-  const filterPoint = point.replace(/[+()\[\]\s]/g, "");
+  const filterPoint = point.replace(/[+()[\]\s]/g, "");
   return filterPoint.split(",").map((item) => parseFloat(item));
 };
 const useConvertWay = (way) => {
   const { getModel, subscribeModel } = useNodes.default();
   const forceUpdate = useForceUpdate.default();
-  const nodeUpdateCount = require$$0.useRef(0);
+  const nodeUpdateCount = react.useRef(0);
   let cursor = [0, 0];
   const tryGetModel = (name) => {
     const model = getModel(name);
@@ -38,15 +38,16 @@ const useConvertWay = (way) => {
   };
   const subscribeCbs = [];
   let allNodeInit = true;
-  const result = require$$0.useMemo(
+  const result = react.useMemo(
     () => way.map((item, index) => {
       const type = common.getDrawPointType(item);
       switch (type) {
-        case "coordinate":
+        case "coordinate": {
           const corPosition = formatPointPosition(item);
           cursor = corPosition;
           return corPosition;
-        case "node":
+        }
+        case "node": {
           if (![0, way.length - 1].includes(index)) {
             throw new Error(
               "Node can only be the first or last point on DrawSegment component, this may be a retikz bug, please report it."
@@ -61,7 +62,8 @@ const useConvertWay = (way) => {
           if (cb) subscribeCbs.push(cb);
           cursor = nodeModel.center;
           return nodeModel;
-        case "vertical":
+        }
+        case "vertical": {
           if ([0, way.length - 1].includes(index)) {
             throw new Error("Vertical point can not be the first point on path.");
           }
@@ -75,17 +77,19 @@ const useConvertWay = (way) => {
           const verPosition = getVerticalPoint(beforePosition, afterPosition, item);
           cursor = verPosition;
           return cursor;
-        default:
+        }
+        default: {
           if (index === 0) throw new Error("offset/move point can not be the first point on path.");
           const convertedPos = convertOffsetAndMovePoint(item);
           const curPos = DescartesPoint.default.plus(convertedPos, cursor);
           if (type === "move") cursor = curPos;
           return curPos;
+        }
       }
     }),
     [way, nodeUpdateCount.current]
   );
-  require$$0.useLayoutEffect(() => () => {
+  react.useLayoutEffect(() => () => {
     subscribeCbs.forEach((cb) => cb && cb());
   });
   return [result, allNodeInit];

package/dist/lib/components/node/InnerNode.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("../../_virtual/jsx-runtime.cjs");
-const require$$0 = require("react");
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
 const Group = require("../../container/Group.cjs");
 const useNodeShape = require("./_hooks/useNodeShape.cjs");
 const useNodeContent = require("./_hooks/useNodeContent.cjs");
@@ -10,11 +10,11 @@ const css = require("../../utils/css.cjs");
 const useNodes = require("../../hooks/context/useNodes.cjs");
 const useCalculate = require("../../hooks/context/useCalculate.cjs");
 const math = require("../../utils/math.cjs");
-const InnerNode = (props) => {
-  const { name, ref, position, width, height, innerSep, outerSep, rotate } = props;
-  const nodeRef = require$$0.useRef(null);
-  const shapeRef = require$$0.useRef(null);
-  const contentRef = require$$0.useRef(null);
+const InnerNode = react.forwardRef((props, ref) => {
+  const { name, position, width, height, innerSep, outerSep, rotate } = props;
+  const nodeRef = react.useRef(null);
+  const shapeRef = react.useRef(null);
+  const contentRef = react.useRef(null);
   const { getModel, updateModel, deleteModel } = useNodes.default();
   const { precision } = useCalculate.default();
   const nodeConfig = useNodeConfig.default();
@@ -23,7 +23,7 @@ const InnerNode = (props) => {
     updateModel(name, nodeConfig.current, false);
   }
   const groupElement = ref && "current" in ref ? ref.current : nodeRef.current;
-  require$$0.useLayoutEffect(() => {
+  react.useLayoutEffect(() => {
     const contentElement = contentRef.current;
     if (!contentElement) return;
     const { width: elementWidth, height: elementHeight } = contentElement.getBoundingClientRect();
@@ -40,13 +40,13 @@ const InnerNode = (props) => {
       bottom: css.convertCssToPx(sep.bottom, { remPx, emPx, parentPx: height2 })
     };
   };
-  require$$0.useLayoutEffect(() => {
+  react.useLayoutEffect(() => {
     nodeConfig.current.innerSep = getSep(innerSep);
   }, [innerSep]);
-  require$$0.useLayoutEffect(() => {
+  react.useLayoutEffect(() => {
     nodeConfig.current.outerSep = getSep(outerSep);
   }, [outerSep]);
-  require$$0.useLayoutEffect(() => {
+  react.useLayoutEffect(() => {
     var _a, _b, _c, _d;
     const {
       contentSize: [width2, height2],
@@ -61,10 +61,10 @@ const InnerNode = (props) => {
     const realHeight = height2 + innerSep2.top + innerSep2.bottom;
     (_d = shapeRef.current) == null ? void 0 : _d.setAttribute("height", math.convertPrecision(realHeight, precision).toString());
   }, [nodeConfig.current.position, nodeConfig.current.contentSize, nodeConfig.current.innerSep]);
-  require$$0.useLayoutEffect(() => {
+  react.useLayoutEffect(() => {
     if (name) updateModel(name, nodeConfig.current);
   });
-  require$$0.useLayoutEffect(
+  react.useLayoutEffect(
     () => () => {
       if (name) {
         deleteModel(name);
@@ -72,7 +72,7 @@ const InnerNode = (props) => {
     },
     [name]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Group.default,
     {
       ref: ref || nodeRef,
@@ -84,5 +84,5 @@ const InnerNode = (props) => {
       ]
     }
   );
-};
+});
 exports.default = InnerNode;

package/dist/lib/components/node/InnerNode.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { Position } from '../../types/coordinate/descartes';
 import { StrokeProps } from '../../types/svg/stroke';
 import { TikZProps } from '../../types/tikz';
@@ -29,5 +29,5 @@ export type InnerNodeProps = {
     outerSep: DirectionDistance<number | string>;
     rotate?: number;
 } & TikZProps & ContentProps & ShapeProps;
-declare const InnerNode: FC<InnerNodeProps>;
+declare const InnerNode: import('react').ForwardRefExoticComponent<Omit<InnerNodeProps, "ref"> & import('react').RefAttributes<SVGGElement>>;
 export default InnerNode;

package/dist/lib/components/node/Node.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("../../_virtual/jsx-runtime.cjs");
-const require$$0 = require("react");
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
 const InnerNode = require("./InnerNode.cjs");
 const css = require("../../utils/css.cjs");
 const stroke = require("../../utils/style/stroke.cjs");
@@ -9,7 +9,7 @@ const font = require("../../utils/style/font.cjs");
 const DescartesPoint = require("../../model/geometry/point/DescartesPoint.cjs");
 const useScope = require("../../hooks/context/useScope.cjs");
 const color = require("../../node_modules/.pnpm/d3-color@3.1.0/node_modules/d3-color/src/color.cjs");
-const Node = (props) => {
+const Node = react.forwardRef((props, ref) => {
   const { offset: scopeOffset, node } = useScope.default();
   const nodeScopeProps = { offset: scopeOffset, ...node };
   const realProps = {
@@ -19,13 +19,13 @@ const Node = (props) => {
   };
   const { shape = "rectangle", width, height, position, offset, innerSep, outerSep, ...res1Props } = realProps;
   const { r, rx, ry, fill, fillOpacity, stroke: stroke$1 = "transparent", strokeWidth = 1, strokeType, ...res2Props } = res1Props;
-  const { color: color$1 = "currentColor", size, fontSize, fontStyle, fontFamily, style, ...otherProps } = res2Props;
-  const realPosition = require$$0.useMemo(() => {
+  const { color: color$1 = "currentColor", size, fontSize, style, ...otherProps } = res2Props;
+  const realPosition = react.useMemo(() => {
     const formatPosition = position ? DescartesPoint.default.formatPosition(position) : [0, 0];
     const formatOffset = offset ? DescartesPoint.default.formatPosition(offset) : [0, 0];
     return [formatPosition[0] + formatOffset[0], formatPosition[1] + formatOffset[1]];
   }, [position]);
-  const realColor = require$$0.useMemo(() => {
+  const realColor = react.useMemo(() => {
     if (color$1 === "auto" && fill && fill !== "currentColor") {
       const fillColor = color.default(fill);
       if (!fillColor) return color$1 || "currentColor";
@@ -55,15 +55,16 @@ const Node = (props) => {
     };
   };
   const getFontStyle = () => font.convertFontStyle(style);
-  const adjustFontSize = require$$0.useMemo(() => font.convertFontSize(size || fontSize), [size, fontSize]);
-  const adjustedInnerSep = require$$0.useMemo(
+  const adjustFontSize = react.useMemo(() => font.convertFontSize(size || fontSize), [size, fontSize]);
+  const adjustedInnerSep = react.useMemo(
     () => getSep(innerSep, css.convertCssToPx(adjustFontSize) / 3 || "0.3333em"),
     [innerSep]
   );
-  const adjustedOuterSep = require$$0.useMemo(() => getSep(outerSep, 0), [outerSep]);
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+  const adjustedOuterSep = react.useMemo(() => getSep(outerSep, 0), [outerSep]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
     InnerNode.default,
     {
+      ref,
       width: css.convertCssToPx(width),
       height: css.convertCssToPx(height),
       shape,
@@ -83,5 +84,5 @@ const Node = (props) => {
       ...otherProps
     }
   );
-};
+});
 exports.default = Node;

package/dist/lib/components/node/Node.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode, Ref } from 'react';
+import { ReactNode } from 'react';
 import { NodeShape } from './InnerNode';
 import { CssDistanceType } from '../../types/distance';
 import { SepProps } from '../../types/distance/sep';
@@ -10,7 +10,6 @@ import { TikZFontSize } from '../../utils/style/font';
 import { FontProps } from '../../types/svg/font';
 export type NodeProps = {
     name?: TikZKey;
-    ref?: Ref<SVGGElement>;
     /** 位置 */
     position?: PointPosition;
     /** 位置偏移 */
@@ -50,5 +49,45 @@ export type NodeProps = {
     /** 样式 */
     style?: 'bold' | 'italic' | 'serif' | 'sans-serif';
 } & Partial<FontProps> & Partial<StrokeProps> & StrokeShortcutProps;
-declare const Node: FC<NodeProps>;
+declare const Node: import('react').ForwardRefExoticComponent<{
+    name?: TikZKey;
+    /** 位置 */
+    position?: PointPosition;
+    /** 位置偏移 */
+    offset?: PointPosition;
+    /** 内容宽度 */
+    width?: CssDistanceType;
+    /** 内容高度 */
+    height?: CssDistanceType;
+    /** 内容(文本)颜色 */
+    color?: "currentColor" | "auto" | string;
+    /** 内容(文本)透明度 */
+    opacity?: number;
+    /** 内容(文本)字体大小 */
+    size?: string | TikZFontSize | number;
+    /** 内容 */
+    children?: ReactNode;
+    /** 边框形状 */
+    shape?: NodeShape;
+    /** 边框圆角 */
+    r?: CssDistanceType;
+    /** 边框圆角-x */
+    rx?: CssDistanceType;
+    /** 边框圆角-y */
+    ry?: CssDistanceType;
+    /** 背景填充色，默认为 auto */
+    fill?: string | "auto";
+    /** 背景填充色透明度 */
+    fillOpacity?: number;
+    /** 边框样式 */
+    strokeType?: StrokeType;
+    /** 内边距 */
+    innerSep?: CssDistanceType | SepProps;
+    /** 外边距 */
+    outerSep?: CssDistanceType | SepProps;
+    /** 旋转 */
+    rotate?: number;
+    /** 样式 */
+    style?: "bold" | "italic" | "serif" | "sans-serif";
+} & Partial<FontProps> & Partial<StrokeProps> & StrokeShortcutProps & import('react').RefAttributes<SVGGElement>>;
 export default Node;

package/dist/lib/components/node/_hooks/useNodeConfig.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const require$$0 = require("react");
+const react = require("react");
 const useNodeConfig = () => {
-  const configRef = require$$0.useRef({
+  const configRef = react.useRef({
     position: [0, 0],
     contentSize: [0, 0],
     innerSep: { left: 0, right: 0, top: 0, bottom: 0 },

package/dist/lib/components/node/_hooks/useNodeConfig.d.ts

@@ -1,3 +1,3 @@
 import { NodeConfig } from '../../../model/component/node';
-declare const useNodeConfig: () => import('react').RefObject<NodeConfig>;
+declare const useNodeConfig: () => import('react').MutableRefObject<NodeConfig>;
 export default useNodeConfig;

package/dist/lib/components/node/_hooks/useNodeContent.cjs

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("../../../_virtual/jsx-runtime.cjs");
-const require$$0 = require("react");
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
 const Text = require("../../../elements/Text.cjs");
 const useNodeContent = (props, ref) => {
   const { color, size, opacity, fontWeight, fontStyle, fontFamily, fontStretch, children } = props;
-  const isTextNode = children !== null && !require$$0.isValidElement(children);
-  return require$$0.useMemo(
-    () => isTextNode ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+  const isTextNode = children !== null && !react.isValidElement(children);
+  return react.useMemo(
+    () => isTextNode ? /* @__PURE__ */ jsxRuntime.jsx(
       Text.default,
       {
         fill: color,
@@ -20,7 +20,10 @@ const useNodeContent = (props, ref) => {
         ref,
         children
       }
-    ) : require$$0.isValidElement(children) ? require$$0.cloneElement(children, { ref }) : children,
+    ) : react.isValidElement(children) ? (
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      react.cloneElement(children, { ref })
+    ) : children,
     isTextNode ? [color, size, children] : [children]
   );
 };

package/dist/lib/components/node/_hooks/useNodeShape.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("../../../_virtual/jsx-runtime.cjs");
-const require$$0 = require("react");
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
 const Rect = require("../../../elements/Rect.cjs");
 const getShapeProps = (nodeProps) => {
   const { rx, ry, fill, fillOpacity, stroke, strokeWidth, strokeOpacity } = nodeProps;
@@ -23,12 +23,12 @@ const getShapeProps = (nodeProps) => {
 };
 const useNodeShape = (props, ref) => {
   const shapeProps = getShapeProps(props);
-  const Shape = require$$0.useMemo(() => {
+  const Shape = react.useMemo(() => {
     switch (props.shape) {
       case "rectangle":
         return Rect.default;
     }
   }, [props.shape, ...Object.values(shapeProps)]);
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Shape, { ref, ...shapeProps });
+  return /* @__PURE__ */ jsxRuntime.jsx(Shape, { ref, ...shapeProps });
 };
 exports.default = useNodeShape;

package/dist/lib/components/{pathNode → path-node}/PathNode.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("../../_virtual/jsx-runtime.cjs");
-const require$$0 = require("react");
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
 const useCalculate = require("../../hooks/context/useCalculate.cjs");
 const useNodes = require("../../hooks/context/useNodes.cjs");
 const useScope = require("../../hooks/context/useScope.cjs");
@@ -10,13 +10,13 @@ const css = require("../../utils/css.cjs");
 const math = require("../../utils/math.cjs");
 const Node = require("../node/Node.cjs");
 const useAnchor = require("./useAnchor.cjs");
-const PathNode = (props) => {
-  const { segmentIndex = -1, offset = [0, 0], anchor, ref, left, right, above, below, name, ...resProps } = props;
+const PathNode = react.forwardRef((props, ref) => {
+  const { segmentIndex = -1, offset = [0, 0], anchor, left, right, above, below, name, ...resProps } = props;
   const { pos, veryNearStart, veryNearEnd, start, nearStart, midway, nearEnd, end, sloped, ...nodeProps } = resProps;
-  const id = require$$0.useId();
+  const id = react.useId();
   const realName = name ?? id;
   const { precision } = useCalculate.default();
-  const posRadio = require$$0.useMemo(() => {
+  const posRadio = react.useMemo(() => {
     if (pos !== void 0) return pos;
     if (start) return 0;
     if (veryNearStart) return 0.125;
@@ -26,7 +26,7 @@ const PathNode = (props) => {
     if (veryNearEnd) return 0.875;
     return 1;
   }, [pos, veryNearStart, veryNearEnd, start, nearStart, midway, nearEnd, end]);
-  const directionPos = require$$0.useMemo(() => {
+  const directionPos = react.useMemo(() => {
     if (left) return { direction: "left", distance: typeof left === "boolean" ? 0 : css.convertCssToPx(left) };
     if (right) return { direction: "right", distance: typeof right === "boolean" ? 0 : css.convertCssToPx(right) };
     if (above) return { direction: "top", distance: typeof above === "boolean" ? 0 : css.convertCssToPx(above) };
@@ -34,13 +34,13 @@ const PathNode = (props) => {
     return { direction: anchor ?? "center", distance: 0 };
   }, [anchor, left, right, above, below]);
   const { position: anchorPosition, angle: anchorAngle } = useAnchor.default(posRadio, segmentIndex);
-  const [adjustOffset, setAdjustOffset] = require$$0.useState(DescartesPoint.default.plus(anchorPosition, offset));
+  const [adjustOffset, setAdjustOffset] = react.useState(DescartesPoint.default.plus(anchorPosition, offset));
   const { getModel } = useNodes.default();
-  const rotate = require$$0.useMemo(() => {
+  const rotate = react.useMemo(() => {
     if (!sloped) return 0;
     return anchorAngle * (180 / Math.PI);
   }, [sloped, anchorAngle]);
-  require$$0.useLayoutEffect(() => {
+  react.useLayoutEffect(() => {
     const model = getModel(realName);
     if (!model || !model.init) return;
     const { direction, distance } = directionPos;
@@ -62,7 +62,7 @@ const PathNode = (props) => {
     setAdjustOffset(DescartesPoint.default.plus(anchorPosition, directionPosition, offset));
   }, [anchorPosition, directionPos]);
   const scope = useScope.default();
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(useScope.ScopeContext, { value: { ...scope, offset: [0, 0] }, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(useScope.ScopeContext.Provider, { value: { ...scope, offset: [0, 0] }, children: /* @__PURE__ */ jsxRuntime.jsx(
     Node.default,
     {
       name: realName,
@@ -72,5 +72,5 @@ const PathNode = (props) => {
       ...nodeProps
     }
   ) });
-};
+});
 exports.default = PathNode;

package/dist/lib/components/{pathNode → path-node}/PathNode.d.ts

@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import { Direction } from '../../types/coordinate';
 import { Position } from '../../types/coordinate/descartes';
 import { NodeProps } from '../node/Node';
@@ -35,5 +34,15 @@ export type PathNodeProps = {
     /** 跟随箭头位置 */
     sloped?: boolean;
 } & PathNodePositionProps & PosShortcutProps & Omit<NodeProps, 'position'>;
-declare const PathNode: FC<PathNodeProps>;
+declare const PathNode: import('react').ForwardRefExoticComponent<{
+    segmentIndex?: number;
+    /** path 片段的下标 */
+    pos?: number;
+    /** 相对于路径的位置 */
+    anchor?: Direction | "center";
+    /** 偏移位置 */
+    offset?: Position;
+    /** 跟随箭头位置 */
+    sloped?: boolean;
+} & PathNodePositionProps & PosShortcutProps & Omit<NodeProps, "position"> & import('react').RefAttributes<SVGGElement>>;
 export default PathNode;

package/dist/lib/components/{pathNode → path-node}/useAnchor.cjs

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const require$$0 = require("react");
+const react = require("react");
 const useCalculate = require("../../hooks/context/useCalculate.cjs");
 const usePath = require("../../hooks/context/usePath.cjs");
 const useForceUpdate = require("../../hooks/useForceUpdate.cjs");
 const line = require("../../model/equation/line.cjs");
 const math = require("../../utils/math.cjs");
 const useAnchor = (pos, segmentIndex) => {
-  const pathUpdateCount = require$$0.useRef(0);
+  const pathUpdateCount = react.useRef(0);
   const forceUpdate = useForceUpdate.default();
   const { model, subscribeModel } = usePath.default();
   const { precision } = useCalculate.default();
@@ -16,12 +16,12 @@ const useAnchor = (pos, segmentIndex) => {
     pathUpdateCount.current += 1;
     queueMicrotask(forceUpdate);
   });
-  require$$0.useLayoutEffect(() => () => {
+  react.useLayoutEffect(() => () => {
     subscribeCb == null ? void 0 : subscribeCb();
   });
   const adjustIndex = segmentIndex >= 0 ? segmentIndex : model.ways.length + segmentIndex;
   if (!math.between(adjustIndex, [0, model.ways.length - 1], true)) throw new Error("segmentIndex is out of range");
-  return require$$0.useMemo(() => {
+  return react.useMemo(() => {
     if (!model.init)
       return {
         position: [Number.MAX_SAFE_INTEGER / 2, Number.MAX_SAFE_INTEGER / 2],

package/dist/lib/container/Group.cjs

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("../_virtual/jsx-runtime.cjs");
-const Group = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("g", { ...props });
-};
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const Group = react.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("g", { ref, ...props });
+});
 exports.default = Group;

package/dist/lib/container/Group.d.ts

@@ -1,6 +1,6 @@
-import { FC, PropsWithChildren, Ref, SVGProps } from 'react';
+import { PropsWithChildren, Ref, SVGProps } from 'react';
 export type GroupProps = {
     ref?: Ref<SVGGElement>;
 } & SVGProps<SVGGElement>;
-declare const Group: FC<PropsWithChildren<GroupProps>>;
+declare const Group: import('react').ForwardRefExoticComponent<Omit<PropsWithChildren<SVGProps<SVGGElement>>, "ref"> & import('react').RefAttributes<SVGGElement>>;
 export default Group;

package/dist/lib/container/Surface.cjs

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("../_virtual/jsx-runtime.cjs");
-const require$$0 = require("react");
-const Surface = (props) => {
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const Surface = react.forwardRef((props, ref) => {
   const { title, desc, viewBox, children, width, height, ...otherProps } = props;
-  const svgViewBox = require$$0.useMemo(() => {
+  const svgViewBox = react.useMemo(() => {
     if (!(viewBox == null ? void 0 : viewBox.x) && !(viewBox == null ? void 0 : viewBox.y)) {
       return void 0;
     }
@@ -14,10 +14,10 @@ const Surface = (props) => {
     const viewHeight = (viewBox == null ? void 0 : viewBox.height) || height;
     return viewWidth === void 0 || viewHeight === void 0 ? [viewX, viewY].join(" ") : [viewX, viewY, viewWidth, viewHeight].join(" ");
   }, [width, height, viewBox]);
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("svg", { viewBox: svgViewBox, width, height, ...otherProps, children: [
-    title ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("title", { children: title }) : null,
-    desc ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("desc", { children: desc }) : null,
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ref, viewBox: svgViewBox, width, height, ...otherProps, children: [
+    title ? /* @__PURE__ */ jsxRuntime.jsx("title", { children: title }) : null,
+    desc ? /* @__PURE__ */ jsxRuntime.jsx("desc", { children: desc }) : null,
     children
   ] });
-};
+});
 exports.default = Surface;

package/dist/lib/container/Surface.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, FC, PropsWithChildren } from 'react';
+import { CSSProperties } from 'react';
 export type SurfaceProps = {
     title?: string;
     desc?: string;
@@ -13,5 +13,7 @@ export type SurfaceProps = {
     className?: string;
     style?: CSSProperties;
 };
-declare const Surface: FC<PropsWithChildren<SurfaceProps>>;
+declare const Surface: import('react').ForwardRefExoticComponent<SurfaceProps & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<SVGSVGElement>>;
 export default Surface;

package/dist/lib/elements/Path.cjs

@@ -1,13 +1,14 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("../_virtual/jsx-runtime.cjs");
-const Path = (props) => {
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const Path = react.forwardRef((props, ref) => {
   const { fill: propFill, strokeWidth: propStrokeWidth, stroke: propStroke, ...otherProps } = props;
   const defaultProps = {
     fill: propFill || "transparent",
     strokeWidth: propStrokeWidth ?? 1,
     stroke: propStroke || "currentColor"
   };
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("path", { ...defaultProps, ...otherProps });
-};
+  return /* @__PURE__ */ jsxRuntime.jsx("path", { ref, ...defaultProps, ...otherProps });
+});
 exports.default = Path;

package/dist/lib/elements/Path.d.ts

@@ -1,4 +1,4 @@
-import { FC, SVGProps } from 'react';
+import { SVGProps } from 'react';
 export type PathProps = {} & SVGProps<SVGPathElement>;
-declare const Path: FC<PathProps>;
+declare const Path: import('react').ForwardRefExoticComponent<Omit<SVGProps<SVGPathElement>, "ref"> & import('react').RefAttributes<SVGPathElement>>;
 export default Path;

package/dist/lib/elements/Rect.cjs

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("../_virtual/jsx-runtime.cjs");
-const Rect = (props) => {
-  const { ref, ...otherProps } = props;
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("rect", { ref, ...otherProps });
-};
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const Rect = react.forwardRef((props, ref) => {
+  const { ...otherProps } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx("rect", { ref, ...otherProps });
+});
 exports.default = Rect;

package/dist/lib/elements/Rect.d.ts

@@ -1,6 +1,4 @@
-import { FC, PropsWithChildren, Ref, SVGProps } from 'react';
-export type RectProps = {
-    ref?: Ref<SVGRectElement>;
-} & SVGProps<SVGRectElement>;
-declare const Rect: FC<PropsWithChildren<RectProps>>;
+import { PropsWithChildren, SVGProps } from 'react';
+export type RectProps = SVGProps<SVGRectElement>;
+declare const Rect: import('react').ForwardRefExoticComponent<Omit<PropsWithChildren<RectProps>, "ref"> & import('react').RefAttributes<SVGRectElement>>;
 export default Rect;