chordia-ui 4.0.9 → 5.0.0

package/dist/IntegrationCard.cjs.js

@@ -1,2 +1,2 @@
-"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;
+"use strict";const e=require("react/jsx-runtime");require("react");const i=require("lucide-react");function y({providerName:l,description:x,status:n="available",logoUrl:s,icon:c,height:p="24px",onConnect:a,onConfigure:d}){const u=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:p,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:[u&&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=y;
 //# sourceMappingURL=IntegrationCard.cjs.js.map

package/dist/IntegrationCard.cjs.js.map

@@ -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 — 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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"}
+{"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  height = \"24px\",\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: height, 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","height","onConnect","onConfigure","isConnected","isComingSoon","statusConfig","CheckCircle2","jsx","CloudDownload","CloudOff","config","jsxs","e","Settings2"],"mappings":"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"}

package/dist/IntegrationCard.es.js

@@ -1,35 +1,36 @@
 import { jsxs as i, jsx as t } from "react/jsx-runtime";
 import "react";
-import { Settings2 as x, CheckCircle2 as y, CloudDownload as b, CloudOff as h } from "lucide-react";
-function m({
+import { Settings2 as y, CheckCircle2 as b, CloudDownload as h, CloudOff as F } from "lucide-react";
+function C({
   providerName: l,
   description: p,
   status: n = "available",
   logoUrl: s,
   icon: c,
+  height: u = "24px",
   onConnect: a,
   onConfigure: d
 }) {
-  const u = n === "connected", o = n === "coming-soon", g = {
+  const x = n === "connected", o = n === "coming-soon", g = {
     connected: {
       label: "Connected",
       color: "var(--Grey-White, #FFF)",
       bgColor: "var(--Green-Primary, #00A66E)",
-      icon: /* @__PURE__ */ t(y, { size: 16, strokeWidth: 2, color: "#FFF" }),
+      icon: /* @__PURE__ */ t(b, { size: 16, strokeWidth: 2, color: "#FFF" }),
       actionLabel: "Disconnect",
       actionFilled: !1
     },
     available: {
       label: "Available",
       color: "var(--Grey-Strong, #808183)",
-      icon: /* @__PURE__ */ t(b, { size: 16, strokeWidth: 2 }),
+      icon: /* @__PURE__ */ t(h, { size: 16, strokeWidth: 2 }),
       actionLabel: "Connect",
       actionFilled: !0
     },
     "coming-soon": {
       label: "Coming Soon",
       color: "var(--Grey-Muted, #B2AEA8)",
-      icon: /* @__PURE__ */ t(h, { size: 16, strokeWidth: 2 }),
+      icon: /* @__PURE__ */ t(F, { size: 16, strokeWidth: 2 }),
       actionLabel: "Connect",
       actionFilled: !1
     }
@@ -56,7 +57,7 @@ function m({
             {
               src: s,
               alt: l,
-              style: { height: "24px", objectFit: "contain" }
+              style: { height: u, objectFit: "contain" }
             }
           ) : c ? /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center" }, children: c }) : /* @__PURE__ */ t(
             "h3",
@@ -118,7 +119,7 @@ function m({
                 }
               ),
               /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-                u && d && /* @__PURE__ */ t(
+                x && d && /* @__PURE__ */ t(
                   "button",
                   {
                     type: "button",
@@ -146,7 +147,7 @@ function m({
                     onMouseLeave: (e) => {
                       e.currentTarget.style.background = "var(--grey-white, #FFF)", e.currentTarget.style.borderColor = "var(--neutral-100, #E6E6E6)", e.currentTarget.style.color = "var(--Grey-Strong, #808183)";
                     },
-                    children: /* @__PURE__ */ t(x, { size: 16, strokeWidth: 2 })
+                    children: /* @__PURE__ */ t(y, { size: 16, strokeWidth: 2 })
                   }
                 ),
                 /* @__PURE__ */ t(
@@ -192,6 +193,6 @@ function m({
   );
 }
 export {
-  m as I
+  C as I
 };
 //# sourceMappingURL=IntegrationCard.es.js.map

package/dist/IntegrationCard.es.js.map

@@ -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 — 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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"}
+{"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  height = \"24px\",\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: height, 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","height","onConnect","onConfigure","isConnected","isComingSoon","statusConfig","CheckCircle2","jsx","CloudDownload","CloudOff","config","jsxs","Settings2"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chordia-ui",
-  "version": "4.0.9",
+  "version": "5.0.0",
   "description": "Chordia Design System - UI components, tokens, and Tailwind preset",
   "type": "module",
   "main": "dist/index.cjs.js",

package/src/components/layout/IntegrationCard.jsx

@@ -22,6 +22,7 @@ export default function IntegrationCard({
   status = "available",
   logoUrl,
   icon,
+  height = "24px",
   onConnect,
   onConfigure,
 }) {
@@ -78,7 +79,7 @@ export default function IntegrationCard({
             <img
               src={logoUrl}
               alt={providerName}
-              style={{ height: "24px", objectFit: "contain" }}
+              style={{ height: height, objectFit: "contain" }}
             />
           ) : icon ? (
             <div style={{ display: "flex", alignItems: "center" }}>{icon}</div>