@octanejs/visx 0.1.0

package/src/network/DefaultLink.tsrx

@@ -0,0 +1,16 @@
+import type { LinkProvidedProps } from './types';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default function DefaultLink({ link }: LinkProvidedProps<any>) {
+  return link?.source && link.target ? (
+    <line
+      x1={link.source.x}
+      y1={link.source.y}
+      x2={link.target.x}
+      y2={link.target.y}
+      strokeWidth={2}
+      stroke="#999"
+      strokeOpacity={0.6}
+    />
+  ) : null;
+}

package/src/network/DefaultLink.tsrx.d.ts

@@ -0,0 +1,3 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { LinkProvidedProps } from './types';
+export default function DefaultLink({ link }: LinkProvidedProps<any>): import("react").JSX.Element | null;

package/src/network/DefaultNode.tsrx

@@ -0,0 +1,16 @@
+import type { SVGProps } from 'react';
+
+export type NodeProps = {
+	cx?: number;
+	cy?: number;
+	node?: unknown; // Allow node prop for internal usage when used as nodeComponent
+};
+
+export default function DefaultNode({
+	r = 15,
+	fill = '#21D4FD',
+	node, // Accept but don't use the node prop
+	...rest
+}: NodeProps & Omit<SVGProps<SVGCircleElement>, keyof NodeProps>) {
+	return <circle r={r} fill={fill} {...rest} />;
+}

package/src/network/DefaultNode.tsrx.d.ts

@@ -0,0 +1,9 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SVGProps } from 'react';
+export type NodeProps = {
+    cx?: number;
+    cy?: number;
+    node?: unknown;
+};
+export default function DefaultNode({ r, fill, node, // Accept but don't use the node prop
+...rest }: NodeProps & Omit<SVGProps<SVGCircleElement>, keyof NodeProps>): import("react").JSX.Element;

package/src/network/Graph.tsrx

@@ -0,0 +1,43 @@
+import type { ComponentClass, FunctionComponent } from 'react';
+import { Group } from '@octanejs/visx/group';
+import Links from './Links.tsrx';
+import Nodes from './Nodes.tsrx';
+import DefaultNode from './DefaultNode.tsrx';
+import DefaultLink from './DefaultLink.tsrx';
+import type {
+	Graph as GraphType,
+	DefaultNode as DefaultNodeType,
+	Link as LinkType,
+	LinkProvidedProps,
+	NodeProvidedProps,
+} from './types';
+
+export type GraphProps<Link, Node> = {
+	/** Graph to render nodes and links for. */
+	graph?: GraphType<Link, Node>;
+	/** Component for rendering a single Link. */
+	linkComponent?: | FunctionComponent<LinkProvidedProps<Link>>
+	| ComponentClass<LinkProvidedProps<Link>>;
+	/** Component for rendering a single Node. */
+	nodeComponent?: | FunctionComponent<NodeProvidedProps<Node>>
+	| ComponentClass<NodeProvidedProps<Node>>;
+	/** Top transform offset to apply to links and nodes. */
+	top?: number;
+	/** Left transform offset to apply to links and nodes. */
+	left?: number;
+};
+
+export default function Graph<Link = LinkType<DefaultNodeType>, Node = DefaultNodeType>({
+	graph,
+	linkComponent = DefaultLink,
+	nodeComponent = DefaultNode,
+	top,
+	left,
+}: GraphProps<Link, Node>) {
+	return graph
+		? <Group top={top} left={left}>
+				<Links links={graph.links} linkComponent={linkComponent} />
+				<Nodes nodes={graph.nodes} nodeComponent={nodeComponent} />
+			</Group>
+		: null;
+}

package/src/network/Graph.tsrx.d.ts

