@retikz/core 0.0.1-rc.0

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

@@ -0,0 +1,33 @@
+import { FC, ReactNode } from 'react';
+import { Position } from '../../types/coordinate/descartes';
+import { StrokeProps } from '../../types/svg/stroke';
+import { TikZProps } from '../../types/tikz';
+import { DirectionDistance } from '../../types/distance';
+import { FontProps } from '../../types/svg/font';
+/** 节点外边框形状 */
+export type NodeShape = 'rectangle';
+/** 外层形状相关属性 */
+export type ShapeProps = {
+    shape: NodeShape;
+    rx?: number | string;
+    ry?: number | string;
+    fill?: string;
+    fillOpacity?: number;
+} & StrokeProps;
+/** 内容相关属性 */
+export type ContentProps = {
+    color: string;
+    opacity?: number;
+    children?: ReactNode;
+    size?: string | number;
+} & FontProps;
+export type InnerNodeProps = {
+    position: Position;
+    width?: number;
+    height?: number;
+    innerSep: DirectionDistance<number | string>;
+    outerSep: DirectionDistance<number | string>;
+    rotate?: number;
+} & TikZProps & ContentProps & ShapeProps;
+declare const InnerNode: FC<InnerNodeProps>;
+export default InnerNode;

package/dist/es/components/node/InnerNode.js

@@ -0,0 +1,88 @@
+import { j as jsxRuntimeExports } from "../../_virtual/jsx-runtime.js";
+import { useRef, useLayoutEffect } from "react";
+import Group from "../../container/Group.js";
+import useNodeShape from "./_hooks/useNodeShape.js";
+import useNodeContent from "./_hooks/useNodeContent.js";
+import useNodeConfig from "./_hooks/useNodeConfig.js";
+import { convertCssToPx } from "../../utils/css.js";
+import useNodes from "../../hooks/context/useNodes.js";
+import useCalculate from "../../hooks/context/useCalculate.js";
+import { convertPrecision } from "../../utils/math.js";
+const InnerNode = (props) => {
+  const { name, ref, position, width, height, innerSep, outerSep, rotate } = props;
+  const nodeRef = useRef(null);
+  const shapeRef = useRef(null);
+  const contentRef = useRef(null);
+  const { getModel, updateModel, deleteModel } = useNodes();
+  const { precision } = useCalculate();
+  const nodeConfig = useNodeConfig();
+  nodeConfig.current.position = position;
+  if (name && !getModel(name)) {
+    updateModel(name, nodeConfig.current, false);
+  }
+  const groupElement = ref && "current" in ref ? ref.current : nodeRef.current;
+  useLayoutEffect(() => {
+    const contentElement = contentRef.current;
+    if (!contentElement) return;
+    const { width: elementWidth, height: elementHeight } = contentElement.getBoundingClientRect();
+    nodeConfig.current.contentSize = [Math.max(elementWidth, width || 0), Math.max(elementHeight, height || 0)];
+  });
+  const getSep = (sep) => {
+    const { width: width2 = 100, height: height2 = 100 } = (groupElement == null ? void 0 : groupElement.getBoundingClientRect()) || {};
+    const remPx = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    const emPx = groupElement ? parseFloat(getComputedStyle(groupElement).fontSize) : remPx;
+    return {
+      left: convertCssToPx(sep.left, { remPx, emPx, parentPx: width2 }),
+      right: convertCssToPx(sep.right, { remPx, emPx, parentPx: width2 }),
+      top: convertCssToPx(sep.top, { remPx, emPx, parentPx: height2 }),
+      bottom: convertCssToPx(sep.bottom, { remPx, emPx, parentPx: height2 })
+    };
+  };
+  useLayoutEffect(() => {
+    nodeConfig.current.innerSep = getSep(innerSep);
+  }, [innerSep]);
+  useLayoutEffect(() => {
+    nodeConfig.current.outerSep = getSep(outerSep);
+  }, [outerSep]);
+  useLayoutEffect(() => {
+    var _a, _b, _c, _d;
+    const {
+      contentSize: [width2, height2],
+      innerSep: innerSep2
+    } = nodeConfig.current;
+    const realX = -width2 / 2 - innerSep2.left;
+    (_a = shapeRef.current) == null ? void 0 : _a.setAttribute("x", convertPrecision(realX, precision).toString());
+    const realY = -height2 / 2 - innerSep2.top;
+    (_b = shapeRef.current) == null ? void 0 : _b.setAttribute("y", convertPrecision(realY, precision).toString());
+    const realWidth = width2 + innerSep2.left + innerSep2.right;
+    (_c = shapeRef.current) == null ? void 0 : _c.setAttribute("width", convertPrecision(realWidth, precision).toString());
+    const realHeight = height2 + innerSep2.top + innerSep2.bottom;
+    (_d = shapeRef.current) == null ? void 0 : _d.setAttribute("height", convertPrecision(realHeight, precision).toString());
+  }, [nodeConfig.current.position, nodeConfig.current.contentSize, nodeConfig.current.innerSep]);
+  useLayoutEffect(() => {
+    if (name) updateModel(name, nodeConfig.current);
+  });
+  useLayoutEffect(
+    () => () => {
+      if (name) {
+        deleteModel(name);
+      }
+    },
+    [name]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Group,
+    {
+      ref: ref || nodeRef,
+      id: name,
+      transform: `translate(${position[0]}, ${position[1]}) ${rotate ? `rotate(${rotate})` : ""}`,
+      children: [
+        useNodeShape(props, shapeRef),
+        useNodeContent(props, contentRef)
+      ]
+    }
+  );
+};
+export {
+  InnerNode as default
+};

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

