seat-editor 3.3.13 → 3.3.15

package/dist/app/only-view/page.jsx

@@ -0,0 +1,248 @@
+"use client";
+import LayerView from "../../features/view-only-3";
+import { useState, useRef } from "react";
+import { data4, test1 } from "../constant";
+import { ChairIcon } from "./chair";
+import { UserIcon } from "./user";
+import { Modal } from "antd";
+import JsonView from "@uiw/react-json-view";
+export const dummyImage = [
+    {
+        id: "1747388267450",
+        x: 368,
+        y: 77.54706573486328,
+        width: 751.9405198530717,
+        height: 812,
+        rotation: 0,
+        shape: "background",
+        src: "https://cdn.table.link/prod/5bf923de-2366-4a11-9b8b-e92de0afbf05/3a65cb36-7d85-4c38-9403-a15f94641920/68d45207-d66b-4bb5-92a2-4e5a87715e98/rsvp/1753965985769725756_BOI Reg.png",
+        fill: "#bca16a",
+        opacity: 1,
+        labels: [
+            {
+                label: "T22",
+                fontColor: "#0d0c0c",
+                x: 0,
+                fontSize: 16,
+                y: 8,
+            },
+        ],
+    },
+    // {
+    //   x: 100,
+    //   y: 520,
+    //   labels: [
+    //     {
+    //       x: 0,
+    //       y: 27,
+    //       label: "New Table 5",
+    //       fontSize: 12,
+    //       fontColor: "#0d0c0c",
+    //     },
+    //   ],
+    //   id: "1761194669729132000",
+    //   stroke: "#347ADB", //warna border
+    //   fill: "#E1F4FF", //warna latar belakang
+    //   strokeWidth: 1,
+    //   text: "",
+    //   shape: "background",
+    //   width: 100,
+    //   height: 100,
+    //   gapTags: 10, //gap antara tags secara vertical,
+    //   tags: [
+    //     {
+    //       key: "table", //key untuk penamaan tag
+    //       items: [
+    //         {
+    //           type: "text", //tipe text atau icon
+    //           value: "V1", //value untuk text atau icon
+    //           fontSize: 14,
+    //           fontWeight: 600,
+    //           fill: "#3F4254",
+    //         },
+    //       ],
+    //       direction: "flex", // flex untuk horizontal dan column untuk vertikal
+    //       gap: 2, //gap antara item
+    //       offsetX: 0, //offset x antara item
+    //       offsetY: 0, //offset y antara item
+    //     },
+    //     {
+    //       key: "rsvp_time",
+    //       items: [
+    //         {
+    //           value: "11:00",
+    //           type: "text",
+    //           fill: "#5E6278",
+    //           fontSize: 11,
+    //           fontWeight: 700,
+    //           textDecoration: "underline",
+    //         },
+    //         {
+    //           value: "20:00",
+    //           type: "text",
+    //           fill: "#5E6278",
+    //           fontSize: 11,
+    //           fontWeight: 400,
+    //         },
+    //       ],
+    //       direction: "column",
+    //       gap: 2,
+    //     },
+    //     {
+    //       key: "rsvp_time",
+    //       items: [
+    //         {
+    //           value: "01:00",
+    //           type: "text",
+    //           fill: "#5E6278",
+    //           fontSize: 11,
+    //           fontWeight: 400,
+    //           symbol: {
+    //             value: "+1",
+    //             gap: 8,
+    //             fontSize: 9,
+    //             position: "right-top", // right | right-top | right-bottom | left | left-top | left-bottom | top | bottom
+    //           },
+    //         },
+    //       ],
+    //       direction: "flex",
+    //       gap: 10,
+    //       offsetX: -3,
+    //       offsetY: -8,
+    //     },
+    //   ],
+    //   opacity: 1,
+    //   rotation: 90,
+    //   seatCount: 10,
+    //   openSpace: 0.3,
+    //   seatFill: "#ed8989",
+    //   seatPositions: {
+    //     top: 3,
+    //     bottom: 3,
+    //     left: 3,
+    //     right: 3,
+    //   },
+    // },
+];
+const Card = (item) => {
+    const handleDragStart = (e) => {
+        // Jangan preventDefault di drag start
+        e.dataTransfer.setData("application/json", JSON.stringify(item));
+        e.dataTransfer.effectAllowed = "move";
+    };
+    return (<div className="h-40 bg-gray-400 shadow-lg rounded-lg p-4 m-4" data-table={JSON.stringify(item)} draggable onContextMenu={(e) => e.preventDefault()} onDragStart={handleDragStart} // ✅ ini yang benar
+     onClick={(e) => e.stopPropagation()} onPointerDown={(e) => e.stopPropagation()}>
+      <h2 className="text-lg font-semibold mb-2">Card Title</h2>
+      <p className="text-gray-600">{item === null || item === void 0 ? void 0 : item.name}</p>
+    </div>);
+};
+const TouchScrollDetect = () => {
+    const refLayer = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [table, setTable] = useState(null);
+    const handleZoomIn = () => {
+        var _a, _b;
+        (_b = (_a = refLayer === null || refLayer === void 0 ? void 0 : refLayer.current) === null || _a === void 0 ? void 0 : _a.transformRef) === null || _b === void 0 ? void 0 : _b.zoomIn(0.1);
+    };
+    const handleZoomOut = () => {
+        var _a, _b;
+        (_b = (_a = refLayer === null || refLayer === void 0 ? void 0 : refLayer.current) === null || _a === void 0 ? void 0 : _a.transformRef) === null || _b === void 0 ? void 0 : _b.zoomOut();
+    };
+    const handleSwitch = (e, data) => {
+        console.log("hswith");
+        setOpen(!open);
+        setTable(data);
+    };
+    const handleDrop = (e, data) => {
+        var _a;
+        console.log("data drop", data);
+        const targetData = (_a = data === null || data === void 0 ? void 0 : data.targetTable) === null || _a === void 0 ? void 0 : _a.test;
+        e.preventDefault();
+        setOpen(!open);
+        setTable(data);
+    };
+    const handleSelectTable = (item) => {
+        setOpen(!open);
+        setTable(item);
+    };
+    const renderModal = () => {
+        return (<Modal open={open} onCancel={() => setOpen(false)} width={700} title="Preview Board" centered footer={null}>
+        <div className="flex flex-col p-4 h-[500px] overflow-auto">
+          <JsonView value={table}/>
+        </div>
+      </Modal>);
+    };
+    return (<div className="w-full h-screen border-2 border-black overflow-auto" id="scroll-container">
+      {renderModal()}
+      <div className="flex">
+        <div className="h-screen bg-gray-500 w-1/3">
+          <div className="p-4">
+            {data4.map((item, index) => (<Card key={index} {...item}/>))}
+          </div>
+        </div>
+        <div className="h-screen w-2/3 relative">
+          <div className="absolute top-1 right-1  flex gap-4 z-[10]">
+            <button className="p-4 bg-gray-400" onClick={() => handleZoomIn()}>
+              +
+            </button>
+            <button className="p-4 bg-gray-400" onClick={() => handleZoomOut()}>
+              -
+            </button>
+          </div>
+          <LayerView refs={refLayer} statusKey="is_hold" privilegedTags={[
+            {
+                key: "table",
+                items: ["text", "icon"],
+            },
+            {
+                key: "rsvp_time",
+                items: ["text", "icon"],
+            },
+        ]} defaultBackground="#000000" mappingKey="properties" componentProps={test1} onDrop={(e, data) => handleDrop(e, data)} onSwitch={(e, data) => handleSwitch(e, data)} extraComponentProps={[]} onSelectComponent={(component) => {
+            handleSelectTable(component);
+        }} 
+    // dragTableBlockKey={[
+    //   {
+    //     key: "is_lock",
+    //     value: 1,
+    //   },
+    // ]}
+    tableMatchKey={[
+            {
+                key: 0,
+                properties: { fill: "white" },
+                className: "blink-2",
+            },
+        ]} eventMatchTable={[
+            {
+                event: "mouseenter",
+                properties: {
+                    strokeWidth: 5,
+                    filter: "drop-shadow(0px 0px 5px red)",
+                },
+            },
+            {
+                event: "dragenter",
+                properties: { strokeWidth: 5 },
+            },
+            {
+                event: "selected",
+                properties: { strokeWidth: 5 },
+            },
+        ]} iconTags={[
+            {
+                icon: <ChairIcon />,
+                key: "chair",
+            },
+            {
+                icon: <UserIcon />,
+                key: "user",
+            },
+        ]} viewStyles={{
+            paddingTop: 200,
+        }} disabled={false} transformProps={{}}/>
+        </div>
+      </div>
+    </div>);
+};
+export default TouchScrollDetect;

