@uipath/apollo-wind 2.33.3 → 2.35.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/components/ui/alert.cjs +8 -5
  2. package/dist/components/ui/alert.d.ts +3 -3
  3. package/dist/components/ui/alert.js +8 -5
  4. package/dist/components/ui/index.cjs +14 -14
  5. package/dist/styles.css +76 -124
  6. package/dist/templates/Delegate/template-delegate.d.ts +2 -5
  7. package/dist/templates/Flow/template-flow.d.ts +16 -16
  8. package/package.json +2 -2
  9. package/dist/components/custom/canvas.cjs +0 -44
  10. package/dist/components/custom/canvas.d.ts +0 -14
  11. package/dist/components/custom/canvas.js +0 -10
  12. package/dist/components/custom/flow-node-expandable.cjs +0 -81
  13. package/dist/components/custom/flow-node-expandable.d.ts +0 -27
  14. package/dist/components/custom/flow-node-expandable.js +0 -47
  15. package/dist/components/custom/flow-node.cjs +0 -74
  16. package/dist/components/custom/flow-node.d.ts +0 -25
  17. package/dist/components/custom/flow-node.js +0 -40
  18. package/dist/components/custom/flow-properties-bar.cjs +0 -103
  19. package/dist/components/custom/flow-properties-bar.d.ts +0 -21
  20. package/dist/components/custom/flow-properties-bar.js +0 -69
  21. package/dist/components/custom/flow-properties-expanded.cjs +0 -328
  22. package/dist/components/custom/flow-properties-expanded.d.ts +0 -21
  23. package/dist/components/custom/flow-properties-expanded.js +0 -294
  24. package/dist/components/custom/flow-properties.cjs +0 -56
  25. package/dist/components/custom/flow-properties.d.ts +0 -28
  26. package/dist/components/custom/flow-properties.js +0 -22
  27. package/dist/components/custom/hover-menu.cjs +0 -84
  28. package/dist/components/custom/hover-menu.d.ts +0 -13
  29. package/dist/components/custom/hover-menu.js +0 -50
  30. package/dist/components/custom/toolbar-canvas.cjs +0 -119
  31. package/dist/components/custom/toolbar-canvas.d.ts +0 -15
  32. package/dist/components/custom/toolbar-canvas.js +0 -85
  33. package/dist/components/custom/toolbar-view.cjs +0 -174
  34. package/dist/components/custom/toolbar-view.d.ts +0 -16
  35. package/dist/components/custom/toolbar-view.js +0 -140
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uipath/apollo-wind",
3
- "version": "2.33.3",
3
+ "version": "2.35.0",
4
4
  "description": "UiPath wind design system - A Tailwind CSS based React component library",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -124,7 +124,7 @@
124
124
  "tailwindcss": "^4.1.17",
125
125
  "vaul": "^1.1.2",
126
126
  "zod": "^4.3.5",
127
- "@uipath/apollo-core": "5.12.1"
127
+ "@uipath/apollo-core": "5.13.0"
128
128
  },
