chordia-ui 3.9.6 → 3.9.7
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const e=require("react/jsx-runtime");require("react");const
|
|
1
|
+
"use strict";const e=require("react/jsx-runtime");require("react");const i=require("lucide-react");function u({providerName:l,description:x,status:n="available",logoUrl:s,icon:c,onConnect:a,onConfigure:d}){const p=n==="connected",o=n==="coming-soon",g={connected:{label:"Connected",color:"var(--Grey-White, #FFF)",bgColor:"var(--Green-Primary, #00A66E)",icon:e.jsx(i.CheckCircle2,{size:16,strokeWidth:2,color:"#FFF"}),actionLabel:"Disconnect",actionFilled:!1},available:{label:"Available",color:"var(--Grey-Strong, #808183)",icon:e.jsx(i.CloudDownload,{size:16,strokeWidth:2}),actionLabel:"Connect",actionFilled:!0},"coming-soon":{label:"Coming Soon",color:"var(--Grey-Muted, #B2AEA8)",icon:e.jsx(i.CloudOff,{size:16,strokeWidth:2}),actionLabel:"Connect",actionFilled:!1}},t=g[n]||g.available;return e.jsxs("div",{style:{display:"flex",width:"317px",height:"160px",padding:"16px",flexDirection:"column",alignItems:"flex-start",gap:"10px",borderRadius:"4px",border:"1px solid #D9D9D9",background:"var(--Base-White, #FFF)"},children:[e.jsxs("div",{style:{flex:1,width:"100%"},children:[e.jsx("div",{style:{marginBottom:"4px"},children:s?e.jsx("img",{src:s,alt:l,style:{height:"24px",objectFit:"contain"}}):c?e.jsx("div",{style:{display:"flex",alignItems:"center"},children:c}):e.jsx("h3",{style:{fontSize:"16px",fontWeight:700,color:"var(--Base-Strong, #1E2125)",margin:0,lineHeight:1.3},children:l})}),e.jsx("p",{style:{fontSize:"13px",lineHeight:1.4,color:"var(--Grey-Strong, #808183)",margin:0},children:x})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",gap:"8px"},children:[e.jsxs("div",{style:{display:"flex",padding:t.bgColor?"4px 8px 4px 6px":"0",alignItems:"center",gap:"4px",borderRadius:t.bgColor?"16px":"0",background:t.bgColor||"transparent",fontSize:"12px",fontStyle:"normal",fontWeight:400,lineHeight:"16px",color:t.color},children:[t.icon,t.label]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[p&&d&&e.jsx("button",{type:"button",title:"Configure","aria-label":"Configure",onClick:r=>{r.stopPropagation(),d()},style:{display:"flex",alignItems:"center",justifyContent:"center",width:"30px",height:"30px",border:"1px solid var(--neutral-100, #E6E6E6)",background:"var(--grey-white, #FFF)",color:"var(--Grey-Strong, #808183)",cursor:"pointer",borderRadius:"8px",transition:"background 0.15s ease, border-color 0.15s ease, color 0.15s ease"},onMouseEnter:r=>{r.currentTarget.style.background="var(--surface-hover, #F3F7F7)",r.currentTarget.style.borderColor="var(--neutral-250, #BFBFBF)",r.currentTarget.style.color="var(--Grey-Strong, #2E3236)"},onMouseLeave:r=>{r.currentTarget.style.background="var(--grey-white, #FFF)",r.currentTarget.style.borderColor="var(--neutral-100, #E6E6E6)",r.currentTarget.style.color="var(--Grey-Strong, #808183)"},children:e.jsx(i.Settings2,{size:16,strokeWidth:2})}),e.jsx("button",{onClick:r=>{r.stopPropagation(),a==null||a()},disabled:o,style:{display:"flex",height:"28px",padding:"10px",justifyContent:"center",alignItems:"center",gap:"10px",borderRadius:"10px",border:t.actionFilled?"1px solid transparent":"1px solid #D9D9D9",background:o?"var(--Grey-Muted, #B2AEA8)":t.actionFilled?"var(--Base-Strong, #1E2125)":"var(--Base-White, #FFF)",color:t.actionFilled||o?"#FFF":"var(--Base-Strong, #1E2125)",fontSize:"13px",fontWeight:600,cursor:o?"default":"pointer",opacity:o?.6:1,transition:"all 0.15s ease",lineHeight:1.4},onMouseEnter:r=>{!o&&!t.actionFilled&&(r.currentTarget.style.background="rgba(0,0,0,0.04)")},onMouseLeave:r=>{!o&&!t.actionFilled&&(r.currentTarget.style.background="var(--Base-White, #FFF)")},children:t.actionLabel})]})]})]})}exports.IntegrationCard=u;
|
|
2
2
|
//# sourceMappingURL=IntegrationCard.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IntegrationCard.cjs.js","sources":["../src/components/layout/IntegrationCard.jsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { CheckCircle2, Settings2, CloudOff, CloudDownload } from \"lucide-react\";\n\n/**\n * IntegrationCard Component\n * Displays an integration provider card with status, logo, and configuration options\n *\n * Props:\n * - providerName string Provider display name\n * - description string Short description / subtitle\n * - status string \"available\" | \"connected\" | \"coming-soon\"\n * - logoUrl string Optional logo image URL\n * - icon ReactNode Optional custom icon/logo element\n * - onConnect function Connect/Disconnect callback\n * - onConfigure function Configure (settings) callback — shown for connected\n */\nexport default function IntegrationCard({\n providerName,\n description,\n status = \"available\",\n logoUrl,\n icon,\n onConnect,\n onConfigure,\n}) {\n const isConnected = status === \"connected\";\n const isComingSoon = status === \"coming-soon\";\n\n const statusConfig = {\n connected: {\n label: \"Connected\",\n color: \"var(--Grey-White, #FFF)\",\n bgColor: \"var(--Green-Primary, #00A66E)\",\n icon: <CheckCircle2 size={16} strokeWidth={2} color=\"#FFF\" />,\n actionLabel: \"Disconnect\",\n actionFilled: false,\n },\n available: {\n label: \"Available\",\n color: \"var(--Grey-Strong, #808183)\",\n icon: <CloudDownload size={16} strokeWidth={2} />,\n actionLabel: \"Connect\",\n actionFilled: true,\n },\n \"coming-soon\": {\n label: \"Coming Soon\",\n color: \"var(--Grey-Muted, #B2AEA8)\",\n icon: <CloudOff size={16} strokeWidth={2} />,\n actionLabel: \"Connect\",\n actionFilled: false,\n },\n };\n\n const config = statusConfig[status] || statusConfig.available;\n\n return (\n <div\n style={{\n display: \"flex\",\n width: \"317px\",\n height: \"160px\",\n padding: \"16px\",\n flexDirection: \"column\",\n alignItems: \"flex-start\",\n gap: \"10px\",\n borderRadius: \"4px\",\n border: \"1px solid #D9D9D9\",\n background: \"var(--Base-White, #FFF)\",\n }}\n >\n {/* Top: Name + Description */}\n <div style={{ flex: 1, width: \"100%\" }}>\n {/* Provider Name / Logo */}\n <div style={{ marginBottom: \"4px\" }}>\n {logoUrl ? (\n <img\n src={logoUrl}\n alt={providerName}\n style={{ height: \"24px\", objectFit: \"contain\" }}\n />\n ) : icon ? (\n <div style={{ display: \"flex\", alignItems: \"center\" }}>{icon}</div>\n ) : (\n <h3\n style={{\n fontSize: \"16px\",\n fontWeight: 700,\n color: \"var(--Base-Strong, #1E2125)\",\n margin: 0,\n lineHeight: 1.3,\n }}\n >\n {providerName}\n </h3>\n )}\n </div>\n {/* Description */}\n <p\n style={{\n fontSize: \"13px\",\n lineHeight: 1.4,\n color: \"var(--Grey-Strong, #808183)\",\n margin: 0,\n }}\n >\n {description}\n </p>\n </div>\n\n {/* Bottom: Status + Actions */}\n <div\n style={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n width: \"100%\",\n gap: \"8px\",\n }}\n >\n {/* Status label */}\n <div\n style={{\n display: \"flex\",\n padding: config.bgColor ? \"4px 8px 4px 6px\" : \"0\",\n alignItems: \"center\",\n gap: \"4px\",\n borderRadius: config.bgColor ? \"16px\" : \"0\",\n background: config.bgColor || \"transparent\",\n fontSize: \"12px\",\n fontStyle: \"normal\",\n fontWeight: 400,\n lineHeight: \"16px\",\n color: config.color,\n }}\n >\n {config.icon}\n {config.label}\n </div>\n\n {/* Action area */}\n <div style={{ display: \"flex\", alignItems: \"center\", gap: \"8px\" }}>\n {/* Settings icon for connected */}\n {isConnected && onConfigure && (\n <button\n onClick={(e) => {\n e.stopPropagation();\n onConfigure();\n }}\n style={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n width: \"32px\",\n height: \"32px\",\n border: \"none\",\n background: \"transparent\",\n color: \"var(--Grey-Strong, #808183)\",\n cursor: \"pointer\",\n borderRadius: \"4px\",\n transition: \"background 0.15s ease\",\n }}\n onMouseEnter={(e) => {\n e.currentTarget.style.background = \"rgba(0,0,0,0.04)\";\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.background = \"transparent\";\n }}\n >\n <Settings2 size={20} strokeWidth={2} />\n </button>\n )}\n\n {/* Connect / Disconnect button */}\n <button\n onClick={(e) => {\n e.stopPropagation();\n onConnect?.();\n }}\n disabled={isComingSoon}\n style={{\n display: \"flex\",\n height: \"28px\",\n padding: \"10px\",\n justifyContent: \"center\",\n alignItems: \"center\",\n gap: \"10px\",\n borderRadius: \"10px\",\n border: config.actionFilled\n ? \"1px solid transparent\"\n : \"1px solid #D9D9D9\",\n background: isComingSoon\n ? \"var(--Grey-Muted, #B2AEA8)\"\n : config.actionFilled\n ? \"var(--Base-Strong, #1E2125)\"\n : \"var(--Base-White, #FFF)\",\n color: config.actionFilled || isComingSoon\n ? \"#FFF\"\n : \"var(--Base-Strong, #1E2125)\",\n fontSize: \"13px\",\n fontWeight: 600,\n cursor: isComingSoon ? \"default\" : \"pointer\",\n opacity: isComingSoon ? 0.6 : 1,\n transition: \"all 0.15s ease\",\n lineHeight: 1.4,\n }}\n onMouseEnter={(e) => {\n if (!isComingSoon && !config.actionFilled) {\n e.currentTarget.style.background = \"rgba(0,0,0,0.04)\";\n }\n }}\n onMouseLeave={(e) => {\n if (!isComingSoon && !config.actionFilled) {\n e.currentTarget.style.background = \"var(--Base-White, #FFF)\";\n }\n }}\n >\n {config.actionLabel}\n </button>\n </div>\n </div>\n </div>\n );\n}\n"],"names":["IntegrationCard","providerName","description","status","logoUrl","icon","onConnect","onConfigure","isConnected","isComingSoon","statusConfig","CheckCircle2","jsx","CloudDownload","CloudOff","config","jsxs","e","Settings2"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"IntegrationCard.cjs.js","sources":["../src/components/layout/IntegrationCard.jsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { CheckCircle2, Settings2, CloudOff, CloudDownload } from \"lucide-react\";\n\n/**\n * IntegrationCard Component\n * Displays an integration provider card with status, logo, and configuration options\n *\n * Props:\n * - providerName string Provider display name\n * - description string Short description / subtitle\n * - status string \"available\" | \"connected\" | \"coming-soon\"\n * - logoUrl string Optional logo image URL\n * - icon ReactNode Optional custom icon/logo element\n * - onConnect function Connect/Disconnect callback\n * - onConfigure function Configure (settings) callback — shown for connected\n */\nexport default function IntegrationCard({\n providerName,\n description,\n status = \"available\",\n logoUrl,\n icon,\n onConnect,\n onConfigure,\n}) {\n const isConnected = status === \"connected\";\n const isComingSoon = status === \"coming-soon\";\n\n const statusConfig = {\n connected: {\n label: \"Connected\",\n color: \"var(--Grey-White, #FFF)\",\n bgColor: \"var(--Green-Primary, #00A66E)\",\n icon: <CheckCircle2 size={16} strokeWidth={2} color=\"#FFF\" />,\n actionLabel: \"Disconnect\",\n actionFilled: false,\n },\n available: {\n label: \"Available\",\n color: \"var(--Grey-Strong, #808183)\",\n icon: <CloudDownload size={16} strokeWidth={2} />,\n actionLabel: \"Connect\",\n actionFilled: true,\n },\n \"coming-soon\": {\n label: \"Coming Soon\",\n color: \"var(--Grey-Muted, #B2AEA8)\",\n icon: <CloudOff size={16} strokeWidth={2} />,\n actionLabel: \"Connect\",\n actionFilled: false,\n },\n };\n\n const config = statusConfig[status] || statusConfig.available;\n\n return (\n <div\n style={{\n display: \"flex\",\n width: \"317px\",\n height: \"160px\",\n padding: \"16px\",\n flexDirection: \"column\",\n alignItems: \"flex-start\",\n gap: \"10px\",\n borderRadius: \"4px\",\n border: \"1px solid #D9D9D9\",\n background: \"var(--Base-White, #FFF)\",\n }}\n >\n {/* Top: Name + Description */}\n <div style={{ flex: 1, width: \"100%\" }}>\n {/* Provider Name / Logo */}\n <div style={{ marginBottom: \"4px\" }}>\n {logoUrl ? (\n <img\n src={logoUrl}\n alt={providerName}\n style={{ height: \"24px\", objectFit: \"contain\" }}\n />\n ) : icon ? (\n <div style={{ display: \"flex\", alignItems: \"center\" }}>{icon}</div>\n ) : (\n <h3\n style={{\n fontSize: \"16px\",\n fontWeight: 700,\n color: \"var(--Base-Strong, #1E2125)\",\n margin: 0,\n lineHeight: 1.3,\n }}\n >\n {providerName}\n </h3>\n )}\n </div>\n {/* Description */}\n <p\n style={{\n fontSize: \"13px\",\n lineHeight: 1.4,\n color: \"var(--Grey-Strong, #808183)\",\n margin: 0,\n }}\n >\n {description}\n </p>\n </div>\n\n {/* Bottom: Status + Actions */}\n <div\n style={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n width: \"100%\",\n gap: \"8px\",\n }}\n >\n {/* Status label */}\n <div\n style={{\n display: \"flex\",\n padding: config.bgColor ? \"4px 8px 4px 6px\" : \"0\",\n alignItems: \"center\",\n gap: \"4px\",\n borderRadius: config.bgColor ? \"16px\" : \"0\",\n background: config.bgColor || \"transparent\",\n fontSize: \"12px\",\n fontStyle: \"normal\",\n fontWeight: 400,\n lineHeight: \"16px\",\n color: config.color,\n }}\n >\n {config.icon}\n {config.label}\n </div>\n\n {/* Action area */}\n <div style={{ display: \"flex\", alignItems: \"center\", gap: \"8px\" }}>\n {/* Settings icon for connected — a bordered, clickable button with a\n native \"Configure\" tooltip on hover. */}\n {isConnected && onConfigure && (\n <button\n type=\"button\"\n title=\"Configure\"\n aria-label=\"Configure\"\n onClick={(e) => {\n e.stopPropagation();\n onConfigure();\n }}\n style={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n width: \"30px\",\n height: \"30px\",\n border: \"1px solid var(--neutral-100, #E6E6E6)\",\n background: \"var(--grey-white, #FFF)\",\n color: \"var(--Grey-Strong, #808183)\",\n cursor: \"pointer\",\n borderRadius: \"8px\",\n transition: \"background 0.15s ease, border-color 0.15s ease, color 0.15s ease\",\n }}\n onMouseEnter={(e) => {\n e.currentTarget.style.background = \"var(--surface-hover, #F3F7F7)\";\n e.currentTarget.style.borderColor = \"var(--neutral-250, #BFBFBF)\";\n e.currentTarget.style.color = \"var(--Grey-Strong, #2E3236)\";\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.background = \"var(--grey-white, #FFF)\";\n e.currentTarget.style.borderColor = \"var(--neutral-100, #E6E6E6)\";\n e.currentTarget.style.color = \"var(--Grey-Strong, #808183)\";\n }}\n >\n <Settings2 size={16} strokeWidth={2} />\n </button>\n )}\n\n {/* Connect / Disconnect button */}\n <button\n onClick={(e) => {\n e.stopPropagation();\n onConnect?.();\n }}\n disabled={isComingSoon}\n style={{\n display: \"flex\",\n height: \"28px\",\n padding: \"10px\",\n justifyContent: \"center\",\n alignItems: \"center\",\n gap: \"10px\",\n borderRadius: \"10px\",\n border: config.actionFilled\n ? \"1px solid transparent\"\n : \"1px solid #D9D9D9\",\n background: isComingSoon\n ? \"var(--Grey-Muted, #B2AEA8)\"\n : config.actionFilled\n ? \"var(--Base-Strong, #1E2125)\"\n : \"var(--Base-White, #FFF)\",\n color: config.actionFilled || isComingSoon\n ? \"#FFF\"\n : \"var(--Base-Strong, #1E2125)\",\n fontSize: \"13px\",\n fontWeight: 600,\n cursor: isComingSoon ? \"default\" : \"pointer\",\n opacity: isComingSoon ? 0.6 : 1,\n transition: \"all 0.15s ease\",\n lineHeight: 1.4,\n }}\n onMouseEnter={(e) => {\n if (!isComingSoon && !config.actionFilled) {\n e.currentTarget.style.background = \"rgba(0,0,0,0.04)\";\n }\n }}\n onMouseLeave={(e) => {\n if (!isComingSoon && !config.actionFilled) {\n e.currentTarget.style.background = \"var(--Base-White, #FFF)\";\n }\n }}\n >\n {config.actionLabel}\n </button>\n </div>\n </div>\n </div>\n );\n}\n"],"names":["IntegrationCard","providerName","description","status","logoUrl","icon","onConnect","onConfigure","isConnected","isComingSoon","statusConfig","CheckCircle2","jsx","CloudDownload","CloudOff","config","jsxs","e","Settings2"],"mappings":"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"}
|
|
@@ -1,40 +1,40 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as i, jsx as t } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
|
-
import { Settings2 as
|
|
3
|
+
import { Settings2 as x, CheckCircle2 as y, CloudDownload as b, CloudOff as h } from "lucide-react";
|
|
4
4
|
function m({
|
|
5
5
|
providerName: l,
|
|
6
6
|
description: p,
|
|
7
|
-
status:
|
|
7
|
+
status: n = "available",
|
|
8
8
|
logoUrl: s,
|
|
9
9
|
icon: c,
|
|
10
10
|
onConnect: a,
|
|
11
11
|
onConfigure: d
|
|
12
12
|
}) {
|
|
13
|
-
const
|
|
13
|
+
const u = n === "connected", o = n === "coming-soon", g = {
|
|
14
14
|
connected: {
|
|
15
15
|
label: "Connected",
|
|
16
16
|
color: "var(--Grey-White, #FFF)",
|
|
17
17
|
bgColor: "var(--Green-Primary, #00A66E)",
|
|
18
|
-
icon: /* @__PURE__ */
|
|
18
|
+
icon: /* @__PURE__ */ t(y, { size: 16, strokeWidth: 2, color: "#FFF" }),
|
|
19
19
|
actionLabel: "Disconnect",
|
|
20
20
|
actionFilled: !1
|
|
21
21
|
},
|
|
22
22
|
available: {
|
|
23
23
|
label: "Available",
|
|
24
24
|
color: "var(--Grey-Strong, #808183)",
|
|
25
|
-
icon: /* @__PURE__ */
|
|
25
|
+
icon: /* @__PURE__ */ t(b, { size: 16, strokeWidth: 2 }),
|
|
26
26
|
actionLabel: "Connect",
|
|
27
27
|
actionFilled: !0
|
|
28
28
|
},
|
|
29
29
|
"coming-soon": {
|
|
30
30
|
label: "Coming Soon",
|
|
31
31
|
color: "var(--Grey-Muted, #B2AEA8)",
|
|
32
|
-
icon: /* @__PURE__ */
|
|
32
|
+
icon: /* @__PURE__ */ t(h, { size: 16, strokeWidth: 2 }),
|
|
33
33
|
actionLabel: "Connect",
|
|
34
34
|
actionFilled: !1
|
|
35
35
|
}
|
|
36
|
-
},
|
|
37
|
-
return /* @__PURE__ */
|
|
36
|
+
}, r = g[n] || g.available;
|
|
37
|
+
return /* @__PURE__ */ i(
|
|
38
38
|
"div",
|
|
39
39
|
{
|
|
40
40
|
style: {
|
|
@@ -50,15 +50,15 @@ function m({
|
|
|
50
50
|
background: "var(--Base-White, #FFF)"
|
|
51
51
|
},
|
|
52
52
|
children: [
|
|
53
|
-
/* @__PURE__ */
|
|
54
|
-
/* @__PURE__ */
|
|
53
|
+
/* @__PURE__ */ i("div", { style: { flex: 1, width: "100%" }, children: [
|
|
54
|
+
/* @__PURE__ */ t("div", { style: { marginBottom: "4px" }, children: s ? /* @__PURE__ */ t(
|
|
55
55
|
"img",
|
|
56
56
|
{
|
|
57
57
|
src: s,
|
|
58
58
|
alt: l,
|
|
59
59
|
style: { height: "24px", objectFit: "contain" }
|
|
60
60
|
}
|
|
61
|
-
) : c ? /* @__PURE__ */
|
|
61
|
+
) : c ? /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center" }, children: c }) : /* @__PURE__ */ t(
|
|
62
62
|
"h3",
|
|
63
63
|
{
|
|
64
64
|
style: {
|
|
@@ -71,7 +71,7 @@ function m({
|
|
|
71
71
|
children: l
|
|
72
72
|
}
|
|
73
73
|
) }),
|
|
74
|
-
/* @__PURE__ */
|
|
74
|
+
/* @__PURE__ */ t(
|
|
75
75
|
"p",
|
|
76
76
|
{
|
|
77
77
|
style: {
|
|
@@ -84,7 +84,7 @@ function m({
|
|
|
84
84
|
}
|
|
85
85
|
)
|
|
86
86
|
] }),
|
|
87
|
-
/* @__PURE__ */
|
|
87
|
+
/* @__PURE__ */ i(
|
|
88
88
|
"div",
|
|
89
89
|
{
|
|
90
90
|
style: {
|
|
@@ -95,64 +95,67 @@ function m({
|
|
|
95
95
|
gap: "8px"
|
|
96
96
|
},
|
|
97
97
|
children: [
|
|
98
|
-
/* @__PURE__ */
|
|
98
|
+
/* @__PURE__ */ i(
|
|
99
99
|
"div",
|
|
100
100
|
{
|
|
101
101
|
style: {
|
|
102
102
|
display: "flex",
|
|
103
|
-
padding:
|
|
103
|
+
padding: r.bgColor ? "4px 8px 4px 6px" : "0",
|
|
104
104
|
alignItems: "center",
|
|
105
105
|
gap: "4px",
|
|
106
|
-
borderRadius:
|
|
107
|
-
background:
|
|
106
|
+
borderRadius: r.bgColor ? "16px" : "0",
|
|
107
|
+
background: r.bgColor || "transparent",
|
|
108
108
|
fontSize: "12px",
|
|
109
109
|
fontStyle: "normal",
|
|
110
110
|
fontWeight: 400,
|
|
111
111
|
lineHeight: "16px",
|
|
112
|
-
color:
|
|
112
|
+
color: r.color
|
|
113
113
|
},
|
|
114
114
|
children: [
|
|
115
|
-
|
|
116
|
-
|
|
115
|
+
r.icon,
|
|
116
|
+
r.label
|
|
117
117
|
]
|
|
118
118
|
}
|
|
119
119
|
),
|
|
120
|
-
/* @__PURE__ */
|
|
121
|
-
|
|
120
|
+
/* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
|
|
121
|
+
u && d && /* @__PURE__ */ t(
|
|
122
122
|
"button",
|
|
123
123
|
{
|
|
124
|
-
|
|
125
|
-
|
|
124
|
+
type: "button",
|
|
125
|
+
title: "Configure",
|
|
126
|
+
"aria-label": "Configure",
|
|
127
|
+
onClick: (e) => {
|
|
128
|
+
e.stopPropagation(), d();
|
|
126
129
|
},
|
|
127
130
|
style: {
|
|
128
131
|
display: "flex",
|
|
129
132
|
alignItems: "center",
|
|
130
133
|
justifyContent: "center",
|
|
131
|
-
width: "
|
|
132
|
-
height: "
|
|
133
|
-
border: "
|
|
134
|
-
background: "
|
|
134
|
+
width: "30px",
|
|
135
|
+
height: "30px",
|
|
136
|
+
border: "1px solid var(--neutral-100, #E6E6E6)",
|
|
137
|
+
background: "var(--grey-white, #FFF)",
|
|
135
138
|
color: "var(--Grey-Strong, #808183)",
|
|
136
139
|
cursor: "pointer",
|
|
137
|
-
borderRadius: "
|
|
138
|
-
transition: "background 0.15s ease"
|
|
140
|
+
borderRadius: "8px",
|
|
141
|
+
transition: "background 0.15s ease, border-color 0.15s ease, color 0.15s ease"
|
|
139
142
|
},
|
|
140
|
-
onMouseEnter: (
|
|
141
|
-
|
|
143
|
+
onMouseEnter: (e) => {
|
|
144
|
+
e.currentTarget.style.background = "var(--surface-hover, #F3F7F7)", e.currentTarget.style.borderColor = "var(--neutral-250, #BFBFBF)", e.currentTarget.style.color = "var(--Grey-Strong, #2E3236)";
|
|
142
145
|
},
|
|
143
|
-
onMouseLeave: (
|
|
144
|
-
|
|
146
|
+
onMouseLeave: (e) => {
|
|
147
|
+
e.currentTarget.style.background = "var(--grey-white, #FFF)", e.currentTarget.style.borderColor = "var(--neutral-100, #E6E6E6)", e.currentTarget.style.color = "var(--Grey-Strong, #808183)";
|
|
145
148
|
},
|
|
146
|
-
children: /* @__PURE__ */
|
|
149
|
+
children: /* @__PURE__ */ t(x, { size: 16, strokeWidth: 2 })
|
|
147
150
|
}
|
|
148
151
|
),
|
|
149
|
-
/* @__PURE__ */
|
|
152
|
+
/* @__PURE__ */ t(
|
|
150
153
|
"button",
|
|
151
154
|
{
|
|
152
|
-
onClick: (
|
|
153
|
-
|
|
155
|
+
onClick: (e) => {
|
|
156
|
+
e.stopPropagation(), a == null || a();
|
|
154
157
|
},
|
|
155
|
-
disabled:
|
|
158
|
+
disabled: o,
|
|
156
159
|
style: {
|
|
157
160
|
display: "flex",
|
|
158
161
|
height: "28px",
|
|
@@ -161,23 +164,23 @@ function m({
|
|
|
161
164
|
alignItems: "center",
|
|
162
165
|
gap: "10px",
|
|
163
166
|
borderRadius: "10px",
|
|
164
|
-
border:
|
|
165
|
-
background:
|
|
166
|
-
color:
|
|
167
|
+
border: r.actionFilled ? "1px solid transparent" : "1px solid #D9D9D9",
|
|
168
|
+
background: o ? "var(--Grey-Muted, #B2AEA8)" : r.actionFilled ? "var(--Base-Strong, #1E2125)" : "var(--Base-White, #FFF)",
|
|
169
|
+
color: r.actionFilled || o ? "#FFF" : "var(--Base-Strong, #1E2125)",
|
|
167
170
|
fontSize: "13px",
|
|
168
171
|
fontWeight: 600,
|
|
169
|
-
cursor:
|
|
170
|
-
opacity:
|
|
172
|
+
cursor: o ? "default" : "pointer",
|
|
173
|
+
opacity: o ? 0.6 : 1,
|
|
171
174
|
transition: "all 0.15s ease",
|
|
172
175
|
lineHeight: 1.4
|
|
173
176
|
},
|
|
174
|
-
onMouseEnter: (
|
|
175
|
-
!
|
|
177
|
+
onMouseEnter: (e) => {
|
|
178
|
+
!o && !r.actionFilled && (e.currentTarget.style.background = "rgba(0,0,0,0.04)");
|
|
176
179
|
},
|
|
177
|
-
onMouseLeave: (
|
|
178
|
-
!
|
|
180
|
+
onMouseLeave: (e) => {
|
|
181
|
+
!o && !r.actionFilled && (e.currentTarget.style.background = "var(--Base-White, #FFF)");
|
|
179
182
|
},
|
|
180
|
-
children:
|
|
183
|
+
children: r.actionLabel
|
|
181
184
|
}
|
|
182
185
|
)
|
|
183
186
|
] })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IntegrationCard.es.js","sources":["../src/components/layout/IntegrationCard.jsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { CheckCircle2, Settings2, CloudOff, CloudDownload } from \"lucide-react\";\n\n/**\n * IntegrationCard Component\n * Displays an integration provider card with status, logo, and configuration options\n *\n * Props:\n * - providerName string Provider display name\n * - description string Short description / subtitle\n * - status string \"available\" | \"connected\" | \"coming-soon\"\n * - logoUrl string Optional logo image URL\n * - icon ReactNode Optional custom icon/logo element\n * - onConnect function Connect/Disconnect callback\n * - onConfigure function Configure (settings) callback — shown for connected\n */\nexport default function IntegrationCard({\n providerName,\n description,\n status = \"available\",\n logoUrl,\n icon,\n onConnect,\n onConfigure,\n}) {\n const isConnected = status === \"connected\";\n const isComingSoon = status === \"coming-soon\";\n\n const statusConfig = {\n connected: {\n label: \"Connected\",\n color: \"var(--Grey-White, #FFF)\",\n bgColor: \"var(--Green-Primary, #00A66E)\",\n icon: <CheckCircle2 size={16} strokeWidth={2} color=\"#FFF\" />,\n actionLabel: \"Disconnect\",\n actionFilled: false,\n },\n available: {\n label: \"Available\",\n color: \"var(--Grey-Strong, #808183)\",\n icon: <CloudDownload size={16} strokeWidth={2} />,\n actionLabel: \"Connect\",\n actionFilled: true,\n },\n \"coming-soon\": {\n label: \"Coming Soon\",\n color: \"var(--Grey-Muted, #B2AEA8)\",\n icon: <CloudOff size={16} strokeWidth={2} />,\n actionLabel: \"Connect\",\n actionFilled: false,\n },\n };\n\n const config = statusConfig[status] || statusConfig.available;\n\n return (\n <div\n style={{\n display: \"flex\",\n width: \"317px\",\n height: \"160px\",\n padding: \"16px\",\n flexDirection: \"column\",\n alignItems: \"flex-start\",\n gap: \"10px\",\n borderRadius: \"4px\",\n border: \"1px solid #D9D9D9\",\n background: \"var(--Base-White, #FFF)\",\n }}\n >\n {/* Top: Name + Description */}\n <div style={{ flex: 1, width: \"100%\" }}>\n {/* Provider Name / Logo */}\n <div style={{ marginBottom: \"4px\" }}>\n {logoUrl ? (\n <img\n src={logoUrl}\n alt={providerName}\n style={{ height: \"24px\", objectFit: \"contain\" }}\n />\n ) : icon ? (\n <div style={{ display: \"flex\", alignItems: \"center\" }}>{icon}</div>\n ) : (\n <h3\n style={{\n fontSize: \"16px\",\n fontWeight: 700,\n color: \"var(--Base-Strong, #1E2125)\",\n margin: 0,\n lineHeight: 1.3,\n }}\n >\n {providerName}\n </h3>\n )}\n </div>\n {/* Description */}\n <p\n style={{\n fontSize: \"13px\",\n lineHeight: 1.4,\n color: \"var(--Grey-Strong, #808183)\",\n margin: 0,\n }}\n >\n {description}\n </p>\n </div>\n\n {/* Bottom: Status + Actions */}\n <div\n style={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n width: \"100%\",\n gap: \"8px\",\n }}\n >\n {/* Status label */}\n <div\n style={{\n display: \"flex\",\n padding: config.bgColor ? \"4px 8px 4px 6px\" : \"0\",\n alignItems: \"center\",\n gap: \"4px\",\n borderRadius: config.bgColor ? \"16px\" : \"0\",\n background: config.bgColor || \"transparent\",\n fontSize: \"12px\",\n fontStyle: \"normal\",\n fontWeight: 400,\n lineHeight: \"16px\",\n color: config.color,\n }}\n >\n {config.icon}\n {config.label}\n </div>\n\n {/* Action area */}\n <div style={{ display: \"flex\", alignItems: \"center\", gap: \"8px\" }}>\n {/* Settings icon for connected */}\n {isConnected && onConfigure && (\n <button\n onClick={(e) => {\n e.stopPropagation();\n onConfigure();\n }}\n style={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n width: \"32px\",\n height: \"32px\",\n border: \"none\",\n background: \"transparent\",\n color: \"var(--Grey-Strong, #808183)\",\n cursor: \"pointer\",\n borderRadius: \"4px\",\n transition: \"background 0.15s ease\",\n }}\n onMouseEnter={(e) => {\n e.currentTarget.style.background = \"rgba(0,0,0,0.04)\";\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.background = \"transparent\";\n }}\n >\n <Settings2 size={20} strokeWidth={2} />\n </button>\n )}\n\n {/* Connect / Disconnect button */}\n <button\n onClick={(e) => {\n e.stopPropagation();\n onConnect?.();\n }}\n disabled={isComingSoon}\n style={{\n display: \"flex\",\n height: \"28px\",\n padding: \"10px\",\n justifyContent: \"center\",\n alignItems: \"center\",\n gap: \"10px\",\n borderRadius: \"10px\",\n border: config.actionFilled\n ? \"1px solid transparent\"\n : \"1px solid #D9D9D9\",\n background: isComingSoon\n ? \"var(--Grey-Muted, #B2AEA8)\"\n : config.actionFilled\n ? \"var(--Base-Strong, #1E2125)\"\n : \"var(--Base-White, #FFF)\",\n color: config.actionFilled || isComingSoon\n ? \"#FFF\"\n : \"var(--Base-Strong, #1E2125)\",\n fontSize: \"13px\",\n fontWeight: 600,\n cursor: isComingSoon ? \"default\" : \"pointer\",\n opacity: isComingSoon ? 0.6 : 1,\n transition: \"all 0.15s ease\",\n lineHeight: 1.4,\n }}\n onMouseEnter={(e) => {\n if (!isComingSoon && !config.actionFilled) {\n e.currentTarget.style.background = \"rgba(0,0,0,0.04)\";\n }\n }}\n onMouseLeave={(e) => {\n if (!isComingSoon && !config.actionFilled) {\n e.currentTarget.style.background = \"var(--Base-White, #FFF)\";\n }\n }}\n >\n {config.actionLabel}\n </button>\n </div>\n </div>\n </div>\n );\n}\n"],"names":["IntegrationCard","providerName","description","status","logoUrl","icon","onConnect","onConfigure","isConnected","isComingSoon","statusConfig","CheckCircle2","jsx","CloudDownload","CloudOff","config","jsxs","e","Settings2"],"mappings":";;;AAkBA,SAAwBA,EAAgB;AAAA,EACtC,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AACF,GAAG;AACD,QAAMC,IAAcL,MAAW,aACzBM,IAAeN,MAAW,eAE1BO,IAAe;AAAA,IACnB,WAAW;AAAA,MACT,OAAO;AAAA,MACP,OAAO;AAAA,MACP,SAAS;AAAA,MACT,wBAAOC,GAAa,EAAA,MAAM,IAAI,aAAa,GAAG,OAAM,QAAO;AAAA,MAC3D,aAAa;AAAA,MACb,cAAc;AAAA,IAChB;AAAA,IACA,WAAW;AAAA,MACT,OAAO;AAAA,MACP,OAAO;AAAA,MACP,MAAO,gBAAAC,EAAAC,GAAA,EAAc,MAAM,IAAI,aAAa,GAAG;AAAA,MAC/C,aAAa;AAAA,MACb,cAAc;AAAA,IAChB;AAAA,IACA,eAAe;AAAA,MACb,OAAO;AAAA,MACP,OAAO;AAAA,MACP,MAAO,gBAAAD,EAAAE,GAAA,EAAS,MAAM,IAAI,aAAa,GAAG;AAAA,MAC1C,aAAa;AAAA,MACb,cAAc;AAAA,IAChB;AAAA,EAAA,GAGIC,IAASL,EAAaP,CAAM,KAAKO,EAAa;AAGlD,SAAA,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,KAAK;AAAA,QACL,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,YAAY;AAAA,MACd;AAAA,MAGA,UAAA;AAAA,QAAA,gBAAAA,EAAC,SAAI,OAAO,EAAE,MAAM,GAAG,OAAO,OAE5B,GAAA,UAAA;AAAA,UAAA,gBAAAJ,EAAC,SAAI,OAAO,EAAE,cAAc,SACzB,UACCR,IAAA,gBAAAQ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAKR;AAAA,cACL,KAAKH;AAAA,cACL,OAAO,EAAE,QAAQ,QAAQ,WAAW,UAAU;AAAA,YAAA;AAAA,UAE9C,IAAAI,IACD,gBAAAO,EAAA,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAa,GAAA,UAAAP,EAAA,CAAK,IAE7D,gBAAAO;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,gBACL,UAAU;AAAA,gBACV,YAAY;AAAA,gBACZ,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,YAAY;AAAA,cACd;AAAA,cAEC,UAAAX;AAAA,YAAA;AAAA,UAAA,GAGP;AAAA,UAEA,gBAAAW;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,gBACL,UAAU;AAAA,gBACV,YAAY;AAAA,gBACZ,OAAO;AAAA,gBACP,QAAQ;AAAA,cACV;AAAA,cAEC,UAAAV;AAAA,YAAA;AAAA,UACH;AAAA,QAAA,GACF;AAAA,QAGA,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,cACL,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,gBAAgB;AAAA,cAChB,OAAO;AAAA,cACP,KAAK;AAAA,YACP;AAAA,YAGA,UAAA;AAAA,cAAA,gBAAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,OAAO;AAAA,oBACL,SAAS;AAAA,oBACT,SAASD,EAAO,UAAU,oBAAoB;AAAA,oBAC9C,YAAY;AAAA,oBACZ,KAAK;AAAA,oBACL,cAAcA,EAAO,UAAU,SAAS;AAAA,oBACxC,YAAYA,EAAO,WAAW;AAAA,oBAC9B,UAAU;AAAA,oBACV,WAAW;AAAA,oBACX,YAAY;AAAA,oBACZ,YAAY;AAAA,oBACZ,OAAOA,EAAO;AAAA,kBAChB;AAAA,kBAEC,UAAA;AAAA,oBAAOA,EAAA;AAAA,oBACPA,EAAO;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACV;AAAA,cAGA,gBAAAC,EAAC,OAAI,EAAA,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,MAAA,GAEvD,UAAA;AAAA,gBAAAR,KAAeD,KACd,gBAAAK;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,SAAS,CAACK,MAAM;AACd,sBAAAA,EAAE,gBAAgB,GACNV;oBACd;AAAA,oBACA,OAAO;AAAA,sBACL,SAAS;AAAA,sBACT,YAAY;AAAA,sBACZ,gBAAgB;AAAA,sBAChB,OAAO;AAAA,sBACP,QAAQ;AAAA,sBACR,QAAQ;AAAA,sBACR,YAAY;AAAA,sBACZ,OAAO;AAAA,sBACP,QAAQ;AAAA,sBACR,cAAc;AAAA,sBACd,YAAY;AAAA,oBACd;AAAA,oBACA,cAAc,CAACU,MAAM;AACjB,sBAAAA,EAAA,cAAc,MAAM,aAAa;AAAA,oBACrC;AAAA,oBACA,cAAc,CAACA,MAAM;AACjB,sBAAAA,EAAA,cAAc,MAAM,aAAa;AAAA,oBACrC;AAAA,oBAEA,UAAC,gBAAAL,EAAAM,GAAA,EAAU,MAAM,IAAI,aAAa,GAAG;AAAA,kBAAA;AAAA,gBACvC;AAAA,gBAIF,gBAAAN;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,SAAS,CAACK,MAAM;AACd,sBAAAA,EAAE,gBAAgB,GACNX,KAAA,QAAAA;AAAA,oBACd;AAAA,oBACA,UAAUG;AAAA,oBACV,OAAO;AAAA,sBACL,SAAS;AAAA,sBACT,QAAQ;AAAA,sBACR,SAAS;AAAA,sBACT,gBAAgB;AAAA,sBAChB,YAAY;AAAA,sBACZ,KAAK;AAAA,sBACL,cAAc;AAAA,sBACd,QAAQM,EAAO,eACX,0BACA;AAAA,sBACJ,YAAYN,IACR,+BACAM,EAAO,eACP,gCACA;AAAA,sBACJ,OAAOA,EAAO,gBAAgBN,IAC1B,SACA;AAAA,sBACJ,UAAU;AAAA,sBACV,YAAY;AAAA,sBACZ,QAAQA,IAAe,YAAY;AAAA,sBACnC,SAASA,IAAe,MAAM;AAAA,sBAC9B,YAAY;AAAA,sBACZ,YAAY;AAAA,oBACd;AAAA,oBACA,cAAc,CAACQ,MAAM;AACnB,sBAAI,CAACR,KAAgB,CAACM,EAAO,iBACzBE,EAAA,cAAc,MAAM,aAAa;AAAA,oBAEvC;AAAA,oBACA,cAAc,CAACA,MAAM;AACnB,sBAAI,CAACR,KAAgB,CAACM,EAAO,iBACzBE,EAAA,cAAc,MAAM,aAAa;AAAA,oBAEvC;AAAA,oBAEC,UAAOF,EAAA;AAAA,kBAAA;AAAA,gBACV;AAAA,cAAA,GACF;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
1
|
+
{"version":3,"file":"IntegrationCard.es.js","sources":["../src/components/layout/IntegrationCard.jsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { CheckCircle2, Settings2, CloudOff, CloudDownload } from \"lucide-react\";\n\n/**\n * IntegrationCard Component\n * Displays an integration provider card with status, logo, and configuration options\n *\n * Props:\n * - providerName string Provider display name\n * - description string Short description / subtitle\n * - status string \"available\" | \"connected\" | \"coming-soon\"\n * - logoUrl string Optional logo image URL\n * - icon ReactNode Optional custom icon/logo element\n * - onConnect function Connect/Disconnect callback\n * - onConfigure function Configure (settings) callback — shown for connected\n */\nexport default function IntegrationCard({\n providerName,\n description,\n status = \"available\",\n logoUrl,\n icon,\n onConnect,\n onConfigure,\n}) {\n const isConnected = status === \"connected\";\n const isComingSoon = status === \"coming-soon\";\n\n const statusConfig = {\n connected: {\n label: \"Connected\",\n color: \"var(--Grey-White, #FFF)\",\n bgColor: \"var(--Green-Primary, #00A66E)\",\n icon: <CheckCircle2 size={16} strokeWidth={2} color=\"#FFF\" />,\n actionLabel: \"Disconnect\",\n actionFilled: false,\n },\n available: {\n label: \"Available\",\n color: \"var(--Grey-Strong, #808183)\",\n icon: <CloudDownload size={16} strokeWidth={2} />,\n actionLabel: \"Connect\",\n actionFilled: true,\n },\n \"coming-soon\": {\n label: \"Coming Soon\",\n color: \"var(--Grey-Muted, #B2AEA8)\",\n icon: <CloudOff size={16} strokeWidth={2} />,\n actionLabel: \"Connect\",\n actionFilled: false,\n },\n };\n\n const config = statusConfig[status] || statusConfig.available;\n\n return (\n <div\n style={{\n display: \"flex\",\n width: \"317px\",\n height: \"160px\",\n padding: \"16px\",\n flexDirection: \"column\",\n alignItems: \"flex-start\",\n gap: \"10px\",\n borderRadius: \"4px\",\n border: \"1px solid #D9D9D9\",\n background: \"var(--Base-White, #FFF)\",\n }}\n >\n {/* Top: Name + Description */}\n <div style={{ flex: 1, width: \"100%\" }}>\n {/* Provider Name / Logo */}\n <div style={{ marginBottom: \"4px\" }}>\n {logoUrl ? (\n <img\n src={logoUrl}\n alt={providerName}\n style={{ height: \"24px\", objectFit: \"contain\" }}\n />\n ) : icon ? (\n <div style={{ display: \"flex\", alignItems: \"center\" }}>{icon}</div>\n ) : (\n <h3\n style={{\n fontSize: \"16px\",\n fontWeight: 700,\n color: \"var(--Base-Strong, #1E2125)\",\n margin: 0,\n lineHeight: 1.3,\n }}\n >\n {providerName}\n </h3>\n )}\n </div>\n {/* Description */}\n <p\n style={{\n fontSize: \"13px\",\n lineHeight: 1.4,\n color: \"var(--Grey-Strong, #808183)\",\n margin: 0,\n }}\n >\n {description}\n </p>\n </div>\n\n {/* Bottom: Status + Actions */}\n <div\n style={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n width: \"100%\",\n gap: \"8px\",\n }}\n >\n {/* Status label */}\n <div\n style={{\n display: \"flex\",\n padding: config.bgColor ? \"4px 8px 4px 6px\" : \"0\",\n alignItems: \"center\",\n gap: \"4px\",\n borderRadius: config.bgColor ? \"16px\" : \"0\",\n background: config.bgColor || \"transparent\",\n fontSize: \"12px\",\n fontStyle: \"normal\",\n fontWeight: 400,\n lineHeight: \"16px\",\n color: config.color,\n }}\n >\n {config.icon}\n {config.label}\n </div>\n\n {/* Action area */}\n <div style={{ display: \"flex\", alignItems: \"center\", gap: \"8px\" }}>\n {/* Settings icon for connected — a bordered, clickable button with a\n native \"Configure\" tooltip on hover. */}\n {isConnected && onConfigure && (\n <button\n type=\"button\"\n title=\"Configure\"\n aria-label=\"Configure\"\n onClick={(e) => {\n e.stopPropagation();\n onConfigure();\n }}\n style={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n width: \"30px\",\n height: \"30px\",\n border: \"1px solid var(--neutral-100, #E6E6E6)\",\n background: \"var(--grey-white, #FFF)\",\n color: \"var(--Grey-Strong, #808183)\",\n cursor: \"pointer\",\n borderRadius: \"8px\",\n transition: \"background 0.15s ease, border-color 0.15s ease, color 0.15s ease\",\n }}\n onMouseEnter={(e) => {\n e.currentTarget.style.background = \"var(--surface-hover, #F3F7F7)\";\n e.currentTarget.style.borderColor = \"var(--neutral-250, #BFBFBF)\";\n e.currentTarget.style.color = \"var(--Grey-Strong, #2E3236)\";\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.background = \"var(--grey-white, #FFF)\";\n e.currentTarget.style.borderColor = \"var(--neutral-100, #E6E6E6)\";\n e.currentTarget.style.color = \"var(--Grey-Strong, #808183)\";\n }}\n >\n <Settings2 size={16} strokeWidth={2} />\n </button>\n )}\n\n {/* Connect / Disconnect button */}\n <button\n onClick={(e) => {\n e.stopPropagation();\n onConnect?.();\n }}\n disabled={isComingSoon}\n style={{\n display: \"flex\",\n height: \"28px\",\n padding: \"10px\",\n justifyContent: \"center\",\n alignItems: \"center\",\n gap: \"10px\",\n borderRadius: \"10px\",\n border: config.actionFilled\n ? \"1px solid transparent\"\n : \"1px solid #D9D9D9\",\n background: isComingSoon\n ? \"var(--Grey-Muted, #B2AEA8)\"\n : config.actionFilled\n ? \"var(--Base-Strong, #1E2125)\"\n : \"var(--Base-White, #FFF)\",\n color: config.actionFilled || isComingSoon\n ? \"#FFF\"\n : \"var(--Base-Strong, #1E2125)\",\n fontSize: \"13px\",\n fontWeight: 600,\n cursor: isComingSoon ? \"default\" : \"pointer\",\n opacity: isComingSoon ? 0.6 : 1,\n transition: \"all 0.15s ease\",\n lineHeight: 1.4,\n }}\n onMouseEnter={(e) => {\n if (!isComingSoon && !config.actionFilled) {\n e.currentTarget.style.background = \"rgba(0,0,0,0.04)\";\n }\n }}\n onMouseLeave={(e) => {\n if (!isComingSoon && !config.actionFilled) {\n e.currentTarget.style.background = \"var(--Base-White, #FFF)\";\n }\n }}\n >\n {config.actionLabel}\n </button>\n </div>\n </div>\n </div>\n );\n}\n"],"names":["IntegrationCard","providerName","description","status","logoUrl","icon","onConnect","onConfigure","isConnected","isComingSoon","statusConfig","CheckCircle2","jsx","CloudDownload","CloudOff","config","jsxs","Settings2"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -141,9 +141,13 @@ export default function IntegrationCard({
|
|
|
141
141
|
|
|
142
142
|
{/* Action area */}
|
|
143
143
|
<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
|
|
144
|
-
{/* Settings icon for connected
|
|
144
|
+
{/* Settings icon for connected — a bordered, clickable button with a
|
|
145
|
+
native "Configure" tooltip on hover. */}
|
|
145
146
|
{isConnected && onConfigure && (
|
|
146
147
|
<button
|
|
148
|
+
type="button"
|
|
149
|
+
title="Configure"
|
|
150
|
+
aria-label="Configure"
|
|
147
151
|
onClick={(e) => {
|
|
148
152
|
e.stopPropagation();
|
|
149
153
|
onConfigure();
|
|
@@ -152,23 +156,27 @@ export default function IntegrationCard({
|
|
|
152
156
|
display: "flex",
|
|
153
157
|
alignItems: "center",
|
|
154
158
|
justifyContent: "center",
|
|
155
|
-
width: "
|
|
156
|
-
height: "
|
|
157
|
-
border: "
|
|
158
|
-
background: "
|
|
159
|
+
width: "30px",
|
|
160
|
+
height: "30px",
|
|
161
|
+
border: "1px solid var(--neutral-100, #E6E6E6)",
|
|
162
|
+
background: "var(--grey-white, #FFF)",
|
|
159
163
|
color: "var(--Grey-Strong, #808183)",
|
|
160
164
|
cursor: "pointer",
|
|
161
|
-
borderRadius: "
|
|
162
|
-
transition: "background 0.15s ease",
|
|
165
|
+
borderRadius: "8px",
|
|
166
|
+
transition: "background 0.15s ease, border-color 0.15s ease, color 0.15s ease",
|
|
163
167
|
}}
|
|
164
168
|
onMouseEnter={(e) => {
|
|
165
|
-
e.currentTarget.style.background = "
|
|
169
|
+
e.currentTarget.style.background = "var(--surface-hover, #F3F7F7)";
|
|
170
|
+
e.currentTarget.style.borderColor = "var(--neutral-250, #BFBFBF)";
|
|
171
|
+
e.currentTarget.style.color = "var(--Grey-Strong, #2E3236)";
|
|
166
172
|
}}
|
|
167
173
|
onMouseLeave={(e) => {
|
|
168
|
-
e.currentTarget.style.background = "
|
|
174
|
+
e.currentTarget.style.background = "var(--grey-white, #FFF)";
|
|
175
|
+
e.currentTarget.style.borderColor = "var(--neutral-100, #E6E6E6)";
|
|
176
|
+
e.currentTarget.style.color = "var(--Grey-Strong, #808183)";
|
|
169
177
|
}}
|
|
170
178
|
>
|
|
171
|
-
<Settings2 size={
|
|
179
|
+
<Settings2 size={16} strokeWidth={2} />
|
|
172
180
|
</button>
|
|
173
181
|
)}
|
|
174
182
|
|