package/dist/app/only-view/user.d.ts

@@ -0,0 +1 @@
+export function UserIcon(): import("react").JSX.Element;

package/dist/app/only-view/user.js

@@ -0,0 +1,12 @@
+export const UserIcon = () => {
+    return (<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M7.61992 10.1625C9.00754 10.1625 10.1324 9.03757 10.1324 7.64995C10.1324 6.26234 9.00754 5.13745 7.61992 5.13745C6.23231 5.13745 5.10742 6.26234 5.10742 7.64995C5.10742 9.03757 6.23231 10.1625 7.61992 10.1625Z" fill="#5E6278"/>
+      <path d="M7.62 14.9999C9.34313 14.9999 10.74 14.1168 10.74 13.0274C10.74 11.9381 9.34313 11.0549 7.62 11.0549C5.89687 11.0549 4.5 11.9381 4.5 13.0274C4.5 14.1168 5.89687 14.9999 7.62 14.9999Z" fill="#5E6278"/>
+      <path opacity="0.3" d="M11.595 4.23C12.7631 4.23 13.71 3.28308 13.71 2.115C13.71 0.946918 12.7631 0 11.595 0C10.4269 0 9.47998 0.946918 9.47998 2.115C9.47998 3.28308 10.4269 4.23 11.595 4.23Z" fill="#5E6278"/>
+      <path opacity="0.3" d="M3.62257 4.23C4.79065 4.23 5.73757 3.28308 5.73757 2.115C5.73757 0.946918 4.79065 0 3.62257 0C2.45449 0 1.50757 0.946918 1.50757 2.115C1.50757 3.28308 2.45449 4.23 3.62257 4.23Z" fill="#5E6278"/>
+      <g opacity="0.3">
+        <path d="M11.4749 5.87256C11.2349 5.87256 11.0024 5.87256 10.7699 5.91006C11.1229 6.52313 11.2825 7.22856 11.2276 7.93388C11.1727 8.63919 10.906 9.31147 10.4624 9.86256C10.7984 9.92909 11.1399 9.96424 11.4824 9.96756C13.3874 9.96756 14.9249 9.04506 14.9249 7.92006C14.9249 6.79506 13.3799 5.87256 11.4749 5.87256Z" fill="#5E6278"/>
+        <path d="M3.4499 6C3.6899 6 3.9224 6 4.1549 6.0375C3.80187 6.65057 3.64233 7.356 3.6972 8.06132C3.75208 8.76664 4.0188 9.43891 4.4624 9.99C4.12639 10.0565 3.78492 10.0917 3.4424 10.095C1.5374 10.095 -9.77516e-05 9.1725 -9.77516e-05 8.0475C-9.77516e-05 6.9225 1.5449 6 3.4499 6Z" fill="#5E6278"/>
+      </g>
+    </svg>);
+};