129
129
  "devDependencies": {
130
130
  "@codemirror/lang-javascript": "^6.2.5",
@@ -1,44 +0,0 @@
1
- "use strict";
2
- var __webpack_require__ = {};
3
- (()=>{
4
- __webpack_require__.d = (exports1, definition)=>{
5
- for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
6
- enumerable: true,
7
- get: definition[key]
8
- });
9
- };
10
- })();
11
- (()=>{
12
- __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
13
- })();
14
- (()=>{
15
- __webpack_require__.r = (exports1)=>{
16
- if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
17
- value: 'Module'
18
- });
19
- Object.defineProperty(exports1, '__esModule', {
20
- value: true
21
- });
22
- };
23
- })();
24
- var __webpack_exports__ = {};
25
- __webpack_require__.r(__webpack_exports__);
26
- __webpack_require__.d(__webpack_exports__, {
27
- Canvas: ()=>Canvas
28
- });
29
- const jsx_runtime_namespaceObject = require("react/jsx-runtime");
30
- require("react");
31
- const index_cjs_namespaceObject = require("../../lib/index.cjs");
32
- function Canvas({ className, children }) {
33
- return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
34
- className: (0, index_cjs_namespaceObject.cn)('flex flex-1 flex-col overflow-auto bg-surface', className),
35
- children: children
36
- });
37
- }
38
- exports.Canvas = __webpack_exports__.Canvas;
39
- for(var __rspack_i in __webpack_exports__)if (-1 === [
40
- "Canvas"
41
- ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
42
- Object.defineProperty(exports, '__esModule', {
43
- value: true
44
- });
@@ -1,14 +0,0 @@
1
- import * as React from 'react';
2
- export interface CanvasProps {
3
- className?: string;
4
- children?: React.ReactNode;
5
- }
6
- /**
7
- * Main content canvas for Delegate templates.
8
- *
9
- * Provides the dark background surface that sits alongside the DelegatePanel.
10
- * Content placed inside the Canvas can be laid out freely — future iterations
11
- * will add optional layout guidelines (max-width constraints, centered
12
- * content zones, padding presets, etc.).
13
- */
14
- export declare function Canvas({ className, children }: CanvasProps): import("react/jsx-runtime").JSX.Element;
@@ -1,10 +0,0 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import "react";
3
- import { cn } from "../../lib/index.js";
4
- function Canvas({ className, children }) {
5
- return /*#__PURE__*/ jsx("div", {
6
- className: cn('flex flex-1 flex-col overflow-auto bg-surface', className),
7
- children: children
8
- });
9
- }
10
- export { Canvas };
@@ -1,81 +0,0 @@
1
- "use strict";
2
- var __webpack_require__ = {};
3
- (()=>{
4
- __webpack_require__.d = (exports1, definition)=>{
5
- for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
6
- enumerable: true,
7
- get: definition[key]
8
- });
9
- };
10
- })();
11
- (()=>{
12
- __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
13
- })();
14
- (()=>{
15
- __webpack_require__.r = (exports1)=>{
16
- if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
17
- value: 'Module'
18
- });
19
- Object.defineProperty(exports1, '__esModule', {
20
- value: true
21
- });
22
- };
23
- })();
24
- var __webpack_exports__ = {};
25
- __webpack_require__.r(__webpack_exports__);
26
- __webpack_require__.d(__webpack_exports__, {
27
- FlowNodeExpandable: ()=>FlowNodeExpandable
28
- });
29
- const jsx_runtime_namespaceObject = require("react/jsx-runtime");
30
- require("react");
31
- const external_lucide_react_namespaceObject = require("lucide-react");
32
- const index_cjs_namespaceObject = require("../../lib/index.cjs");
33
- function FlowNodeExpandable({ className, title = 'Node title', icon, expanded = false, selected = false, forceState, onToggle }) {
34
- const isSelected = selected || 'selected' === forceState || 'selected-hover' === forceState;
35
- const isHover = 'hover' === forceState;
36
- const isSelectedHover = 'selected-hover' === forceState;
37
- return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
38
- className: (0, index_cjs_namespaceObject.cn)('group w-[360px] rounded-2xl bg-surface-overlay', expanded ? 'flex flex-col size-[360px] px-4 pt-2.5 pb-4 gap-[15px]' : 'p-3', !isSelected && !isHover && 'border-[1.6px] border-border', !isSelected && !forceState && 'group-hover:border-2 group-hover:border-border-hover', isHover && 'border-2 border-border-hover', isSelected && !isSelectedHover && 'border-2 border-brand', isSelectedHover && 'border-2 border-foreground-accent-muted', !forceState && isSelected && 'group-hover:border-foreground-accent-muted', className),
39
- children: [
40
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
41
- className: "flex items-center justify-between",
42
- children: [
43
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
44
- className: "flex items-center gap-2.5",
45
- children: [
46
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
47
- className: "flex items-center justify-center rounded-xl bg-surface size-8 shrink-0",
48
- children: icon ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Workflow, {
49
- className: "h-5 w-5 text-foreground-muted"
50
- })
51
- }),
52
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
53
- className: "text-sm font-medium text-foreground whitespace-nowrap",
54
- children: title
55
- })
56
- ]
57
- }),
58
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
59
- type: "button",
60
- className: "flex items-center justify-center rounded text-foreground-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
61
- onClick: onToggle,
62
- "aria-label": expanded ? `Collapse ${title}` : `Expand ${title}`,
63
- children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
64
- className: (0, index_cjs_namespaceObject.cn)('h-4 w-4', expanded && 'rotate-180')
65
- })
66
- })
67
- ]
68
- }),
69
- expanded && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
70
- className: "flex-1 min-h-0 rounded-lg bg-surface"
71
- })
72
- ]
73
- });
74
- }
75
- exports.FlowNodeExpandable = __webpack_exports__.FlowNodeExpandable;
76
- for(var __rspack_i in __webpack_exports__)if (-1 === [
77
- "FlowNodeExpandable"
78
- ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
79
- Object.defineProperty(exports, '__esModule', {
80
- value: true
81
- });
@@ -1,27 +0,0 @@
1
- import * as React from 'react';
2
- export interface FlowNodeExpandableProps {
3
- className?: string;
4
- /** Node title */
5
- title?: string;
6
- /** Icon rendered in the node header */
7
- icon?: React.ReactNode;
8
- /** Whether the node is expanded */
9
- expanded?: boolean;
10
- /** Whether the node is selected */
11
- selected?: boolean;
12
- /**
13
- * Force a specific visual state — used for Storybook stories and snapshots.
14
- * In normal use, hover is driven by CSS group-hover.
15
- */
16
- forceState?: 'default' | 'hover' | 'selected' | 'selected-hover';
17
- /** Callback when expand/collapse chevron is toggled */
18
- onToggle?: () => void;
19
- }
20
- /**
21
- * Expandable card-style canvas node for the Flow template.
22
- *
23
- * Collapsed: 360px wide, header only.
24
- * Expanded: 360×360px, header + content area.
25
- * Shares the same 4-state border pattern as FlowNode.
26
- */
27
- export declare function FlowNodeExpandable({ className, title, icon, expanded, selected, forceState, onToggle, }: FlowNodeExpandableProps): import("react/jsx-runtime").JSX.Element;
@@ -1,47 +0,0 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
2
- import "react";
3
- import { ChevronDown, Workflow } from "lucide-react";
4
- import { cn } from "../../lib/index.js";
5
- function FlowNodeExpandable({ className, title = 'Node title', icon, expanded = false, selected = false, forceState, onToggle }) {
6
- const isSelected = selected || 'selected' === forceState || 'selected-hover' === forceState;
7
- const isHover = 'hover' === forceState;
8
- const isSelectedHover = 'selected-hover' === forceState;
9
- return /*#__PURE__*/ jsxs("div", {
10
- className: cn('group w-[360px] rounded-2xl bg-surface-overlay', expanded ? 'flex flex-col size-[360px] px-4 pt-2.5 pb-4 gap-[15px]' : 'p-3', !isSelected && !isHover && 'border-[1.6px] border-border', !isSelected && !forceState && 'group-hover:border-2 group-hover:border-border-hover', isHover && 'border-2 border-border-hover', isSelected && !isSelectedHover && 'border-2 border-brand', isSelectedHover && 'border-2 border-foreground-accent-muted', !forceState && isSelected && 'group-hover:border-foreground-accent-muted', className),
11
- children: [
12
- /*#__PURE__*/ jsxs("div", {
13
- className: "flex items-center justify-between",
14
- children: [
15
- /*#__PURE__*/ jsxs("div", {
16
- className: "flex items-center gap-2.5",
17
- children: [
18
- /*#__PURE__*/ jsx("div", {
19
- className: "flex items-center justify-center rounded-xl bg-surface size-8 shrink-0",
20
- children: icon ?? /*#__PURE__*/ jsx(Workflow, {
21
- className: "h-5 w-5 text-foreground-muted"
22
- })
23
- }),
24
- /*#__PURE__*/ jsx("span", {
25
- className: "text-sm font-medium text-foreground whitespace-nowrap",
26
- children: title
27
- })
28
- ]
29
- }),
30
- /*#__PURE__*/ jsx("button", {
31
- type: "button",
32
- className: "flex items-center justify-center rounded text-foreground-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
33
- onClick: onToggle,
34
- "aria-label": expanded ? `Collapse ${title}` : `Expand ${title}`,
35
- children: /*#__PURE__*/ jsx(ChevronDown, {
36
- className: cn('h-4 w-4', expanded && 'rotate-180')
37
- })
38
- })
39
- ]
40
- }),
41
- expanded && /*#__PURE__*/ jsx("div", {
42
- className: "flex-1 min-h-0 rounded-lg bg-surface"
43
- })
44
- ]
45
- });
46
- }
47
- export { FlowNodeExpandable };
@@ -1,74 +0,0 @@
1
- "use strict";
2
- var __webpack_require__ = {};
3
- (()=>{
4
- __webpack_require__.d = (exports1, definition)=>{
5
- for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
6
- enumerable: true,
7
- get: definition[key]
8
- });
9
- };
10
- })();
11
- (()=>{
12
- __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
13
- })();
14
- (()=>{
15
- __webpack_require__.r = (exports1)=>{
16
- if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
17
- value: 'Module'
18
- });
19
- Object.defineProperty(exports1, '__esModule', {
20
- value: true
21
- });
22
- };
23
- })();
24
- var __webpack_exports__ = {};
25
- __webpack_require__.r(__webpack_exports__);
26
- __webpack_require__.d(__webpack_exports__, {
27
- FlowNode: ()=>FlowNode
28
- });
29
- const jsx_runtime_namespaceObject = require("react/jsx-runtime");
30
- require("react");
31
- const external_lucide_react_namespaceObject = require("lucide-react");
32
- const index_cjs_namespaceObject = require("../../lib/index.cjs");
33
- function FlowNode({ className, title = 'Node title', subtitle = 'Secondary title', icon, selected = false, forceState, onClick }) {
34
- const isSelected = selected || 'selected' === forceState || 'selected-hover' === forceState;
35
- const isHover = 'hover' === forceState;
36
- const isSelectedHover = 'selected-hover' === forceState;
37
- return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
38
- type: "button",
39
- className: (0, index_cjs_namespaceObject.cn)('group flex w-[107px] flex-col items-center gap-2.5 rounded-[32px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', className),
40
- onClick: onClick,
41
- children: [
42
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
43
- className: (0, index_cjs_namespaceObject.cn)('relative flex items-center justify-center rounded-[32px] size-24 bg-surface-overlay', !isSelected && !isHover && 'border-[1.6px] border-border', !isSelected && !forceState && 'group-hover:border-2 group-hover:border-border-hover', isHover && 'border-2 border-border-hover', isSelected && !isSelectedHover && 'border-2 border-brand', isSelectedHover && 'border-2 border-foreground-accent-muted', !forceState && isSelected && 'group-hover:border-foreground-accent-muted'),
44
- children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
45
- className: "flex items-center justify-center overflow-hidden rounded-[24px] bg-surface size-20",
46
- children: icon ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Bot, {
47
- className: "h-10 w-10 text-foreground-muted",
48
- strokeWidth: 1.4
49
- })
50
- })
51
- }),
52
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
53
- className: "flex flex-col items-center",
54
- children: [
55
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
56
- className: "text-center text-[14px] font-semibold leading-[18px] text-foreground",
57
- children: title
58
- }),
59
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
60
- className: "text-center text-[12px] leading-[18px] text-foreground-muted",
61
- children: subtitle
62
- })
63
- ]
64
- })
65
- ]
66
- });
67
- }
68
- exports.FlowNode = __webpack_exports__.FlowNode;
69
- for(var __rspack_i in __webpack_exports__)if (-1 === [
70
- "FlowNode"
71
- ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
72
- Object.defineProperty(exports, '__esModule', {
73
- value: true
74
- });
@@ -1,25 +0,0 @@
1
- import * as React from 'react';
2
- export interface FlowNodeProps {
3
- className?: string;
4
- /** Node title */
5
- title?: string;
6
- /** Node subtitle */
7
- subtitle?: string;
8
- /** Icon rendered inside the inner shape */
9
- icon?: React.ReactNode;
10
- /** Whether the node is in selected state */
11
- selected?: boolean;
12
- /**
13
- * Force a specific visual state — used for Storybook stories and snapshots.
14
- * In normal use, hover is driven by CSS group-hover.
15
- */
16
- forceState?: 'default' | 'hover' | 'selected' | 'selected-hover';
17
- onClick?: () => void;
18
- }
19
- /**
20
- * Icon-centric canvas node for the Flow template.
21
- *
22
- * 96×96 outer ring → 80×80 inner rounded shape → 40×40 icon.
23
- * Title + subtitle centered below.
24
- */
25
- export declare function FlowNode({ className, title, subtitle, icon, selected, forceState, onClick, }: FlowNodeProps): import("react/jsx-runtime").JSX.Element;
@@ -1,40 +0,0 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
2
- import "react";
3
- import { Bot } from "lucide-react";
4
- import { cn } from "../../lib/index.js";
5
- function FlowNode({ className, title = 'Node title', subtitle = 'Secondary title', icon, selected = false, forceState, onClick }) {
6
- const isSelected = selected || 'selected' === forceState || 'selected-hover' === forceState;
7
- const isHover = 'hover' === forceState;
8
- const isSelectedHover = 'selected-hover' === forceState;
9
- return /*#__PURE__*/ jsxs("button", {
10
- type: "button",
11
- className: cn('group flex w-[107px] flex-col items-center gap-2.5 rounded-[32px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', className),
12
- onClick: onClick,
13
- children: [
14
- /*#__PURE__*/ jsx("div", {
15
- className: cn('relative flex items-center justify-center rounded-[32px] size-24 bg-surface-overlay', !isSelected && !isHover && 'border-[1.6px] border-border', !isSelected && !forceState && 'group-hover:border-2 group-hover:border-border-hover', isHover && 'border-2 border-border-hover', isSelected && !isSelectedHover && 'border-2 border-brand', isSelectedHover && 'border-2 border-foreground-accent-muted', !forceState && isSelected && 'group-hover:border-foreground-accent-muted'),
16
- children: /*#__PURE__*/ jsx("div", {
17
- className: "flex items-center justify-center overflow-hidden rounded-[24px] bg-surface size-20",
18
- children: icon ?? /*#__PURE__*/ jsx(Bot, {
19
- className: "h-10 w-10 text-foreground-muted",
20
- strokeWidth: 1.4
21
- })
22
- })
23
- }),
24
- /*#__PURE__*/ jsxs("div", {
25
- className: "flex flex-col items-center",
26
- children: [
27
- /*#__PURE__*/ jsx("span", {
28
- className: "text-center text-[14px] font-semibold leading-[18px] text-foreground",
29
- children: title
30
- }),
31
- /*#__PURE__*/ jsx("span", {
32
- className: "text-center text-[12px] leading-[18px] text-foreground-muted",
33
- children: subtitle
34
- })
35
- ]
36
- })
37
- ]
38
- });
39
- }
40
- export { FlowNode };
@@ -1,103 +0,0 @@
1
- "use strict";
2
- var __webpack_require__ = {};
3
- (()=>{
4
- __webpack_require__.d = (exports1, definition)=>{
5
- for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
6
- enumerable: true,
7
- get: definition[key]
8
- });
9
- };
10
- })();
11
- (()=>{
12
- __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
13
- })();
14
- (()=>{
15
- __webpack_require__.r = (exports1)=>{
16
- if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
17
- value: 'Module'
18
- });
19
- Object.defineProperty(exports1, '__esModule', {
20
- value: true
21
- });
22
- };
23
- })();
24
- var __webpack_exports__ = {};
25
- __webpack_require__.r(__webpack_exports__);
26
- __webpack_require__.d(__webpack_exports__, {
27
- PropertiesBar: ()=>PropertiesBar
28
- });
29
- const jsx_runtime_namespaceObject = require("react/jsx-runtime");
30
- const external_lucide_react_namespaceObject = require("lucide-react");
31
- const index_cjs_namespaceObject = require("../../lib/index.cjs");
32
- function PropertiesBar({ className, flowName = 'Invoice processing', flowType = 'Workflow', activeTab = 'properties', onTabChange, onExpand }) {
33
- return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
34
- className: (0, index_cjs_namespaceObject.cn)('flex h-16 items-center justify-between rounded-2xl bg-surface-raised px-4', className),
35
- children: [
36
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
37
- className: "flex items-center gap-4",
38
- children: [
39
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
40
- className: "flex h-10 w-10 items-center justify-center rounded-xl bg-brand-subtle",
41
- children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Workflow, {
42
- className: "h-6 w-6 text-brand-foreground"
43
- })
44
- }),
45
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
46
- className: "flex flex-col",
47
- children: [
48
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
49
- className: "text-base font-semibold leading-5 tracking-[-0.4px] text-foreground",
50
- children: flowName
51
- }),
52
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
53
- className: "text-sm font-normal leading-5 tracking-[-0.35px] text-foreground-subtle",
54
- children: flowType
55
- })
56
- ]
57
- })
58
- ]
59
- }),
60
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
61
- className: "flex h-10 items-center rounded-xl bg-surface-overlay border border-border-deep p-1",
62
- children: [
63
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
64
- type: "button",
65
- className: (0, index_cjs_namespaceObject.cn)('flex h-8 items-center gap-2 rounded-[10px] px-4 py-2 text-sm font-medium leading-5 text-foreground-subtle transition-colors hover:text-foreground-hover', 'properties' === activeTab && 'text-foreground-subtle'),
66
- onClick: ()=>{
67
- onTabChange?.('properties');
68
- onExpand?.();
69
- },
70
- children: [
71
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.TableProperties, {
72
- className: "h-5 w-5"
73
- }),
74
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
75
- children: "Properties"
76
- })
77
- ]
78
- }),
79
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
80
- type: "button",
81
- className: (0, index_cjs_namespaceObject.cn)('flex h-7 items-center gap-2 rounded-xl px-4 py-2 text-sm font-medium leading-5 text-foreground-subtle transition-colors', 'variables' === activeTab && 'text-foreground-subtle'),
82
- onClick: ()=>onTabChange?.('variables'),
83
- children: [
84
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Variable, {
85
- className: "h-5 w-5"
86
- }),
87
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
88
- children: "Variables"
89
- })
90
- ]
91
- })
92
- ]
93
- })
94
- ]
95
- });
96
- }
97
- exports.PropertiesBar = __webpack_exports__.PropertiesBar;
98
- for(var __rspack_i in __webpack_exports__)if (-1 === [
99
- "PropertiesBar"
100
- ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
101
- Object.defineProperty(exports, '__esModule', {
102
- value: true
103
- });
@@ -1,21 +0,0 @@
1
- export interface PropertiesBarProps {
2
- className?: string;
3
- /** Flow name shown in the bar */
4
- flowName?: string;
5
- /** Flow type label (e.g. "Workflow") */
6
- flowType?: string;
7
- /** Active tab: 'properties' | 'variables' */
8
- activeTab?: 'properties' | 'variables';
9
- /** Callback when tab changes */
10
- onTabChange?: (tab: 'properties' | 'variables') => void;
11
- /** Callback when the properties tab is clicked to expand the panel */
12
- onExpand?: () => void;
13
- }
14
- /**
15
- * Collapsed properties bar for the Flow template.
16
- *
17
- * Anchored to the top-right of the canvas. Shows flow name/type on the left
18
- * and Properties/Variables tab buttons on the right. A future update will
19
- * introduce the expanded state.
20
- */
21
- export declare function PropertiesBar({ className, flowName, flowType, activeTab, onTabChange, onExpand, }: PropertiesBarProps): import("react/jsx-runtime").JSX.Element;
@@ -1,69 +0,0 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
2
- import { TableProperties, Variable, Workflow } from "lucide-react";
3
- import { cn } from "../../lib/index.js";
4
- function PropertiesBar({ className, flowName = 'Invoice processing', flowType = 'Workflow', activeTab = 'properties', onTabChange, onExpand }) {
5
- return /*#__PURE__*/ jsxs("div", {
6
- className: cn('flex h-16 items-center justify-between rounded-2xl bg-surface-raised px-4', className),
7
- children: [
8
- /*#__PURE__*/ jsxs("div", {
9
- className: "flex items-center gap-4",
10
- children: [
11
- /*#__PURE__*/ jsx("div", {
12
- className: "flex h-10 w-10 items-center justify-center rounded-xl bg-brand-subtle",
13
- children: /*#__PURE__*/ jsx(Workflow, {
14
- className: "h-6 w-6 text-brand-foreground"
15
- })
16
- }),
17
- /*#__PURE__*/ jsxs("div", {
18
- className: "flex flex-col",
19
- children: [
20
- /*#__PURE__*/ jsx("span", {
21
- className: "text-base font-semibold leading-5 tracking-[-0.4px] text-foreground",
22
- children: flowName
23
- }),
24
- /*#__PURE__*/ jsx("span", {
25
- className: "text-sm font-normal leading-5 tracking-[-0.35px] text-foreground-subtle",
26
- children: flowType
27
- })
28
- ]
29
- })
30
- ]
31
- }),
32
- /*#__PURE__*/ jsxs("div", {
33
- className: "flex h-10 items-center rounded-xl bg-surface-overlay border border-border-deep p-1",
34
- children: [
35
- /*#__PURE__*/ jsxs("button", {
36
- type: "button",
37
- className: cn('flex h-8 items-center gap-2 rounded-[10px] px-4 py-2 text-sm font-medium leading-5 text-foreground-subtle transition-colors hover:text-foreground-hover', 'properties' === activeTab && 'text-foreground-subtle'),
38
- onClick: ()=>{
39
- onTabChange?.('properties');
40
- onExpand?.();
41
- },
42
- children: [
43
- /*#__PURE__*/ jsx(TableProperties, {
44
- className: "h-5 w-5"
45
- }),
46
- /*#__PURE__*/ jsx("span", {
47
- children: "Properties"
48
- })
49
- ]
50
- }),
51
- /*#__PURE__*/ jsxs("button", {
52
- type: "button",
53
- className: cn('flex h-7 items-center gap-2 rounded-xl px-4 py-2 text-sm font-medium leading-5 text-foreground-subtle transition-colors', 'variables' === activeTab && 'text-foreground-subtle'),
54
- onClick: ()=>onTabChange?.('variables'),
55
- children: [
56
- /*#__PURE__*/ jsx(Variable, {
57
- className: "h-5 w-5"
58
- }),
59
- /*#__PURE__*/ jsx("span", {
60
- children: "Variables"
61
- })
62
- ]
63
- })
64
- ]
65
- })
66
- ]
67
- });
68
- }
69
- export { PropertiesBar };