@@ -0,0 +1,54 @@
+import { FC, ReactNode, Ref } from 'react';
+import { NodeShape } from './InnerNode';
+import { CssDistanceType } from '../../types/distance';
+import { SepProps } from '../../types/distance/sep';
+import { StrokeProps } from '../../types/svg/stroke';
+import { TikZKey } from '../../types/tikz';
+import { StrokeShortcutProps, StrokeType } from '../../utils/style/stroke';
+import { PointPosition } from '../../types/coordinate';
+import { TikZFontSize } from '../../utils/style/font';
+import { FontProps } from '../../types/svg/font';
+export type NodeProps = {
+    name?: TikZKey;
+    ref?: Ref<SVGGElement>;
+    /** 位置 */
+    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;
+declare const Node: FC<NodeProps>;
+export default Node;

package/dist/es/components/node/Node.js

@@ -0,0 +1,87 @@
+import { j as jsxRuntimeExports } from "../../_virtual/jsx-runtime.js";
+import { useMemo } from "react";
+import InnerNode from "./InnerNode.js";
+import { convertCssToPx } from "../../utils/css.js";
+import { convertStrokeType, convertStrokeShortcut } from "../../utils/style/stroke.js";
+import { convertFontSize, convertFontStyle } from "../../utils/style/font.js";
+import DescartesPoint from "../../model/geometry/point/DescartesPoint.js";
+import useScope from "../../hooks/context/useScope.js";
+import color, { hsl } from "../../node_modules/.pnpm/d3-color@3.1.0/node_modules/d3-color/src/color.js";
+const Node = (props) => {
+  const { offset: scopeOffset, node } = useScope();
+  const nodeScopeProps = { offset: scopeOffset, ...node };
+  const realProps = {
+    ...nodeScopeProps,
+    ...props,
+    offset: DescartesPoint.plus(scopeOffset || [0, 0], props.offset || [0, 0])
+  };
+  const { shape = "rectangle", width, height, position, offset, innerSep, outerSep, ...res1Props } = realProps;
+  const { r, rx, ry, fill, fillOpacity, stroke = "transparent", strokeWidth = 1, strokeType, ...res2Props } = res1Props;
+  const { color: color$1 = "currentColor", size, fontSize, fontStyle, fontFamily, style, ...otherProps } = res2Props;
+  const realPosition = useMemo(() => {
+    const formatPosition = position ? DescartesPoint.formatPosition(position) : [0, 0];
+    const formatOffset = offset ? DescartesPoint.formatPosition(offset) : [0, 0];
+    return [formatPosition[0] + formatOffset[0], formatPosition[1] + formatOffset[1]];
+  }, [position]);
+  const realColor = useMemo(() => {
+    if (color$1 === "auto" && fill && fill !== "currentColor") {
+      const fillColor = color(fill);
+      if (!fillColor) return color$1 || "currentColor";
+      fillColor.opacity = fillOpacity || 1;
+      const lightness = hsl(fillColor).l;
+      return lightness < 0.5 ? "white" : "black";
+    }
+    return color$1 || "currentColor";
+  }, [color$1, fill, fillOpacity]);
+  const realRx = rx || r;
+  const realRy = ry || r;
+  const getStrokeAttributes = () => strokeType ? convertStrokeType(strokeType, strokeWidth) : convertStrokeShortcut(otherProps, strokeWidth);
+  const getSep = (sep, defaultVal) => {
+    if (typeof sep !== "object") {
+      return {
+        left: sep ?? defaultVal,
+        right: sep ?? defaultVal,
+        top: sep ?? defaultVal,
+        bottom: sep ?? defaultVal
+      };
+    }
+    return {
+      left: sep.left ?? sep.x ?? defaultVal,
+      right: sep.right ?? sep.x ?? defaultVal,
+      top: sep.top ?? sep.y ?? defaultVal,
+      bottom: sep.bottom ?? sep.y ?? defaultVal
+    };
+  };
+  const getFontStyle = () => convertFontStyle(style);
+  const adjustFontSize = useMemo(() => convertFontSize(size || fontSize), [size, fontSize]);
+  const adjustedInnerSep = useMemo(
+    () => getSep(innerSep, convertCssToPx(adjustFontSize) / 3 || "0.3333em"),
+    [innerSep]
+  );
+  const adjustedOuterSep = useMemo(() => getSep(outerSep, 0), [outerSep]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    InnerNode,
+    {
+      width: convertCssToPx(width),
+      height: convertCssToPx(height),
+      shape,
+      position: realPosition,
+      color: realColor,
+      fill: fill || "transparent",
+      fillOpacity,
+      rx: realRx,
+      ry: realRy,
+      stroke,
+      strokeWidth,
+      innerSep: adjustedInnerSep,
+      outerSep: adjustedOuterSep,
+      size: adjustFontSize,
+      ...getFontStyle(),
+      ...getStrokeAttributes(),
+      ...otherProps
+    }
+  );
+};
+export {
+  Node as default
+};

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

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

package/dist/es/components/node/_hooks/useNodeConfig.js

@@ -0,0 +1,13 @@
+import { useRef } from "react";
+const useNodeConfig = () => {
+  const configRef = useRef({
+    position: [0, 0],
+    contentSize: [0, 0],
+    innerSep: { left: 0, right: 0, top: 0, bottom: 0 },
+    outerSep: { left: 0, right: 0, top: 0, bottom: 0 }
+  });
+  return configRef;
+};
+export {
+  useNodeConfig as default
+};

package/dist/es/components/node/_hooks/useNodeContent.d.ts

@@ -0,0 +1,4 @@
+import { Ref } from 'react';
+import { ContentProps } from '../InnerNode';
+declare const useNodeContent: (props: ContentProps, ref: Ref<SVGElement>) => import("react/jsx-runtime").JSX.Element | null;
+export default useNodeContent;

package/dist/es/components/node/_hooks/useNodeContent.js

@@ -0,0 +1,27 @@
+import { j as jsxRuntimeExports } from "../../../_virtual/jsx-runtime.js";
+import { isValidElement, useMemo, cloneElement } from "react";
+import Text from "../../../elements/Text.js";
+const useNodeContent = (props, ref) => {
+  const { color, size, opacity, fontWeight, fontStyle, fontFamily, fontStretch, children } = props;
+  const isTextNode = children !== null && !isValidElement(children);
+  return useMemo(
+    () => isTextNode ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Text,
+      {
+        fill: color,
+        fontSize: size,
+        fillOpacity: opacity,
+        fontWeight,
+        fontStyle,
+        fontFamily,
+        fontStretch,
+        ref,
+        children
+      }
+    ) : isValidElement(children) ? cloneElement(children, { ref }) : children,
+    isTextNode ? [color, size, children] : [children]
+  );
+};
+export {
+  useNodeContent as default
+};

