@deck-ui/connections 0.2.0 → 0.3.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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/connection-row.tsx +4 -4
  3. package/src/connections-view.tsx +16 -16
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deck-ui/connections",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "type": "module",
5
5
  "main": "src/index.ts",
6
6
  "types": "src/index.ts",
package/src/connection-row.tsx CHANGED
@@ -21,8 +21,8 @@ export function ConnectionRow({ connection }: ConnectionRowProps) {
21
21
  onError={() => setImgError(true)}
22
22
  />
23
23
  ) : (
24
- <div className="size-10 rounded-[10px] bg-[#e8e8e8] flex items-center justify-center shrink-0">
25
- <span className="text-sm font-semibold text-[#5d5d5d]">
24
+ <div className="size-10 rounded-[10px] bg-accent flex items-center justify-center shrink-0">
25
+ <span className="text-sm font-semibold text-muted-foreground">
26
26
  {initial}
27
27
  </span>
28
28
  </div>
@@ -30,10 +30,10 @@ export function ConnectionRow({ connection }: ConnectionRowProps) {
30
30
 
31
31
  {/* Text */}
32
32
  <div className="flex-1 min-w-0">
33
- <p className="text-[13px] font-medium text-[#0d0d0d] truncate">
33
+ <p className="text-[13px] font-medium text-foreground truncate">
34
34
  {connection.display_name}
35
35
  </p>
36
- <p className="text-[12px] text-[#8e8e8e] truncate">
36
+ <p className="text-[12px] text-muted-foreground truncate">
37
37
  {connection.email ?? connection.description}
38
38
  </p>
39
39
  </div>
package/src/connections-view.tsx CHANGED
@@ -25,16 +25,16 @@ export function ConnectionsView({
25
25
  {!loading && items.length > 0 && (
26
26
  <div className="flex items-start justify-between mb-6">
27
27
  <div>
28
- <h1 className="text-xl font-semibold text-[#0d0d0d] tracking-tight">
28
+ <h1 className="text-xl font-semibold text-foreground tracking-tight">
29
29
  Connected apps
30
30
  </h1>
31
- <p className="text-[13px] text-[#8e8e8e] mt-1">
31
+ <p className="text-[13px] text-muted-foreground mt-1">
32
32
  Services Houston can use across all your projects
33
33
  </p>
34
34
  </div>
35
35
  <button
36
36
  onClick={onManage}
37
- className="inline-flex items-center gap-1.5 h-8 px-4 rounded-full bg-[#0d0d0d] text-white text-xs font-medium hover:bg-[#424242] transition-colors duration-200 shrink-0"
37
+ className="inline-flex items-center gap-1.5 h-8 px-4 rounded-full bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors duration-200 shrink-0"
38
38
  >
39
39
  Manage connections
40
40
  <ExternalLink className="size-3" />
@@ -45,8 +45,8 @@ export function ConnectionsView({
45
45
  {/* Loading */}
46
46
  {loading && (
47
47
  <div className="flex flex-col items-center justify-center py-24 gap-3">
48
- <Loader2 className="size-5 text-[#b4b4b4] animate-spin" />
49
- <p className="text-[13px] text-[#8e8e8e]">
48
+ <Loader2 className="size-5 text-muted-foreground/60 animate-spin" />
49
+ <p className="text-[13px] text-muted-foreground">
50
50
  Checking your connections...
51
51
  </p>
52
52
  </div>
@@ -59,14 +59,14 @@ export function ConnectionsView({
59
59
  <h1 className="text-2xl font-semibold text-foreground tracking-tight">
60
60
  Connect your apps
61
61
  </h1>
62
- <p className="text-sm text-[#5d5d5d]">
62
+ <p className="text-sm text-muted-foreground">
63
63
  Set up Composio so Houston can use Gmail, Slack, Google Drive,
64
64
  and 100+ other services on your behalf.
65
65
  </p>
66
66
  </div>
67
67
  <button
68
68
  onClick={onManage}
69
- className="inline-flex items-center gap-1.5 h-9 px-4 rounded-full bg-[#0d0d0d] text-white text-sm font-medium hover:bg-[#424242] transition-colors duration-200"
69
+ className="inline-flex items-center gap-1.5 h-9 px-4 rounded-full bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 transition-colors duration-200"
70
70
  >
71
71
  Set up connections
72
72
  <ExternalLink className="size-3.5" />
@@ -81,9 +81,9 @@ export function ConnectionsView({
81
81
  <h1 className="text-2xl font-semibold text-foreground tracking-tight">
82
82
  Composio needs authentication
83
83
  </h1>
84
- <p className="text-sm text-[#5d5d5d]">
84
+ <p className="text-sm text-muted-foreground">
85
85
  Open Claude Code in your terminal and type{" "}
86
- <code className="px-1.5 py-0.5 bg-[#f4f4f4] rounded text-[13px]">
86
+ <code className="px-1.5 py-0.5 bg-muted rounded text-[13px]">
87
87
  /mcp
88
88
  </code>{" "}
89
89
  to complete the OAuth setup for Composio.
@@ -91,7 +91,7 @@ export function ConnectionsView({
91
91
  </div>
92
92
  <button
93
93
  onClick={onRetry}
94
- className="inline-flex items-center gap-1.5 h-9 px-4 rounded-full bg-[#0d0d0d] text-white text-sm font-medium hover:bg-[#424242] transition-colors duration-200"
94
+ className="inline-flex items-center gap-1.5 h-9 px-4 rounded-full bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 transition-colors duration-200"
95
95
  >
96
96
  <RefreshCw className="size-3.5" />
97
97
  Retry
@@ -106,26 +106,26 @@ export function ConnectionsView({
106
106
  <h1 className="text-2xl font-semibold text-foreground tracking-tight">
107
107
  Couldn't load connections
108
108
  </h1>
109
- <p className="text-sm text-[#5d5d5d]">
109
+ <p className="text-sm text-muted-foreground">
110
110
  Composio is set up but we couldn't fetch your connections. This
111
111
  can happen if your authentication expired or the service is
112
112
  temporarily unavailable.
113
113
  </p>
114
- <p className="text-xs text-[#8e8e8e] font-mono mt-2">
114
+ <p className="text-xs text-muted-foreground font-mono mt-2">
115
115
  {result.message}
116
116
  </p>
117
117
  </div>
118
118
  <div className="flex items-center gap-2">
119
119
  <button
120
120
  onClick={onRetry}
121
- className="inline-flex items-center gap-1.5 h-9 px-4 rounded-full bg-[#0d0d0d] text-white text-sm font-medium hover:bg-[#424242] transition-colors duration-200"
121
+ className="inline-flex items-center gap-1.5 h-9 px-4 rounded-full bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 transition-colors duration-200"
122
122
  >
123
123
  <RefreshCw className="size-3.5" />
124
124
  Retry
125
125
  </button>
126
126
  <button
127
127
  onClick={onManage}
128
- className="inline-flex items-center gap-1.5 h-9 px-4 rounded-full border border-black/15 bg-white text-[#0d0d0d] text-sm font-medium hover:bg-gray-50 transition-colors duration-200"
128
+ className="inline-flex items-center gap-1.5 h-9 px-4 rounded-full border border-border bg-white text-foreground text-sm font-medium hover:bg-secondary transition-colors duration-200"
129
129
  >
130
130
  Reconnect
131
131
  <ExternalLink className="size-3.5" />
@@ -141,14 +141,14 @@ export function ConnectionsView({
141
141
  <h1 className="text-2xl font-semibold text-foreground tracking-tight">
142
142
  No apps connected yet
143
143
  </h1>
144
- <p className="text-sm text-[#5d5d5d]">
144
+ <p className="text-sm text-muted-foreground">
145
145
  Connect Gmail, Slack, Google Drive, and 100+ other services so
146
146
  Houston can use them across all your projects.
147
147
  </p>
148
148
  </div>
149
149
  <button
150
150
  onClick={onManage}
151
- className="inline-flex items-center gap-1.5 h-9 px-4 rounded-full bg-[#0d0d0d] text-white text-sm font-medium hover:bg-[#424242] transition-colors duration-200"
151
+ className="inline-flex items-center gap-1.5 h-9 px-4 rounded-full bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 transition-colors duration-200"
152
152
  >
153
153
  Add a connection
154
154
  <ExternalLink className="size-3.5" />