@@ -0,0 +1,16 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ComponentClass, FunctionComponent } from 'react';
+import type { Graph as GraphType, DefaultNode as DefaultNodeType, Link as LinkType, LinkProvidedProps, NodeProvidedProps } from './types';
+export type GraphProps<Link, Node> = {
+    /** Graph to render nodes and links for. */
+    graph?: GraphType<Link, Node>;
+    /** Component for rendering a single Link. */
+    linkComponent?: FunctionComponent<LinkProvidedProps<Link>> | ComponentClass<LinkProvidedProps<Link>>;
+    /** Component for rendering a single Node. */
+    nodeComponent?: FunctionComponent<NodeProvidedProps<Node>> | ComponentClass<NodeProvidedProps<Node>>;
+    /** Top transform offset to apply to links and nodes. */
+    top?: number;
+    /** Left transform offset to apply to links and nodes. */
+    left?: number;
+};
+export default function Graph<Link = LinkType<DefaultNodeType>, Node = DefaultNodeType>({ graph, linkComponent, nodeComponent, top, left, }: GraphProps<Link, Node>): import("react").JSX.Element | null;

package/src/network/Links.tsrx

@@ -0,0 +1,27 @@
+import { createElement } from 'octane';
+import type { FunctionComponent, ComponentClass } from 'react';
+import cx from 'classnames';
+import { Group } from '@octanejs/visx/group';
+import type { LinkProvidedProps } from './types';
+
+export type LinkProps<Link> = {
+	/** Array of links to render. */
+	links?: Link[];
+	/** Component for rendering a single link. */
+	linkComponent: | FunctionComponent<LinkProvidedProps<Link>>
+	| ComponentClass<LinkProvidedProps<Link>>;
+	/** Classname to add to each link parent g element. */
+	className?: string;
+};
+
+export default function Links<Link>({ links = [], linkComponent, className }: LinkProps<Link>) {
+	return <>
+		{links.map(
+			(link, i) =>
+				<Group
+					key={`network-link-${i}`}
+					className={cx('visx-network-link', className)}
+				>{createElement(linkComponent, { link })}</Group>,
+		)}
+	</>;
+}

package/src/network/Links.tsrx.d.ts

@@ -0,0 +1,12 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { FunctionComponent, ComponentClass } from 'react';
+import type { LinkProvidedProps } from './types';
+export type LinkProps<Link> = {
+    /** Array of links to render. */
+    links?: Link[];
+    /** Component for rendering a single link. */
+    linkComponent: FunctionComponent<LinkProvidedProps<Link>> | ComponentClass<LinkProvidedProps<Link>>;
+    /** Classname to add to each link parent g element. */
+    className?: string;
+};
+export default function Links<Link>({ links, linkComponent, className }: LinkProps<Link>): import("react").JSX.Element;

package/src/network/Nodes.tsrx

@@ -0,0 +1,41 @@
+import { createElement } from 'octane';
+import type { FunctionComponent, ComponentClass } from 'react';
+import cx from 'classnames';
+import { Group } from '@octanejs/visx/group';
+
+import DefaultNode from './DefaultNode.tsrx';
+import type { NodeProvidedProps } from './types';
+
+export type NodeProps<Node> = {
+	/** Array of links to render. */
+	nodes?: Node[];
+	/** Component for rendering a single link. */
+	nodeComponent: | FunctionComponent<NodeProvidedProps<Node>>
+	| ComponentClass<NodeProvidedProps<Node>>;
+	/** Classname to add to each node parent g element. */
+	className?: string;
+	/** Returns the center x coordinate of a node. */
+	x?: (d: Node) => number;
+	/** Returns the center y coordinate of a node. */
+	y?: (d: Node) => number;
+};
+
+export default function Nodes<Node>({
+	nodes = [],
+	nodeComponent = DefaultNode,
+	className,
+	x = (d: any) => d?.x || 0, // eslint-disable-line @typescript-eslint/no-explicit-any
+	y = (d: any) => d?.y || 0, // eslint-disable-line @typescript-eslint/no-explicit-any
+}: NodeProps<Node>) {
+	return <>
+		{nodes.map(
+			(node, i) =>
+				<Group
+					key={`network-node-${i}`}
+					className={cx('visx-network-node', className)}
+					left={x(node)}
+					top={y(node)}
+				>{createElement(nodeComponent, { node })}</Group>,
+		)}
+	</>;
+}

package/src/network/Nodes.tsrx.d.ts

