@cline/ui 0.1.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 (13) hide show
  1. package/ADOPTION.md +497 -0
  2. package/README.md +172 -0
  3. package/components/agent-chat/agent-chat.css +383 -0
  4. package/components/agent-chat/index.tsx +776 -0
  5. package/dist/components/agent-chat/index.d.ts +68 -0
  6. package/dist/components/agent-chat/index.d.ts.map +1 -0
  7. package/dist/components/agent-chat/index.js +278 -0
  8. package/dist/components/agent-chat/index.js.map +1 -0
  9. package/package.json +88 -0
  10. package/theme/base.css +125 -0
  11. package/theme/index.css +3 -0
  12. package/theme/theme.css +57 -0
  13. package/theme/tokens.css +137 -0
package/theme/theme.css ADDED
@@ -0,0 +1,57 @@
1
+ @custom-variant dark (&:is(.dark *));
2
+
3
+ @theme inline {
4
+ /* Register non-default typography companions for standard text utilities. */
5
+ --text-xs--letter-spacing: var(--text-xs--letter-spacing);
6
+ --text-sm--letter-spacing: var(--text-sm--letter-spacing);
7
+ --text-base--letter-spacing: var(--text-base--letter-spacing);
8
+ --text-lg--letter-spacing: var(--text-lg--letter-spacing);
9
+ --text-xl--letter-spacing: var(--text-xl--letter-spacing);
10
+ --text-2xl--letter-spacing: var(--text-2xl--letter-spacing);
11
+ --text-3xl--letter-spacing: var(--text-3xl--letter-spacing);
12
+ --text-4xl--letter-spacing: var(--text-4xl--letter-spacing);
13
+ --text-6xl--letter-spacing: var(--text-6xl--letter-spacing);
14
+
15
+ --color-background: var(--background);
16
+ --color-foreground: var(--foreground);
17
+ --color-card: var(--card);
18
+ --color-card-foreground: var(--card-foreground);
19
+ --color-popover: var(--popover);
20
+ --color-popover-foreground: var(--popover-foreground);
21
+ --color-primary: var(--primary);
22
+ --color-primary-foreground: var(--primary-foreground);
23
+ --color-primary-emphasis: var(--primary-emphasis);
24
+ --color-secondary: var(--secondary);
25
+ --color-secondary-foreground: var(--secondary-foreground);
26
+ --color-muted: var(--muted);
27
+ --color-muted-foreground: var(--muted-foreground);
28
+ --color-accent: var(--accent);
29
+ --color-accent-foreground: var(--accent-foreground);
30
+ --color-destructive: var(--destructive);
31
+ --color-destructive-foreground: var(--destructive-foreground);
32
+ --color-border: var(--border);
33
+ --color-input: var(--input);
34
+ --color-ring: var(--ring);
35
+ --color-chart-1: var(--chart-1);
36
+ --color-chart-2: var(--chart-2);
37
+ --color-chart-3: var(--chart-3);
38
+ --color-chart-4: var(--chart-4);
39
+ --color-chart-5: var(--chart-5);
40
+ --color-brand-violet: var(--brand-violet);
41
+ --color-brand-lilac: var(--brand-lilac);
42
+ --color-brand-magenta: var(--brand-magenta);
43
+ --color-brand-periwinkle: var(--brand-periwinkle);
44
+ --color-brand-cyan: var(--brand-cyan);
45
+ --radius-sm: calc(var(--radius) - 4px);
46
+ --radius-md: calc(var(--radius) - 2px);
47
+ --radius-lg: var(--radius);
48
+ --radius-xl: calc(var(--radius) + 4px);
49
+ --color-sidebar: var(--sidebar);
50
+ --color-sidebar-foreground: var(--sidebar-foreground);
51
+ --color-sidebar-primary: var(--sidebar-primary);
52
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
53
+ --color-sidebar-accent: var(--sidebar-accent);
54
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
55
+ --color-sidebar-border: var(--sidebar-border);
56
+ --color-sidebar-ring: var(--sidebar-ring);
57
+ }
package/theme/tokens.css ADDED
@@ -0,0 +1,137 @@
1
+ /*
2
+ * Default Cline web theme.
3
+ *
4
+ * Keep this file framework-neutral: variable blocks only, with no Tailwind
5
+ * directives, resets, font imports, or app-specific selectors.
6
+ */
7
+
8
+ :root {
9
+ /* Brand extensions for artwork; components should prefer semantic tokens. */
10
+ --brand-violet: oklch(0.55 0.22 293);
11
+ --primary-emphasis: oklch(0.45 0.23 293);
12
+ --brand-lilac: oklch(0.88 0.09 315);
13
+ --brand-magenta: oklch(0.75 0.15 330);
14
+ --brand-periwinkle: oklch(0.69 0.14 275);
15
+ --brand-cyan: oklch(0.87 0.07 210);
16
+
17
+ /* Standard Tailwind typography variables. Consumers provide the fonts. */
18
+ --font-sans: "Schibsted Grotesk Variable", sans-serif;
19
+ --font-mono:
20
+ "Azeret Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas,
21
+ "Liberation Mono", monospace;
22
+ --font-weight-normal: 480;
23
+ --font-weight-medium: 560;
24
+ --font-weight-semibold: 640;
25
+ --font-weight-bold: 640;
26
+ --text-xs: 12px;
27
+ --text-xs--line-height: 16px;
28
+ --text-xs--letter-spacing: 0.0025em;
29
+ --text-sm: 14px;
30
+ --text-sm--line-height: 20px;
31
+ --text-sm--letter-spacing: 0em;
32
+ --text-base: 16px;
33
+ --text-base--line-height: 24px;
34
+ --text-base--letter-spacing: 0em;
35
+ --text-lg: 18px;
36
+ --text-lg--line-height: 26px;
37
+ --text-lg--letter-spacing: -0.0025em;
38
+ --text-xl: 20px;
39
+ --text-xl--line-height: 28px;
40
+ --text-xl--letter-spacing: -0.005em;
41
+ --text-2xl: 24px;
42
+ --text-2xl--line-height: 30px;
43
+ --text-2xl--letter-spacing: -0.00625em;
44
+ --text-3xl: 28px;
45
+ --text-3xl--line-height: 36px;
46
+ --text-3xl--letter-spacing: -0.0075em;
47
+ --text-4xl: 35px;
48
+ --text-4xl--line-height: 40px;
49
+ --text-4xl--letter-spacing: -0.01em;
50
+ --text-6xl: 60px;
51
+ --text-6xl--line-height: 60px;
52
+ --text-6xl--letter-spacing: -0.025em;
53
+
54
+ /* Global browser affordances. */
55
+ --scrollbar-thumb: oklch(0.72 0.01 285);
56
+ --scrollbar-thumb-hover: oklch(0.58 0.014 285);
57
+ --selection-background: oklch(0.7 0.16 293 / 22%);
58
+
59
+ /* Standard shadcn semantic surfaces. */
60
+ --background: oklch(0.992 0.003 285);
61
+ --foreground: oklch(0.21 0.012 285);
62
+ --card: oklch(1 0 0);
63
+ --card-foreground: var(--foreground);
64
+ --popover: oklch(1 0 0);
65
+ --popover-foreground: var(--foreground);
66
+ --primary: var(--brand-violet);
67
+ --primary-foreground: oklch(0.99 0 0);
68
+ --secondary: oklch(0.965 0.006 285);
69
+ --secondary-foreground: oklch(0.28 0.012 285);
70
+ --muted: oklch(0.968 0.005 285);
71
+ --muted-foreground: oklch(0.52 0.018 285);
72
+ --accent: oklch(0.952 0.009 285);
73
+ --accent-foreground: oklch(0.25 0.014 285);
74
+ --destructive: oklch(0.58 0.23 27);
75
+ --destructive-foreground: oklch(0.985 0 0);
76
+ --border: oklch(0.91 0.008 285);
77
+ --input: oklch(0.91 0.008 285);
78
+ --ring: oklch(0.61 0.18 293);
79
+ --chart-1: var(--primary);
80
+ --chart-2: oklch(0.66 0.14 185);
81
+ --chart-3: oklch(0.49 0.11 245);
82
+ --chart-4: oklch(0.78 0.17 80);
83
+ --chart-5: oklch(0.69 0.18 35);
84
+ --radius: 0.5rem;
85
+ --sidebar: oklch(0.975 0.005 285);
86
+ --sidebar-foreground: var(--foreground);
87
+ --sidebar-primary: var(--primary);
88
+ --sidebar-primary-foreground: oklch(0.99 0 0);
89
+ --sidebar-accent: oklch(0.94 0.009 285);
90
+ --sidebar-accent-foreground: oklch(0.24 0.014 285);
91
+ --sidebar-border: oklch(0.9 0.008 285);
92
+ --sidebar-ring: oklch(0.61 0.18 293);
93
+ }
94
+
95
+ .dark {
96
+ --brand-violet: oklch(0.7 0.17 293);
97
+ --primary-emphasis: oklch(0.77 0.15 293);
98
+ --brand-lilac: oklch(0.68 0.13 315);
99
+ --brand-magenta: oklch(0.64 0.17 330);
100
+ --brand-periwinkle: oklch(0.63 0.16 275);
101
+ --brand-cyan: oklch(0.72 0.09 210);
102
+ --scrollbar-thumb: oklch(0.36 0.012 285);
103
+ --scrollbar-thumb-hover: oklch(0.46 0.016 285);
104
+ --selection-background: oklch(0.7 0.17 293 / 28%);
105
+ --background: oklch(0.17 0.012 285);
106
+ --foreground: oklch(0.96 0.008 285);
107
+ --card: oklch(0.205 0.014 285);
108
+ --card-foreground: var(--foreground);
109
+ --popover: oklch(0.215 0.014 285);
110
+ --popover-foreground: var(--foreground);
111
+ --primary: var(--brand-violet);
112
+ --primary-foreground: oklch(0.16 0.015 285);
113
+ --secondary: oklch(0.255 0.014 285);
114
+ --secondary-foreground: oklch(0.95 0.008 285);
115
+ --muted: oklch(0.255 0.012 285);
116
+ --muted-foreground: oklch(0.7 0.015 285);
117
+ --accent: oklch(0.275 0.018 285);
118
+ --accent-foreground: oklch(0.97 0.006 285);
119
+ --destructive: oklch(0.69 0.19 25);
120
+ --destructive-foreground: oklch(0.985 0 0);
121
+ --border: oklch(1 0 0 / 12%);
122
+ --input: oklch(1 0 0 / 16%);
123
+ --ring: oklch(0.7 0.15 293);
124
+ --chart-1: var(--primary);
125
+ --chart-2: oklch(0.67 0.12 185);
126
+ --chart-3: oklch(0.61 0.11 245);
127
+ --chart-4: oklch(0.72 0.14 80);
128
+ --chart-5: oklch(0.65 0.15 35);
129
+ --sidebar: oklch(0.19 0.012 285);
130
+ --sidebar-foreground: var(--foreground);
131
+ --sidebar-primary: var(--primary);
132
+ --sidebar-primary-foreground: oklch(0.16 0.015 285);
133
+ --sidebar-accent: oklch(0.265 0.016 285);
134
+ --sidebar-accent-foreground: oklch(0.97 0.006 285);
135
+ --sidebar-border: oklch(1 0 0 / 10%);
136
+ --sidebar-ring: oklch(0.7 0.15 293);
137
+ }