package/dist/app/page.d.ts

@@ -0,0 +1,2 @@
+declare const TableEditor: () => import("react").JSX.Element;
+export default TableEditor;

package/dist/app/page.jsx

@@ -0,0 +1,13 @@
+import Board from "../features/board-v3";
+import SideTool from "../features/side-tool";
+import ControlPanels from "../features/panel";
+const TableEditor = () => {
+    return (<>
+      <div className="w-full h-screen flex relative">
+        <SideTool />
+        <Board />
+        <ControlPanels />
+      </div>
+    </>);
+};
+export default TableEditor;

package/dist/app/test/page.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export default function DraggableRect(): React.JSX.Element;

package/dist/app/test/page.jsx

@@ -0,0 +1,45 @@
+"use client";
+import React, { useRef, useState } from "react";
+export default function DraggableRect() {
+    const rectRef = useRef(null);
+    const [pos, setPos] = useState({ x: 100, y: 100 });
+    const [dragging, setDragging] = useState(false);
+    const [offset, setOffset] = useState({ x: 0, y: 0 });
+    const getCoords = (e) => {
+        if ("touches" in e) {
+            return {
+                x: e.touches[0].clientX,
+                y: e.touches[0].clientY,
+            };
+        }
+        return {
+            x: e.clientX,
+            y: e.clientY,
+        };
+    };
+    const handleStart = (e) => {
+        e.preventDefault();
+        const coords = getCoords(e);
+        setOffset({
+            x: coords.x - pos.x,
+            y: coords.y - pos.y,
+        });
+        setDragging(true);
+    };
+    const handleMove = (e) => {
+        if (!dragging)
+            return;
+        const coords = getCoords(e);
+        setPos({
+            x: coords.x - offset.x,
+            y: coords.y - offset.y,
+        });
+    };
+    const handleEnd = () => {
+        setDragging(false);
+    };
+    return (<svg width="100%" height="500" viewBox="0 0 800 600" style={{ border: "1px solid black", touchAction: "none" }} // important!
+     onMouseMove={handleMove} onMouseUp={handleEnd} onTouchMove={handleMove} onTouchEnd={handleEnd}>
+      <rect ref={rectRef} x={pos.x} y={pos.y} width="150" height="100" fill="tomato" onMouseDown={handleStart} onTouchStart={handleStart} style={{ cursor: "grab" }}/>
+    </svg>);
+}

