@uipath/apollo-react 6.9.0 → 6.11.0

package/dist/canvas/components/AlignmentGuides/useAlignmentGuides.js

@@ -0,0 +1,204 @@
+import { useViewport } from "../../xyflow/react.js";
+import { useCallback, useMemo, useState } from "react";
+import { DEFAULT_NODE_SIZE } from "../../constants.js";
+import { getAbsolutePosition } from "../../utils/NodeUtils.js";
+function toBounds(node, allNodes = [
+    node
+]) {
+    const width = node.measured?.width ?? node.width ?? DEFAULT_NODE_SIZE;
+    const height = node.measured?.height ?? node.height ?? DEFAULT_NODE_SIZE;
+    const absolutePosition = node.internals?.positionAbsolute ?? (node.parentId ? getAbsolutePosition(node, allNodes) : node.position);
+    const x1 = absolutePosition.x;
+    const y1 = absolutePosition.y;
+    const x2 = x1 + width;
+    const y2 = y1 + height;
+    return {
+        id: node.id,
+        x1,
+        y1,
+        x2,
+        y2,
+        cx: (x1 + x2) / 2,
+        cy: (y1 + y2) / 2
+    };
+}
+function getAxisAnchors(bounds, orientation) {
+    return 'vertical' === orientation ? [
+        bounds.x1,
+        bounds.cx,
+        bounds.x2
+    ] : [
+        bounds.y1,
+        bounds.cy,
+        bounds.y2
+    ];
+}
+function resolveAxisCandidate(dragged, others, threshold, orientation) {
+    const draggedAnchors = getAxisAnchors(dragged, orientation);
+    const candidates = [];
+    for (const other of others){
+        const otherAnchors = getAxisAnchors(other, orientation);
+        candidates.push({
+            delta: otherAnchors[1] - draggedAnchors[1],
+            kind: 'center',
+            matchedNodeId: other.id,
+            position: otherAnchors[1],
+            priority: 0
+        });
+        for (const draggedIndex of [
+            0,
+            2
+        ])for (const otherIndex of [
+            0,
+            2
+        ])candidates.push({
+            delta: otherAnchors[otherIndex] - draggedAnchors[draggedIndex],
+            kind: 'edge',
+            matchedNodeId: other.id,
+            position: otherAnchors[otherIndex],
+            priority: draggedIndex === otherIndex ? 1 : 2
+        });
+    }
+    return candidates.filter(({ delta })=>Math.abs(delta) <= threshold).sort((a, b)=>Math.abs(a.delta) - Math.abs(b.delta) || a.priority - b.priority || a.position - b.position || a.matchedNodeId.localeCompare(b.matchedNodeId))[0];
+}
+function buildGuide(candidate, dragged, others, orientation) {
+    const matchingOthers = others.filter((other)=>{
+        const anchors = getAxisAnchors(other, orientation);
+        const candidateAnchors = 'center' === candidate.kind ? [
+            anchors[1]
+        ] : [
+            anchors[0],
+            anchors[2]
+        ];
+        return candidateAnchors.some((anchor)=>Math.abs(anchor - candidate.position) < 0.5);
+    });
+    const ranges = [
+        dragged,
+        ...matchingOthers
+    ].map((bounds)=>'vertical' === orientation ? [
+            bounds.y1,
+            bounds.y2
+        ] : [
+            bounds.x1,
+            bounds.x2
+        ]);
+    return {
+        id: `${orientation}-${candidate.position}`,
+        orientation,
+        position: candidate.position,
+        start: Math.min(...ranges.map(([rangeStart])=>rangeStart)),
+        end: Math.max(...ranges.map(([, rangeEnd])=>rangeEnd)),
+        kind: candidate.kind,
+        matchedNodeIds: matchingOthers.map(({ id })=>id)
+    };
+}
+function computeAlignmentResult(dragged, others, threshold) {
+    const vertical = resolveAxisCandidate(dragged, others, threshold, 'vertical');
+    const horizontal = resolveAxisCandidate(dragged, others, threshold, 'horizontal');
+    const delta = {
+        dx: vertical?.delta ?? 0,
+        dy: horizontal?.delta ?? 0
+    };
+    const snapped = {
+        ...dragged,
+        x1: dragged.x1 + delta.dx,
+        x2: dragged.x2 + delta.dx,
+        cx: dragged.cx + delta.dx,
+        y1: dragged.y1 + delta.dy,
+        y2: dragged.y2 + delta.dy,
+        cy: dragged.cy + delta.dy
+    };
+    const guides = [
+        ...vertical ? [
+            buildGuide(vertical, snapped, others, 'vertical')
+        ] : [],
+        ...horizontal ? [
+            buildGuide(horizontal, snapped, others, 'horizontal')
+        ] : []
+    ];
+    return {
+        guides,
+        delta
+    };
+}
+function computeAlignmentGuides(dragged, others, threshold) {
+    return computeAlignmentResult(dragged, others, threshold).guides;
+}
+function computeAlignmentSnapDelta(dragged, others, threshold) {
+    return computeAlignmentResult(dragged, others, threshold).delta;
+}
+function toGroupBounds(nodes, allNodes = nodes) {
+    const bounds = nodes.map((node)=>toBounds(node, allNodes));
+    const x1 = Math.min(...bounds.map((item)=>item.x1));
+    const y1 = Math.min(...bounds.map((item)=>item.y1));
+    const x2 = Math.max(...bounds.map((item)=>item.x2));
+    const y2 = Math.max(...bounds.map((item)=>item.y2));
+    return {
+        id: bounds.map(({ id })=>id).join(','),
+        x1,
+        y1,
+        x2,
+        y2,
+        cx: (x1 + x2) / 2,
+        cy: (y1 + y2) / 2
+    };
+}
+function createAlignmentPositionUpdates(nodes, delta) {
+    return nodes.map(({ id, position })=>({
+            id,
+            position: {
+                x: position.x + delta.dx,
+                y: position.y + delta.dy
+            }
+        }));
+}
+function useAlignmentGuides(nodes, options = {}) {
+    const { thresholdPx = 8, onSnap } = options;
+    const { zoom } = useViewport();
+    const [guides, setGuides] = useState([]);
+    const [draggedBounds, setDraggedBounds] = useState(null);
+    const resolveDrag = useCallback((draggedNode, draggedNodes, showGuides)=>{
+        const activeNodes = draggedNodes.length > 0 ? draggedNodes : [
+            draggedNode
+        ];
+        const activeIds = new Set(activeNodes.map(({ id })=>id));
+        const others = nodes.filter(({ id })=>!activeIds.has(id)).map((node)=>toBounds(node, nodes));
+        const activeBounds = toGroupBounds(activeNodes, nodes);
+        const result = computeAlignmentResult(activeBounds, others, thresholdPx / zoom);
+        setDraggedBounds(showGuides ? {
+            ...activeBounds,
+            x1: activeBounds.x1 + result.delta.dx,
+            x2: activeBounds.x2 + result.delta.dx,
+            cx: activeBounds.cx + result.delta.dx,
+            y1: activeBounds.y1 + result.delta.dy,
+            y2: activeBounds.y2 + result.delta.dy,
+            cy: activeBounds.cy + result.delta.dy
+        } : null);
+        setGuides(showGuides ? result.guides : []);
+        if (!onSnap || 0 === result.delta.dx && 0 === result.delta.dy) return;
+        onSnap(createAlignmentPositionUpdates(activeNodes, result.delta));
+    }, [
+        nodes,
+        onSnap,
+        thresholdPx,
+        zoom
+    ]);
+    const onNodeDrag = useCallback((_event, draggedNode, draggedNodes)=>resolveDrag(draggedNode, draggedNodes, true), [
+        resolveDrag
+    ]);
+    const onNodeDragStop = useCallback((_event, draggedNode, draggedNodes)=>resolveDrag(draggedNode, draggedNodes, false), [
+        resolveDrag
+    ]);
+    return useMemo(()=>({
+            guides,
+            draggedBounds,
+            onNodeDrag,
+            onNodeDragStop
+        }), [
+        guides,
+        draggedBounds,
+        onNodeDrag,
+        onNodeDragStop
+    ]);
+}
+export { computeAlignmentGuides, computeAlignmentResult, computeAlignmentSnapDelta, createAlignmentPositionUpdates, toBounds, toGroupBounds, useAlignmentGuides };