@@ -0,0 +1,17 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { FunctionComponent, ComponentClass } from 'react';
+import type { NodeProvidedProps } from './types';
+export type NodeProps<Node> = {
+    /** Array of links to render. */
+    nodes?: Node[];
+    /** Component for rendering a single link. */
+    nodeComponent: FunctionComponent<NodeProvidedProps<Node>> | ComponentClass<NodeProvidedProps<Node>>;
+    /** Classname to add to each node parent g element. */
+    className?: string;
+    /** Returns the center x coordinate of a node. */
+    x?: (d: Node) => number;
+    /** Returns the center y coordinate of a node. */
+    y?: (d: Node) => number;
+};
+export default function Nodes<Node>({ nodes, nodeComponent, className, x, // eslint-disable-line @typescript-eslint/no-explicit-any
+y, }: NodeProps<Node>): import("react").JSX.Element;

package/src/network/index.ts

@@ -0,0 +1,11 @@
+// @octanejs/visx/network
+export { default as Graph } from './Graph.tsrx';
+export { default as Links } from './Links.tsrx';
+export { default as Nodes } from './Nodes.tsrx';
+export { default as DefaultLink } from './DefaultLink.tsrx';
+export { default as DefaultNode } from './DefaultNode.tsrx';
+
+export type * from './types';
+export type { GraphProps } from './Graph.tsrx';
+export type { LinkProps as LinksProps } from './Links.tsrx';
+export type { NodeProps as NodesProps } from './Nodes.tsrx';

package/src/network/types.ts

@@ -0,0 +1,22 @@
+export interface DefaultNode {
+	x: number;
+	y: number;
+}
+
+export interface Link<Node> {
+	source: Node;
+	target: Node;
+}
+
+export interface Graph<L, Node> {
+	links: L[];
+	nodes: Node[];
+}
+
+export interface LinkProvidedProps<L> {
+	link: L;
+}
+
+export interface NodeProvidedProps<Node> {
+	node: Node;
+}

package/src/pattern/constants/index.ts

@@ -0,0 +1,8 @@
+export const PatternOrientation = {
+	horizontal: 'horizontal',
+	vertical: 'vertical',
+	diagonal: 'diagonal',
+	diagonalRightToLeft: 'diagonalRightToLeft',
+} as const;
+
+export type PatternOrientationType = (typeof PatternOrientation)[keyof typeof PatternOrientation];

package/src/pattern/index.ts

@@ -0,0 +1,16 @@
+// @octanejs/visx/pattern
+export { default as Pattern } from './patterns/Pattern.tsrx';
+export { default as PatternLines } from './patterns/Lines.tsrx';
+export { default as PatternCircles } from './patterns/Circles.tsrx';
+export { default as PatternWaves } from './patterns/Waves.tsrx';
+export { default as PatternHexagons } from './patterns/Hexagons.tsrx';
+export { default as PatternPath } from './patterns/Path.tsrx';
+export { PatternOrientation } from './constants';
+
+export type { PatternOrientationType } from './constants';
+export type { PatternCirclesProps } from './patterns/Circles.tsrx';
+export type { PatternHexagonsProps } from './patterns/Hexagons.tsrx';
+export type { PatternLinesProps } from './patterns/Lines.tsrx';
+export type { PatternPathProps } from './patterns/Path.tsrx';
+export type { PatternProps } from './patterns/Pattern.tsrx';
+export type { PatternWavesProps } from './patterns/Waves.tsrx';

package/src/pattern/patterns/Circles.tsrx