package/dist/app/v2/page.d.ts

@@ -0,0 +1,2 @@
+declare const TableEditor: () => import("react").JSX.Element;
+export default TableEditor;

package/dist/app/v2/page.jsx

@@ -0,0 +1,13 @@
+import Board from "../../features/board-v2";
+import SideTool from "../../features/side-tool";
+import ControlPanels from "../../features/panel";
+const TableEditor = () => {
+    return (<>
+      <div className="w-full h-screen flex relative">
+        <SideTool />
+        <Board />
+        <ControlPanels />
+      </div>
+    </>);
+};
+export default TableEditor;

package/dist/components/button-tools/index.d.ts

@@ -0,0 +1,11 @@
+import { ButtonProps, PopoverProps } from "antd";
+interface ButtonToolsProps {
+    buttonProps: ButtonProps;
+    items: Array<{
+        label: string;
+        onClick: () => void;
+    }>;
+    popoverProps?: PopoverProps;
+}
+declare const ButtonTools: (props: ButtonToolsProps) => import("react").JSX.Element;
+export default ButtonTools;

package/dist/components/button-tools/index.jsx

@@ -0,0 +1,17 @@
+"use client";
+import { Button, Popover } from "antd";
+const ButtonTools = (props) => {
+    const { buttonProps, items, popoverProps } = props;
+    if (items.length === 0) {
+        return (<Popover trigger="hover" {...popoverProps}>
+        <Button {...buttonProps}/>
+      </Popover>);
+    }
+    return (<Popover content={<div>
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+        </div>} trigger="click">
+      <Button {...buttonProps}/>
+    </Popover>);
+};
+export default ButtonTools;

package/dist/components/form-tools/label.d.ts

@@ -0,0 +1,2 @@
+declare const SectionLabel: () => import("react").JSX.Element;
+export default SectionLabel;

package/dist/components/form-tools/label.jsx