package/dist/es/components/node/_hooks/useNodeShape.d.ts

@@ -0,0 +1,4 @@
+import { Ref } from 'react';
+import { ShapeProps } from '../InnerNode';
+declare const useNodeShape: (props: ShapeProps, ref: Ref<SVGGraphicsElement>) => import("react/jsx-runtime").JSX.Element;
+export default useNodeShape;

package/dist/es/components/node/_hooks/useNodeShape.js

@@ -0,0 +1,34 @@
+import { j as jsxRuntimeExports } from "../../../_virtual/jsx-runtime.js";
+import { useMemo } from "react";
+import Rect from "../../../elements/Rect.js";
+const getShapeProps = (nodeProps) => {
+  const { rx, ry, fill, fillOpacity, stroke, strokeWidth, strokeOpacity } = nodeProps;
+  const { strokeDasharray, strokeDashoffset, strokeLinecap, strokeLinejoin, strokeMiterlimit } = nodeProps;
+  return {
+    rx,
+    ry,
+    fill,
+    fillOpacity,
+    stroke,
+    strokeWidth,
+    strokeOpacity,
+    strokeDasharray,
+    strokeDashoffset,
+    strokeLinecap,
+    strokeLinejoin,
+    strokeMiterlimit
+  };
+};
+const useNodeShape = (props, ref) => {
+  const shapeProps = getShapeProps(props);
+  const Shape = useMemo(() => {
+    switch (props.shape) {
+      case "rectangle":
+        return Rect;
+    }
+  }, [props.shape, ...Object.values(shapeProps)]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Shape, { ref, ...shapeProps });
+};
+export {
+  useNodeShape as default
+};