@@ -0,0 +1,78 @@
+import cx from 'classnames';
+import Pattern from './Pattern.tsrx';
+
+export type PatternCirclesProps = {
+	/** Unique id for the pattern. */
+	id?: string;
+	/** Width of the pattern element. */
+	width: number;
+	/** Height of the pattern element. */
+	height: number;
+	/** Radius of the pattern circles. */
+	radius?: number;
+	/** Fill applied to circles. */
+	fill?: string;
+	/** className applied to circles. */
+	className?: string;
+	/** stroke applied to circles. */
+	stroke?: string;
+	/** strokeWidth applied to circles. */
+	strokeWidth?: number | string;
+	/** strokeDasharray applied to circles. */
+	strokeDasharray?: number | string;
+	/** Whether to fill in circles within the pattern gaps to increase pattern density. */
+	complement?: boolean;
+	/** Background color applied behind cirlces. */
+	background?: string;
+};
+
+export default function Circles({
+	id,
+	width,
+	height,
+	radius = 2,
+	fill,
+	stroke,
+	strokeWidth,
+	strokeDasharray,
+	background,
+	complement = false,
+	className,
+}: PatternCirclesProps) {
+	let corners: [number, number][] | undefined;
+	if (complement) {
+		corners = [
+			[0, 0],
+			[0, height],
+			[width, 0],
+			[width, height],
+		];
+	}
+	return <Pattern id={id} width={width} height={height}>
+		{!!background && <rect width={width} height={height} fill={background} />}
+		<circle
+			className={cx('visx-pattern-circle', className)}
+			cx={width / 2}
+			cy={height / 2}
+			r={radius}
+			fill={fill}
+			stroke={stroke}
+			strokeWidth={strokeWidth}
+			strokeDasharray={strokeDasharray}
+		/>
+		{corners?.map(
+			([cornerX, cornerY]) =>
+				<circle
+					key={`${id ?? 'pattern'}-complement-${cornerX}-${cornerY}`}
+					className={cx('visx-pattern-circle visx-pattern-circle-complement', className)}
+					cx={cornerX}
+					cy={cornerY}
+					r={radius}
+					fill={fill}
+					stroke={stroke}
+					strokeWidth={strokeWidth}
+					strokeDasharray={strokeDasharray}
+				/>,
+		)}
+	</Pattern>;
+}

package/src/pattern/patterns/Circles.tsrx.d.ts

@@ -0,0 +1,26 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+export type PatternCirclesProps = {
+    /** Unique id for the pattern. */
+    id?: string;
+    /** Width of the pattern element. */
+    width: number;
+    /** Height of the pattern element. */
+    height: number;
+    /** Radius of the pattern circles. */
+    radius?: number;
+    /** Fill applied to circles. */
+    fill?: string;
+    /** className applied to circles. */
+    className?: string;
+    /** stroke applied to circles. */
+    stroke?: string;
+    /** strokeWidth applied to circles. */
+    strokeWidth?: number | string;
+    /** strokeDasharray applied to circles. */
+    strokeDasharray?: number | string;
+    /** Whether to fill in circles within the pattern gaps to increase pattern density. */
+    complement?: boolean;
+    /** Background color applied behind cirlces. */
+    background?: string;
+};
+export default function Circles({ id, width, height, radius, fill, stroke, strokeWidth, strokeDasharray, background, complement, className, }: PatternCirclesProps): import("react").JSX.Element;

package/src/pattern/patterns/Hexagons.tsrx

@@ -0,0 +1,63 @@
+import cx from 'classnames';
+import Path from './Path.tsrx';
+
+export type PatternHexagonsProps = {
+	/** Unique id for the pattern. */
+	id?: string;
+	/** Height of the pattern element. */
+	height: number;
+	/** Size of the hexagon shape. */
+	size?: number;
+	/** Fill applied to hexagons. */
+	fill?: string;
+	/** className applied to hexagon path element. */
+	className?: string;
+	/** Background color applied behind hexagons. */
+	background?: string;
+	/** Stroke color applied to hexagon paths. */
+	stroke?: string;
+	/** strokeWidth applied to hexagon paths. */
+	strokeWidth?: number | string;
+	/** strokeDasharray applied to hexagon paths. */
+	strokeDasharray?: string | number;
+	/** strokeLinecap applied to hexagon paths. */
+	strokeLinecap?: 'square' | 'butt' | 'round' | 'inherit';
+	/** shapeRendering applied to hexagon paths. */
+	shapeRendering?: string | number;
+};
+
+export default function Hexagons({
+	id,
+	height,
+	fill,
+	stroke,
+	strokeWidth,
+	strokeDasharray,
+	strokeLinecap,
+	shapeRendering,
+	background,
+	className,
+	size = 3,
+}: PatternHexagonsProps) {
+	const sqrtSize = Math.sqrt(size);
+	return <Path
+		className={cx('visx-pattern-hexagon', className)}
+		path={`M ${height},0 l ${height},0 l ${height / 2},${(height * sqrtSize) / 2} l ${
+			-height / 2
+		},${(height * sqrtSize) / 2} l ${-height},0 l ${-height / 2},${
+			(-height * sqrtSize) / 2
+		} Z M 0,${(height * sqrtSize) / 2} l ${height / 2},0 M ${3 * height},${
+			(height * sqrtSize) / 2
+		} l ${-height / 2},0`}
+		id={id}
+		width={size}
+		height={sqrtSize}
+		fill={fill}
+		stroke={stroke}
+		strokeWidth={strokeWidth}
+		strokeDasharray={strokeDasharray}
+		strokeLinecap={strokeLinecap}
+		shapeRendering={shapeRendering}
+		background={background}
+	/>;
+}