package/dist/canvas/components/NodePropertyPanel/ExpressionField.cjs

@@ -32,13 +32,13 @@ function ExpressionField({ label, value, mode = 'expr', description, onModeChang
     const expression = value ?? '';
     const activeMode = mode;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-        className: "flex flex-col gap-2",
+        className: "flex flex-col gap-1.5",
         children: [
             label && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                 className: "flex items-center justify-between",
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                        className: "text-xs font-medium text-foreground-muted",
+                        className: "text-xs font-medium leading-4 text-foreground",
                         children: label
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {

package/dist/canvas/components/NodePropertyPanel/ExpressionField.js

@@ -4,13 +4,13 @@ function ExpressionField({ label, value, mode = 'expr', description, onModeChang
     const expression = value ?? '';
     const activeMode = mode;
     return /*#__PURE__*/ jsxs("div", {
-        className: "flex flex-col gap-2",
+        className: "flex flex-col gap-1.5",
         children: [
             label && /*#__PURE__*/ jsxs("div", {
                 className: "flex items-center justify-between",
                 children: [
                     /*#__PURE__*/ jsx("span", {
-                        className: "text-xs font-medium text-foreground-muted",
+                        className: "text-xs font-medium leading-4 text-foreground",
                         children: label
                     }),
                     /*#__PURE__*/ jsxs("div", {

package/dist/canvas/components/NodePropertyPanel/NodePropertyPanel.cjs

@@ -118,7 +118,7 @@ function NodePropertyPanel({ panelTitle, onClose, nodeIcon, nodeLabel, nodeCateg
             }) : formSchema ? formSchema.steps ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 className: "flex min-h-0 flex-1 flex-col",
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                    className: (0, apollo_wind_namespaceObject.cn)('flex min-h-0 flex-1 flex-col [&_label]:text-foreground-muted', SURFACE_REMAP),
+                    className: (0, apollo_wind_namespaceObject.cn)("flex min-h-0 flex-1 flex-col [&_[data-slot=form-description]]:text-xs [&_[data-slot=form-description]]:leading-4 [&_[data-slot=form-description]]:text-foreground-muted [&_[data-slot=form-label]]:text-xs [&_[data-slot=form-label]]:font-medium [&_[data-slot=form-label]]:leading-4 [&_[data-slot=form-label]]:text-foreground", SURFACE_REMAP),
                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.MetadataForm, {
                         schema: formSchema,
                         plugins: plugins,
@@ -135,7 +135,7 @@ function NodePropertyPanel({ panelTitle, onClose, nodeIcon, nodeLabel, nodeCateg
             }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 className: "min-h-0 flex-1 overflow-auto",
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                    className: (0, apollo_wind_namespaceObject.cn)('[&_label]:text-foreground-muted', SURFACE_REMAP),
+                    className: (0, apollo_wind_namespaceObject.cn)("[&_[data-slot=form-description]]:text-xs [&_[data-slot=form-description]]:leading-4 [&_[data-slot=form-description]]:text-foreground-muted [&_[data-slot=form-label]]:text-xs [&_[data-slot=form-label]]:font-medium [&_[data-slot=form-label]]:leading-4 [&_[data-slot=form-label]]:text-foreground", SURFACE_REMAP),
                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.MetadataForm, {
                         schema: formSchema,
                         plugins: plugins,

package/dist/canvas/components/NodePropertyPanel/NodePropertyPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodePropertyPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodePropertyPanel/NodePropertyPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAmCxE,wBAAgB,iBAAiB,CAAC,EAChC,UAAU,EACV,OAAO,EACP,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,MAAM,EACN,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,YAAuB,EACvB,QAAQ,EACR,WAAW,EACX,cAAc,EACd,YAAY,EACZ,kBAAkB,GACnB,EAAE,sBAAsB,2CA2HxB"}
+{"version":3,"file":"NodePropertyPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodePropertyPanel/NodePropertyPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAmCxE,wBAAgB,iBAAiB,CAAC,EAChC,UAAU,EACV,OAAO,EACP,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,MAAM,EACN,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,YAAuB,EACvB,QAAQ,EACR,WAAW,EACX,cAAc,EACd,YAAY,EACZ,kBAAkB,GACnB,EAAE,sBAAsB,2CAgIxB"}

package/dist/canvas/components/NodePropertyPanel/NodePropertyPanel.js

@@ -90,7 +90,7 @@ function NodePropertyPanel({ panelTitle, onClose, nodeIcon, nodeLabel, nodeCateg
             }) : formSchema ? formSchema.steps ? /*#__PURE__*/ jsx("div", {
                 className: "flex min-h-0 flex-1 flex-col",
                 children: /*#__PURE__*/ jsx("div", {
-                    className: cn('flex min-h-0 flex-1 flex-col [&_label]:text-foreground-muted', SURFACE_REMAP),
+                    className: cn("flex min-h-0 flex-1 flex-col [&_[data-slot=form-description]]:text-xs [&_[data-slot=form-description]]:leading-4 [&_[data-slot=form-description]]:text-foreground-muted [&_[data-slot=form-label]]:text-xs [&_[data-slot=form-label]]:font-medium [&_[data-slot=form-label]]:leading-4 [&_[data-slot=form-label]]:text-foreground", SURFACE_REMAP),
                     children: /*#__PURE__*/ jsx(MetadataForm, {
                         schema: formSchema,
                         plugins: plugins,
@@ -107,7 +107,7 @@ function NodePropertyPanel({ panelTitle, onClose, nodeIcon, nodeLabel, nodeCateg
             }) : /*#__PURE__*/ jsx("div", {
                 className: "min-h-0 flex-1 overflow-auto",
                 children: /*#__PURE__*/ jsx("div", {
-                    className: cn('[&_label]:text-foreground-muted', SURFACE_REMAP),
+                    className: cn("[&_[data-slot=form-description]]:text-xs [&_[data-slot=form-description]]:leading-4 [&_[data-slot=form-description]]:text-foreground-muted [&_[data-slot=form-label]]:text-xs [&_[data-slot=form-label]]:font-medium [&_[data-slot=form-label]]:leading-4 [&_[data-slot=form-label]]:text-foreground", SURFACE_REMAP),
                     children: /*#__PURE__*/ jsx(MetadataForm, {
                         schema: formSchema,
                         plugins: plugins,

package/dist/canvas/components/NodePropertyPanel/PanelField.cjs

@@ -0,0 +1,95 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    PanelFieldLabel: ()=>PanelFieldLabel,
+    PanelField: ()=>PanelField
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const external_react_namespaceObject = require("react");
+const PanelFieldLabel = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ children, className, required = false, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.Label, {
+        ref: ref,
+        "data-slot": "panel-field-label",
+        className: (0, apollo_wind_namespaceObject.cn)('text-xs font-medium text-foreground', className),
+        ...props,
+        children: [
+            children,
+            required && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "ml-0.5 text-destructive",
+                children: "*"
+            })
+        ]
+    }));
+PanelFieldLabel.displayName = 'PanelFieldLabel';
+function PanelField({ label, htmlFor, description, error, required = false, children, className }) {
+    const generatedId = (0, external_react_namespaceObject.useId)();
+    const controlId = htmlFor ?? children.props.id ?? generatedId;
+    const descriptionId = description ? `${controlId}-description` : void 0;
+    const errorId = error ? `${controlId}-error` : void 0;
+    const describedBy = [
+        children.props['aria-describedby'],
+        descriptionId,
+        errorId
+    ].filter(Boolean).join(' ');
+    const control = /*#__PURE__*/ (0, external_react_namespaceObject.isValidElement)(children) ? /*#__PURE__*/ (0, external_react_namespaceObject.cloneElement)(children, {
+        id: controlId,
+        'aria-describedby': describedBy || void 0,
+        'aria-invalid': error ? true : children.props['aria-invalid']
+    }) : children;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: (0, apollo_wind_namespaceObject.cn)('grid gap-1.5', className),
+        "data-slot": "panel-field",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(PanelFieldLabel, {
+                htmlFor: controlId,
+                required: required,
+                children: label
+            }),
+            control,
+            description && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                id: descriptionId,
+                "data-slot": "panel-field-description",
+                className: "text-xs leading-4 text-foreground-muted",
+                children: description
+            }),
+            error && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                id: errorId,
+                "data-slot": "panel-field-error",
+                className: "text-xs leading-4 text-destructive",
+                children: error
+            })
+        ]
+    });
+}
+exports.PanelField = __webpack_exports__.PanelField;
+exports.PanelFieldLabel = __webpack_exports__.PanelFieldLabel;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "PanelField",
+    "PanelFieldLabel"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/NodePropertyPanel/PanelField.d.ts

@@ -0,0 +1,23 @@
+import { type LabelProps } from '@uipath/apollo-wind';
+import { type ReactElement, type ReactNode } from 'react';
+type PanelControlProps = {
+    id?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+};
+export interface PanelFieldProps {
+    label: ReactNode;
+    htmlFor?: string;
+    description?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    children: ReactElement<PanelControlProps>;
+    className?: string;
+}
+export interface PanelFieldLabelProps extends LabelProps {
+    required?: boolean;
+}
+export declare const PanelFieldLabel: import("react").ForwardRefExoticComponent<PanelFieldLabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+export declare function PanelField({ label, htmlFor, description, error, required, children, className, }: PanelFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PanelField.d.ts.map

package/dist/canvas/components/NodePropertyPanel/PanelField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelField.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodePropertyPanel/PanelField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,EAIL,KAAK,YAAY,EACjB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAEf,KAAK,iBAAiB,GAAG;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,MAAM,WAAW,eAAe;IAE9B,KAAK,EAAE,SAAS,CAAC;IAEjB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,EAAE,YAAY,CAAC,iBAAiB,CAAC,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,oBAAqB,SAAQ,UAAU;IAEtD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAGD,eAAO,MAAM,eAAe,mHAY3B,CAAC;AASF,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,WAAW,EACX,KAAK,EACL,QAAgB,EAChB,QAAQ,EACR,SAAS,GACV,EAAE,eAAe,2CA0CjB"}

package/dist/canvas/components/NodePropertyPanel/PanelField.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Label, cn } from "@uipath/apollo-wind";
+import { cloneElement, forwardRef, isValidElement, useId } from "react";
+const PanelFieldLabel = /*#__PURE__*/ forwardRef(({ children, className, required = false, ...props }, ref)=>/*#__PURE__*/ jsxs(Label, {
+        ref: ref,
+        "data-slot": "panel-field-label",
+        className: cn('text-xs font-medium text-foreground', className),
+        ...props,
+        children: [
+            children,
+            required && /*#__PURE__*/ jsx("span", {
+                className: "ml-0.5 text-destructive",
+                children: "*"
+            })
+        ]
+    }));
+PanelFieldLabel.displayName = 'PanelFieldLabel';
+function PanelField({ label, htmlFor, description, error, required = false, children, className }) {
+    const generatedId = useId();
+    const controlId = htmlFor ?? children.props.id ?? generatedId;
+    const descriptionId = description ? `${controlId}-description` : void 0;
+    const errorId = error ? `${controlId}-error` : void 0;
+    const describedBy = [
+        children.props['aria-describedby'],
+        descriptionId,
+        errorId
+    ].filter(Boolean).join(' ');
+    const control = /*#__PURE__*/ isValidElement(children) ? /*#__PURE__*/ cloneElement(children, {
+        id: controlId,
+        'aria-describedby': describedBy || void 0,
+        'aria-invalid': error ? true : children.props['aria-invalid']
+    }) : children;
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn('grid gap-1.5', className),
+        "data-slot": "panel-field",
+        children: [
+            /*#__PURE__*/ jsx(PanelFieldLabel, {
+                htmlFor: controlId,
+                required: required,
+                children: label
+            }),
+            control,
+            description && /*#__PURE__*/ jsx("p", {
+                id: descriptionId,
+                "data-slot": "panel-field-description",
+                className: "text-xs leading-4 text-foreground-muted",
+                children: description
+            }),
+            error && /*#__PURE__*/ jsx("p", {
+                id: errorId,
+                "data-slot": "panel-field-error",
+                className: "text-xs leading-4 text-destructive",
+                children: error
+            })
+        ]
+    });
+}
+export { PanelField, PanelFieldLabel };

package/dist/canvas/components/NodePropertyPanel/index.cjs

@@ -24,16 +24,23 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
+    PanelFieldLabel: ()=>external_PanelField_cjs_namespaceObject.PanelFieldLabel,
     NodePropertyPanel: ()=>external_NodePropertyPanel_cjs_namespaceObject.NodePropertyPanel,
+    PanelField: ()=>external_PanelField_cjs_namespaceObject.PanelField,
     ExpressionField: ()=>external_ExpressionField_cjs_namespaceObject.ExpressionField
 });
 const external_ExpressionField_cjs_namespaceObject = require("./ExpressionField.cjs");
 const external_NodePropertyPanel_cjs_namespaceObject = require("./NodePropertyPanel.cjs");
+const external_PanelField_cjs_namespaceObject = require("./PanelField.cjs");
 exports.ExpressionField = __webpack_exports__.ExpressionField;
 exports.NodePropertyPanel = __webpack_exports__.NodePropertyPanel;
+exports.PanelField = __webpack_exports__.PanelField;
+exports.PanelFieldLabel = __webpack_exports__.PanelFieldLabel;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "ExpressionField",
-    "NodePropertyPanel"
+    "NodePropertyPanel",
+    "PanelField",
+    "PanelFieldLabel"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

package/dist/canvas/components/NodePropertyPanel/index.d.ts

@@ -2,4 +2,6 @@ export type { ExpressionFieldProps, ExpressionMode } from './ExpressionField';
 export { ExpressionField } from './ExpressionField';
 export { NodePropertyPanel } from './NodePropertyPanel';
 export type { NodePropertyPanelProps } from './NodePropertyPanel.types';
+export type { PanelFieldLabelProps, PanelFieldProps } from './PanelField';
+export { PanelField, PanelFieldLabel } from './PanelField';
 //# sourceMappingURL=index.d.ts.map

package/dist/canvas/components/NodePropertyPanel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodePropertyPanel/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodePropertyPanel/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACxE,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/dist/canvas/components/NodePropertyPanel/index.js

@@ -1,3 +1,4 @@
 import { ExpressionField } from "./ExpressionField.js";
 import { NodePropertyPanel } from "./NodePropertyPanel.js";
-export { ExpressionField, NodePropertyPanel };
+import { PanelField, PanelFieldLabel } from "./PanelField.js";
+export { ExpressionField, NodePropertyPanel, PanelField, PanelFieldLabel };