package/dist/es/components/node/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Node } from './Node';
+export type { NodeProps } from './Node';
+export default Node;

package/dist/es/components/node/index.js

@@ -0,0 +1,4 @@
+import Node from "./Node.js";
+export {
+  Node as default
+};

package/dist/es/components/pathNode/PathNode.d.ts

@@ -0,0 +1,39 @@
+import { FC } from 'react';
+import { Direction } from '../../types/coordinate';
+import { Position } from '../../types/coordinate/descartes';
+import { NodeProps } from '../node/Node';
+type PathNodePositionProps = {
+    left?: boolean | number | string;
+    right?: boolean | number | string;
+    above?: boolean | number | string;
+    below?: boolean | number | string;
+};
+type PosShortcutProps = {
+    /** pos: 0 */
+    start?: boolean;
+    /** pos: 0.125 */
+    veryNearStart?: boolean;
+    /** pos: 0.25 */
+    nearStart?: boolean;
+    /** pos: 0.5 */
+    midway?: boolean;
+    /** pos: 0.75 */
+    nearEnd?: boolean;
+    /** pos: 0.875 */
+    veryNearEnd?: boolean;
+    /** pos: 1 */
+    end?: boolean;
+};
+export type PathNodeProps = {
+    segmentIndex?: number;
+    /** path 片段的下标 */
+    pos?: number;
+    /** 相对于路径的位置 */
+    anchor?: Direction | 'center';
+    /** 偏移位置 */
+    offset?: Position;
+    /** 跟随箭头位置 */
+    sloped?: boolean;
+} & PathNodePositionProps & PosShortcutProps & Omit<NodeProps, 'position'>;
+declare const PathNode: FC<PathNodeProps>;
+export default PathNode;

package/dist/es/components/pathNode/PathNode.js