package/src/pattern/patterns/Hexagons.tsrx.d.ts

@@ -0,0 +1,26 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+export type PatternHexagonsProps = {
+    /** Unique id for the pattern. */
+    id?: string;
+    /** Height of the pattern element. */
+    height: number;
+    /** Size of the hexagon shape. */
+    size?: number;
+    /** Fill applied to hexagons. */
+    fill?: string;
+    /** className applied to hexagon path element. */
+    className?: string;
+    /** Background color applied behind hexagons. */
+    background?: string;
+    /** Stroke color applied to hexagon paths. */
+    stroke?: string;
+    /** strokeWidth applied to hexagon paths. */
+    strokeWidth?: number | string;
+    /** strokeDasharray applied to hexagon paths. */
+    strokeDasharray?: string | number;
+    /** strokeLinecap applied to hexagon paths. */
+    strokeLinecap?: 'square' | 'butt' | 'round' | 'inherit';
+    /** shapeRendering applied to hexagon paths. */
+    shapeRendering?: string | number;
+};
+export default function Hexagons({ id, height, fill, stroke, strokeWidth, strokeDasharray, strokeLinecap, shapeRendering, background, className, size, }: PatternHexagonsProps): import("react").JSX.Element;

package/src/pattern/patterns/Lines.tsrx

@@ -0,0 +1,95 @@
+import cx from 'classnames';
+import Pattern from './Pattern.tsrx';
+import type { PatternOrientationType } from '../constants';
+import { PatternOrientation } from '../constants';
+
+export function pathForOrientation({
+	height,
+	orientation,
+}: {
+	height: number;
+	orientation: PatternOrientationType;
+}) {
+	switch (orientation) {
+		case PatternOrientation.horizontal:
+			return `M 0,${height / 2} l ${height},0`;
+		case PatternOrientation.diagonal:
+			return `M 0,${height} l ${height},${-height} M ${-height / 4},${height / 4} l ${height / 2},${
+				-height / 2
+			}
+             M ${(3 / 4) * height},${(5 / 4) * height} l ${height / 2},${-height / 2}`;
+		case PatternOrientation.diagonalRightToLeft:
+			return `M 0,0 l ${height},${height}
+        M ${-height / 4},${(3 / 4) * height} l ${
+				height / 2
+			},${height / 2}
+        M ${(3 / 4) * height},${-height / 4} l ${height / 2},${height / 2}`;
+		case PatternOrientation.vertical:
+		default:
+			return `M ${height / 2}, 0 l 0, ${height}`;
+	}
+}
+
+export type PatternLinesProps = {
+	/** Unique id for the pattern. */
+	id?: string;
+	/** Width of the pattern element. */
+	width: number;
+	/** Height of the pattern element. */
+	height: number;
+	/** className applied to line path element. */
+	className?: string;
+	/** Background color applied behind lines. */
+	background?: string;
+	/** Stroke color applied to path elements. */
+	stroke?: string;
+	/** strokeWidth applied to path elements. */
+	strokeWidth?: number | string;
+	/** strokeDasharray applied to path elements. */
+	strokeDasharray?: string | number;
+	/** strokeLinecap applied to path elements. */
+	strokeLinecap?: 'square' | 'butt' | 'round' | 'inherit';
+	/** shapeRendering applied to path elements. */
+	shapeRendering?: string | number;
+	/** Array of orientations to render (can mix multiple). */
+	orientation?: PatternOrientationType[];
+};
+
+export default function Lines({
+	id,
+	width,
+	height,
+	stroke,
+	strokeWidth,
+	strokeDasharray,
+	strokeLinecap = 'square',
+	shapeRendering = 'auto',
+	orientation = ['vertical'],
+	background,
+	className,
+}: PatternLinesProps) {
+	const orientations = Array.isArray(orientation) ? orientation : [orientation];
+
+	return <Pattern id={id} width={width} height={height}>
+		{!!background &&
+			<rect
+				className={cx('visx-pattern-line-background')}
+				width={width}
+				height={height}
+				fill={background}
+			/>}
+		{orientations.map(
+			(o, i) =>
+				<path
+					key={`visx-${id}-line-${o}-${i}`}
+					className={cx('visx-pattern-line', className)}
+					d={pathForOrientation({ orientation: o, height })}
+					stroke={stroke}
+					strokeWidth={strokeWidth}
+					strokeDasharray={strokeDasharray}
+					strokeLinecap={strokeLinecap}
+					shapeRendering={shapeRendering}
+				/>,
+		)}
+	</Pattern>;
+}

