@trycompai/design-system 1.0.32 → 1.0.34
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.
package/README.md
CHANGED
|
@@ -101,7 +101,7 @@ The design system includes:
|
|
|
101
101
|
|
|
102
102
|
## Theme Switching
|
|
103
103
|
|
|
104
|
-
The design system uses CSS class-based theming. Dark mode is enabled by adding the `.dark` class to the `<html>` element.
|
|
104
|
+
The design system uses CSS class-based theming. Light mode is the default. Dark mode is enabled by adding the `.dark` class to the `<html>` element.
|
|
105
105
|
|
|
106
106
|
### Theme Components
|
|
107
107
|
|
|
@@ -175,7 +175,7 @@ export default function RootLayout({ children }) {
|
|
|
175
175
|
return (
|
|
176
176
|
<html lang="en" suppressHydrationWarning>
|
|
177
177
|
<body>
|
|
178
|
-
<ThemeProvider attribute="class" defaultTheme="
|
|
178
|
+
<ThemeProvider attribute="class" defaultTheme="light" enableSystem>
|
|
179
179
|
{children}
|
|
180
180
|
</ThemeProvider>
|
|
181
181
|
</body>
|
package/package.json
CHANGED
|
@@ -16,6 +16,8 @@ export interface Organization {
|
|
|
16
16
|
name: string;
|
|
17
17
|
/** Optional icon or avatar to display */
|
|
18
18
|
icon?: React.ReactNode;
|
|
19
|
+
/** Optional logo URL to display */
|
|
20
|
+
logoUrl?: string;
|
|
19
21
|
/** Optional brand color for the indicator dot (e.g., "#10b981" or "bg-green-500") */
|
|
20
22
|
color?: string;
|
|
21
23
|
}
|
|
@@ -100,10 +102,39 @@ function EmptyState({ icon, text }: { icon?: React.ReactNode; text: string }) {
|
|
|
100
102
|
}
|
|
101
103
|
|
|
102
104
|
function OrganizationItemContent({ org, maxWidth }: { org: Organization; maxWidth?: string }) {
|
|
105
|
+
const initials = org.name
|
|
106
|
+
.trim()
|
|
107
|
+
.split(/\s+/)
|
|
108
|
+
.slice(0, 2)
|
|
109
|
+
.map((part) => part[0]?.toUpperCase())
|
|
110
|
+
.join('');
|
|
111
|
+
|
|
112
|
+
const leading = org.icon ? (
|
|
113
|
+
<span className="shrink-0">{org.icon}</span>
|
|
114
|
+
) : org.logoUrl ? (
|
|
115
|
+
<img
|
|
116
|
+
src={org.logoUrl}
|
|
117
|
+
alt={`${org.name} logo`}
|
|
118
|
+
width={20}
|
|
119
|
+
height={20}
|
|
120
|
+
className="size-5 rounded-sm object-contain shrink-0"
|
|
121
|
+
loading="lazy"
|
|
122
|
+
/>
|
|
123
|
+
) : (
|
|
124
|
+
<span
|
|
125
|
+
className="size-5 rounded-full bg-muted text-muted-foreground flex items-center justify-center text-[10px] font-medium shrink-0"
|
|
126
|
+
aria-hidden
|
|
127
|
+
>
|
|
128
|
+
{initials || '?'}
|
|
129
|
+
</span>
|
|
130
|
+
);
|
|
131
|
+
|
|
103
132
|
return (
|
|
104
133
|
<>
|
|
105
|
-
{
|
|
106
|
-
<span className="truncate" style={maxWidth ? { maxWidth } : undefined}>
|
|
134
|
+
{leading}
|
|
135
|
+
<span className="truncate" style={maxWidth ? { maxWidth } : undefined}>
|
|
136
|
+
{org.name}
|
|
137
|
+
</span>
|
|
107
138
|
</>
|
|
108
139
|
);
|
|
109
140
|
}
|