@@ -0,0 +1,76 @@
+import { j as jsxRuntimeExports } from "../../_virtual/jsx-runtime.js";
+import { useId, useMemo, useState, useLayoutEffect } from "react";
+import useCalculate from "../../hooks/context/useCalculate.js";
+import useNodes from "../../hooks/context/useNodes.js";
+import useScope, { ScopeContext } from "../../hooks/context/useScope.js";
+import DescartesPoint from "../../model/geometry/point/DescartesPoint.js";
+import { convertCssToPx } from "../../utils/css.js";
+import { convertPrecision } from "../../utils/math.js";
+import Node from "../node/Node.js";
+import useAnchor from "./useAnchor.js";
+const PathNode = (props) => {
+  const { segmentIndex = -1, offset = [0, 0], anchor, ref, left, right, above, below, name, ...resProps } = props;
+  const { pos, veryNearStart, veryNearEnd, start, nearStart, midway, nearEnd, end, sloped, ...nodeProps } = resProps;
+  const id = useId();
+  const realName = name ?? id;
+  const { precision } = useCalculate();
+  const posRadio = useMemo(() => {
+    if (pos !== void 0) return pos;
+    if (start) return 0;
+    if (veryNearStart) return 0.125;
+    if (nearStart) return 0.25;
+    if (midway) return 0.5;
+    if (nearEnd) return 0.75;
+    if (veryNearEnd) return 0.875;
+    return 1;
+  }, [pos, veryNearStart, veryNearEnd, start, nearStart, midway, nearEnd, end]);
+  const directionPos = useMemo(() => {
+    if (left) return { direction: "left", distance: typeof left === "boolean" ? 0 : convertCssToPx(left) };
+    if (right) return { direction: "right", distance: typeof right === "boolean" ? 0 : convertCssToPx(right) };
+    if (above) return { direction: "top", distance: typeof above === "boolean" ? 0 : convertCssToPx(above) };
+    if (below) return { direction: "bottom", distance: typeof below === "boolean" ? 0 : convertCssToPx(below) };
+    return { direction: anchor ?? "center", distance: 0 };
+  }, [anchor, left, right, above, below]);
+  const { position: anchorPosition, angle: anchorAngle } = useAnchor(posRadio, segmentIndex);
+  const [adjustOffset, setAdjustOffset] = useState(DescartesPoint.plus(anchorPosition, offset));
+  const { getModel } = useNodes();
+  const rotate = useMemo(() => {
+    if (!sloped) return 0;
+    return anchorAngle * (180 / Math.PI);
+  }, [sloped, anchorAngle]);
+  useLayoutEffect(() => {
+    const model = getModel(realName);
+    if (!model || !model.init) return;
+    const { direction, distance } = directionPos;
+    let directionPosition = [0, 0];
+    switch (direction) {
+      case "left":
+        directionPosition = [-(model == null ? void 0 : model.getOuterDistance("left")) - distance, 0];
+        break;
+      case "right":
+        directionPosition = [(model == null ? void 0 : model.getOuterDistance("right")) + distance, 0];
+        break;
+      case "top":
+        directionPosition = [0, -(model == null ? void 0 : model.getOuterDistance("top")) - distance];
+        break;
+      case "bottom":
+        directionPosition = [0, (model == null ? void 0 : model.getOuterDistance("bottom")) + distance];
+        break;
+    }
+    setAdjustOffset(DescartesPoint.plus(anchorPosition, directionPosition, offset));
+  }, [anchorPosition, directionPos]);
+  const scope = useScope();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ScopeContext, { value: { ...scope, offset: [0, 0] }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Node,
+    {
+      name: realName,
+      position: convertPrecision(adjustOffset, precision),
+      ref,
+      rotate,
+      ...nodeProps
+    }
+  ) });
+};
+export {
+  PathNode as default
+};

package/dist/es/components/pathNode/index.d.ts

@@ -0,0 +1,3 @@
+import { default as PathNode } from './PathNode';
+export type { PathNodeProps } from './PathNode';
+export default PathNode;

package/dist/es/components/pathNode/index.js

@@ -0,0 +1,4 @@
+import PathNode from "./PathNode.js";
+export {
+  PathNode as default
+};

package/dist/es/components/pathNode/useAnchor.d.ts

@@ -0,0 +1,6 @@
+import { Position } from '../../types/coordinate/descartes';
+declare const useAnchor: (pos: number, segmentIndex: number) => {
+    position: Position;
+    angle: number;
+};
+export default useAnchor;

package/dist/es/components/pathNode/useAnchor.js

@@ -0,0 +1,49 @@
+import { useRef, useLayoutEffect, useMemo } from "react";
+import useCalculate from "../../hooks/context/useCalculate.js";
+import usePath from "../../hooks/context/usePath.js";
+import useForceUpdate from "../../hooks/useForceUpdate.js";
+import Line from "../../model/equation/line.js";
+import { between, convertPrecision } from "../../utils/math.js";
+const useAnchor = (pos, segmentIndex) => {
+  const pathUpdateCount = useRef(0);
+  const forceUpdate = useForceUpdate();
+  const { model, subscribeModel } = usePath();
+  const { precision } = useCalculate();
+  const subscribeCb = subscribeModel((model2) => {
+    if (!(model2 == null ? void 0 : model2.init)) return;
+    pathUpdateCount.current += 1;
+    queueMicrotask(forceUpdate);
+  });
+  useLayoutEffect(() => () => {
+    subscribeCb == null ? void 0 : subscribeCb();
+  });
+  const adjustIndex = segmentIndex >= 0 ? segmentIndex : model.ways.length + segmentIndex;
+  if (!between(adjustIndex, [0, model.ways.length - 1], true)) throw new Error("segmentIndex is out of range");
+  return useMemo(() => {
+    if (!model.init)
+      return {
+        position: [Number.MAX_SAFE_INTEGER / 2, Number.MAX_SAFE_INTEGER / 2],
+        angle: 0
+      };
+    const way = model.ways[adjustIndex];
+    const waySegments = way.length - 1;
+    const segmentPercent = 1 / waySegments;
+    let segmentSum = 0;
+    let index = 0;
+    while (pos >= segmentSum) {
+      segmentSum += segmentPercent;
+      index++;
+    }
+    const startPoint = way[index - 1];
+    const endPoint = way[index];
+    const percent = pos % segmentPercent / segmentPercent;
+    const position = index === way.length ? startPoint : Line.getPositionByPercent(startPoint, endPoint, percent);
+    return {
+      position: convertPrecision(position, precision),
+      angle: index === way.length ? Line.getDegree(way[way.length - 2], way[way.length - 1]) : Line.getDegree(startPoint, endPoint)
+    };
+  }, [pos, segmentIndex, pathUpdateCount.current]);
+};
+export {
+  useAnchor as default
+};

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

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