package/src/pattern/patterns/Lines.tsrx.d.ts

@@ -0,0 +1,31 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { PatternOrientationType } from '../constants';
+export declare function pathForOrientation({ height, orientation, }: {
+    height: number;
+    orientation: PatternOrientationType;
+}): string;
+export type PatternLinesProps = {
+    /** Unique id for the pattern. */
+    id?: string;
+    /** Width of the pattern element. */
+    width: number;
+    /** Height of the pattern element. */
+    height: number;
+    /** className applied to line path element. */
+    className?: string;
+    /** Background color applied behind lines. */
+    background?: string;
+    /** Stroke color applied to path elements. */
+    stroke?: string;
+    /** strokeWidth applied to path elements. */
+    strokeWidth?: number | string;
+    /** strokeDasharray applied to path elements. */
+    strokeDasharray?: string | number;
+    /** strokeLinecap applied to path elements. */
+    strokeLinecap?: 'square' | 'butt' | 'round' | 'inherit';
+    /** shapeRendering applied to path elements. */
+    shapeRendering?: string | number;
+    /** Array of orientations to render (can mix multiple). */
+    orientation?: PatternOrientationType[];
+};
+export default function Lines({ id, width, height, stroke, strokeWidth, strokeDasharray, strokeLinecap, shapeRendering, orientation, background, className, }: PatternLinesProps): import("react").JSX.Element;

package/src/pattern/patterns/Path.tsrx

@@ -0,0 +1,58 @@
+import cx from 'classnames';
+import Pattern from './Pattern.tsrx';
+
+export type PatternPathProps = {
+	/** Unique id for the pattern. */
+	id?: string;
+	/** Width of the pattern element. */
+	width: number;
+	/** Height of the pattern element. */
+	height: number;
+	/** d attribute of the path element */
+	path?: string;
+	/** fill color applied to path. */
+	fill?: string;
+	/** className applied to the path element. */
+	className?: string;
+	/** Background color applied behind path. */
+	background?: string;
+	/** Stroke color applied to path. */
+	stroke?: string;
+	/** strokeWidth applied to path. */
+	strokeWidth?: number | string;
+	/** strokeDasharray applied to path. */
+	strokeDasharray?: string | number;
+	/** strokeLinecap applied to path. */
+	strokeLinecap?: 'square' | 'butt' | 'round' | 'inherit';
+	/** shapeRendering applied to path. */
+	shapeRendering?: string | number;
+};
+
+export default function Path({
+	id,
+	width,
+	height,
+	path,
+	fill = 'transparent',
+	stroke,
+	strokeWidth,
+	strokeDasharray,
+	strokeLinecap = 'square',
+	shapeRendering = 'auto',
+	background,
+	className,
+}: PatternPathProps) {
+	return <Pattern id={id} width={width} height={height}>
+		{!!background && <rect width={width} height={height} fill={background} />}
+		<path
+			className={cx('visx-pattern-path', className)}
+			d={path}
+			fill={fill}
+			stroke={stroke}
+			strokeWidth={strokeWidth}
+			strokeDasharray={strokeDasharray}
+			strokeLinecap={strokeLinecap}
+			shapeRendering={shapeRendering}
+		/>
+	</Pattern>;
+}