@@ -0,0 +1,63 @@
+"use client";
+import { Button, ColorPicker, Flex, Form, Input, InputNumber } from "antd";
+const SectionLabel = () => {
+    return (<div className="py-2">
+      <h1 className="heading-s">Section Labeling</h1>
+      <Form.Item label="Labels in square" name={"labels"}>
+        <Form.List name="labels">
+          {(fields, { add, remove }) => (<>
+              {fields.map((field) => (<div key={field.key}>
+                  <Flex gap={2}>
+                    <Form.Item name={[field.name, "label"]} label="Text">
+                      <Input />
+                    </Form.Item>
+                    <Form.Item name={[field.name, "fontColor"]} label="Color" getValueFromEvent={(color) => color.toHexString()}>
+                      <ColorPicker allowClear format="hex" defaultFormat="hex"/>
+                    </Form.Item>
+                  </Flex>
+                  <Flex gap={2}>
+                    <Form.Item name={[field.name, "x"]} label="X">
+                      <InputNumber />
+                    </Form.Item>
+                    <Form.Item name={[field.name, "y"]} label="Y">
+                      <InputNumber />
+                    </Form.Item>
+                  </Flex>
+                  <Flex gap={2}>
+                    <Form.Item name={[field.name, "fontSize"]} label="Size">
+                      <InputNumber suffix="px"/>
+                    </Form.Item>
+                    <Form.Item name={[field.name, "rotation"]} label="Rotation">
+                      <InputNumber suffix="°" min={0} max={360} parser={(value) => {
+                    if (!value)
+                        return 0;
+                    const num = Number(value.replace(/\D/g, ""));
+                    if (Number.isNaN(num))
+                        return 0;
+                    return Math.min(360, Math.max(0, num));
+                }}/>
+                    </Form.Item>
+                  </Flex>
+                </div>))}
+              <Flex gap={2}>
+                <Button type="primary" onClick={() => add({
+                label: "",
+                fontColor: "#000000",
+                x: 0,
+                y: 0,
+                fontSize: 12,
+                rotation: 0
+            })} className="btn btn-primary">
+                  Add
+                </Button>
+                <Button type="primary" onClick={() => remove(fields.length - 1)} className="btn btn-primary">
+                  Remove
+                </Button>
+              </Flex>
+            </>)}
+        </Form.List>
+      </Form.Item>
+      <div className="divider-dashed"/>
+    </div>);
+};
+export default SectionLabel;

package/dist/components/form-tools/shape.d.ts

@@ -0,0 +1,8 @@
+export declare const optionsShape: {
+    value: string;
+    label: string;
+}[];
+declare const SectionShape: ({ allowChangeShape, }: {
+    allowChangeShape?: boolean;
+}) => import("react").JSX.Element;
+export default SectionShape;

package/dist/components/form-tools/shape.jsx

@@ -0,0 +1,113 @@
+"use client";
+import { ColorPicker, Flex, Form, InputNumber, Select } from "antd";
+export const optionsShape = [
+    {
+        value: "circle",
+        label: "Circle",
+    },
+    {
+        value: "square",
+        label: "Square",
+    },
+    {
+        value: "table-seat-circle",
+        label: "Type 1",
+    },
+    {
+        value: "table-seat-square",
+        label: "Type 2",
+    },
+    {
+        value: "table-seat-half-square",
+        label: "Type 3",
+    },
+    {
+        value: "table-seat-rect-square",
+        label: "Type 4",
+    },
+    {
+        value: "table-seat-rect-circle",
+        label: "Type 5",
+    },
+    {
+        label: "Image Table",
+        value: "image-table",
+    },
+];
+const SectionShape = ({ allowChangeShape = true, }) => {
+    const shape = Form.useWatch("shape");
+    return (<div className="py-2">
+      <h1 className="heading-s">Shape</h1>
+      {allowChangeShape && (<Flex gap={2} className="w-full">
+          <Form.Item label="Name" name="shape" className="w-full">
+            <Select options={optionsShape} className="w-full"/>
+          </Form.Item>
+        </Flex>)}
+      <Flex gap={2} className="w-full">
+        <Form.Item label="Width" name="width" className="w-full">
+          <InputNumber suffix="px" controls parser={(value) => {
+            var _a;
+            const onlyNumber = (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, "")) !== null && _a !== void 0 ? _a : "";
+            return onlyNumber === "" ? 1 : Math.max(1, Number(onlyNumber));
+        }}/>
+        </Form.Item>
+        <Form.Item label="Height" name="height" className="w-full">
+          <InputNumber suffix="px" parser={(value) => {
+            var _a;
+            const onlyNumber = (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, "")) !== null && _a !== void 0 ? _a : "";
+            return onlyNumber === "" ? 1 : Math.max(1, Number(onlyNumber));
+        }}/>
+        </Form.Item>
+      </Flex>
+      <Flex gap={2}>
+        <Form.Item label="Position X" name="x" className="w-full">
+          <InputNumber />
+        </Form.Item>
+        <Form.Item label="Position Y" name="y" className="w-full">
+          <InputNumber />
+        </Form.Item>
+        <Form.Item label="Rotation" name="rotation" className="w-full">
+          <InputNumber suffix="°" min={0} max={360} parser={(value) => {
+            if (!value)
+                return 0;
+            const num = Number(value.replace(/\D/g, ""));
+            if (Number.isNaN(num))
+                return 0;
+            return Math.min(360, Math.max(0, num));
+        }}/>
+        </Form.Item>
+      </Flex>
+      <Flex gap={2}>
+        <Form.Item label="Fill" name={"fill"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
+          <ColorPicker allowClear format="hex" defaultFormat="hex"/>
+        </Form.Item>
+        <Form.Item label="Stroke" name={"stroke"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
+          <ColorPicker allowClear format="hex" defaultFormat="hex"/>
+        </Form.Item>
+      </Flex>
+      <Flex>
+        <Form.Item label="Stroke" name={"strokeWidth"} className="w-full">
+          <InputNumber />
+        </Form.Item>
+        {!(shape === null || shape === void 0 ? void 0 : shape.includes("circle")) && (<Form.Item label="Radius" name="radius" className="w-full">
+            <InputNumber suffix="px" parser={(value) => {
+                var _a;
+                const onlyNumber = (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, "")) !== null && _a !== void 0 ? _a : "";
+                return onlyNumber === "" ? 1 : Math.max(1, Number(onlyNumber));
+            }}/>
+          </Form.Item>)}
+        <Form.Item label="opacity" name={"opacity"} className="w-full">
+          <InputNumber step={0.1} max={1} min={0} parser={(value) => {
+            if (value === undefined || value === null || value === "")
+                return null;
+            const cleaned = value.replace(/[^0-9.]/g, "");
+            const num = Number(cleaned);
+            if (Number.isNaN(num))
+                return null;
+            return Math.min(1, Math.max(0, num));
+        }}/>
+        </Form.Item>
+      </Flex>
+    </div>);
+};
+export default SectionShape;