package/dist/es/container/Group.js

@@ -0,0 +1,7 @@
+import { j as jsxRuntimeExports } from "../_virtual/jsx-runtime.js";
+const Group = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("g", { ...props });
+};
+export {
+  Group as default
+};

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

@@ -0,0 +1,17 @@
+import { CSSProperties, FC, PropsWithChildren } from 'react';
+export type SurfaceProps = {
+    title?: string;
+    desc?: string;
+    width?: string | number;
+    height?: string | number;
+    viewBox?: {
+        x?: number;
+        y?: number;
+        width?: number;
+        height?: number;
+    };
+    className?: string;
+    style?: CSSProperties;
+};
+declare const Surface: FC<PropsWithChildren<SurfaceProps>>;
+export default Surface;

package/dist/es/container/Surface.js

@@ -0,0 +1,23 @@
+import { j as jsxRuntimeExports } from "../_virtual/jsx-runtime.js";
+import { useMemo } from "react";
+const Surface = (props) => {
+  const { title, desc, viewBox, children, width, height, ...otherProps } = props;
+  const svgViewBox = useMemo(() => {
+    if (!(viewBox == null ? void 0 : viewBox.x) && !(viewBox == null ? void 0 : viewBox.y)) {
+      return void 0;
+    }
+    const viewX = (viewBox == null ? void 0 : viewBox.x) || 0;
+    const viewY = (viewBox == null ? void 0 : viewBox.y) || 0;
+    const viewWidth = (viewBox == null ? void 0 : viewBox.width) || width;
+    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__ */ jsxRuntimeExports.jsxs("svg", { viewBox: svgViewBox, width, height, ...otherProps, children: [
+    title ? /* @__PURE__ */ jsxRuntimeExports.jsx("title", { children: title }) : null,
+    desc ? /* @__PURE__ */ jsxRuntimeExports.jsx("desc", { children: desc }) : null,
+    children
+  ] });
+};
+export {
+  Surface as default
+};

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

@@ -0,0 +1,4 @@
+import { FC, SVGProps } from 'react';
+export type PathProps = {} & SVGProps<SVGPathElement>;
+declare const Path: FC<PathProps>;
+export default Path;

package/dist/es/elements/Path.js

@@ -0,0 +1,13 @@
+import { j as jsxRuntimeExports } from "../_virtual/jsx-runtime.js";
+const Path = (props) => {
+  const { fill: propFill, strokeWidth: propStrokeWidth, stroke: propStroke, ...otherProps } = props;
+  const defaultProps = {
+    fill: propFill || "transparent",
+    strokeWidth: propStrokeWidth ?? 1,
+    stroke: propStroke || "currentColor"
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("path", { ...defaultProps, ...otherProps });
+};
+export {
+  Path as default
+};

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

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren, Ref, SVGProps } from 'react';
+export type RectProps = {
+    ref?: Ref<SVGRectElement>;
+} & SVGProps<SVGRectElement>;
+declare const Rect: FC<PropsWithChildren<RectProps>>;
+export default Rect;

package/dist/es/elements/Rect.js

@@ -0,0 +1,8 @@
+import { j as jsxRuntimeExports } from "../_virtual/jsx-runtime.js";
+const Rect = (props) => {
+  const { ref, ...otherProps } = props;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { ref, ...otherProps });
+};
+export {
+  Rect as default
+};