package/dist/components/input/number-indicator.d.ts

@@ -0,0 +1,7 @@
+interface NumberIndicatorProps {
+    name: string;
+    defaultValue?: number;
+    onChange: (value: number) => void;
+}
+declare const NumberIndicator: ({ name, defaultValue, onChange }: NumberIndicatorProps) => import("react").JSX.Element;
+export default NumberIndicator;

package/dist/components/input/number-indicator.jsx

@@ -0,0 +1,36 @@
+"use client";
+import { useState, useEffect } from "react";
+import { Input, Button, Flex, Form } from "antd";
+import { ArrowRight, ArrowLeft } from "lucide-react";
+const NumberIndicator = ({ name, defaultValue, onChange }) => {
+    const [value, setValue] = useState(0);
+    const form = Form.useFormInstance();
+    useEffect(() => {
+        if (defaultValue) {
+            setValue(defaultValue);
+            form.setFieldsValue({ [name]: defaultValue });
+        }
+    }, [defaultValue]);
+    const handlePrev = () => {
+        setValue(value - 1);
+        form.setFieldsValue({ [name]: value - 1 });
+        onChange(value - 1);
+    };
+    const handleNext = () => {
+        setValue(value + 1);
+        form.setFieldsValue({ [name]: value + 1 });
+        onChange(value + 1);
+    };
+    return (<Flex gap={2}>
+      <Button onClick={handlePrev}>
+        <ArrowLeft />
+      </Button>
+      <Form.Item name={name} noStyle>
+      <Input className="flex text-center" type="number" value={value} name={name} onChange={(e) => setValue(parseInt(e.target.value))}/>
+      </Form.Item>
+      <Button onClick={handleNext}>
+        <ArrowRight />
+      </Button>
+    </Flex>);
+};
+export default NumberIndicator;

package/dist/components/joystick/index.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+type JoystickPosition = {
+    x: number;
+    y: number;
+};
+type JoystickProps = {
+    size?: number;
+    onMove?: (pos: JoystickPosition) => void;
+    onEnd?: () => void;
+};
+export declare const Joystick: ({ size, onMove, onEnd, }: JoystickProps) => React.JSX.Element;
+export {};