@texturehq/edges 1.0.0 → 1.0.2
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/dist/components.manifest.json +231 -2
- package/dist/generated/tailwind-tokens-dark.css +2 -1
- package/dist/generated/tailwind-tokens-light.css +2 -1
- package/dist/index.cjs +68 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +30 -854
- package/dist/index.d.ts +30 -854
- package/dist/index.js +68 -5
- package/dist/index.js.map +1 -1
- package/dist/server-DmvMh5XJ.d.cts +933 -0
- package/dist/server-DmvMh5XJ.d.ts +933 -0
- package/dist/server.cjs +66 -0
- package/dist/server.cjs.map +1 -0
- package/dist/server.d.cts +7 -0
- package/dist/server.d.ts +7 -0
- package/dist/server.js +66 -0
- package/dist/server.js.map +1 -0
- package/dist/styles.css +243 -4
- package/package.json +11 -2
- package/scripts/copy-assets.js +48 -0
- package/scripts/validate-tokens.js +1 -0
- package/templates/claude-rules/claude.md +1 -1
- package/templates/cursor-rules/edges-usage.mdc +1 -1
|
@@ -0,0 +1,933 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React$1 from 'react';
|
|
3
|
+
import React__default, { ReactNode } from 'react';
|
|
4
|
+
import * as _phosphor_icons_react from '@phosphor-icons/react';
|
|
5
|
+
import { DateValue, DateFieldProps as DateFieldProps$1, ValidationResult, MeterProps as MeterProps$1 } from 'react-aria-components';
|
|
6
|
+
import { ViewState } from 'react-map-gl';
|
|
7
|
+
import * as d3_scale from 'd3-scale';
|
|
8
|
+
import { ScaleTime, ScaleLinear } from 'd3-scale';
|
|
9
|
+
|
|
10
|
+
declare const iconMapping: {
|
|
11
|
+
readonly AppWindow: _phosphor_icons_react.Icon;
|
|
12
|
+
readonly ArrowCircleUp: _phosphor_icons_react.Icon;
|
|
13
|
+
readonly ArrowDown: _phosphor_icons_react.Icon;
|
|
14
|
+
readonly ArrowLeft: _phosphor_icons_react.Icon;
|
|
15
|
+
readonly ArrowLineLeft: _phosphor_icons_react.Icon;
|
|
16
|
+
readonly ArrowRight: _phosphor_icons_react.Icon;
|
|
17
|
+
readonly ArrowSquareOut: _phosphor_icons_react.Icon;
|
|
18
|
+
readonly ArrowUp: _phosphor_icons_react.Icon;
|
|
19
|
+
readonly ArrowsClockwise: _phosphor_icons_react.Icon;
|
|
20
|
+
readonly BatteryCharging: _phosphor_icons_react.Icon;
|
|
21
|
+
readonly BatteryEmpty: _phosphor_icons_react.Icon;
|
|
22
|
+
readonly BatteryFull: _phosphor_icons_react.Icon;
|
|
23
|
+
readonly BatteryHigh: _phosphor_icons_react.Icon;
|
|
24
|
+
readonly BatteryLow: _phosphor_icons_react.Icon;
|
|
25
|
+
readonly BatteryMedium: _phosphor_icons_react.Icon;
|
|
26
|
+
readonly BatteryWarning: _phosphor_icons_react.Icon;
|
|
27
|
+
readonly BookOpen: _phosphor_icons_react.Icon;
|
|
28
|
+
readonly BookmarkSimple: _phosphor_icons_react.Icon;
|
|
29
|
+
readonly BracketsCurly: _phosphor_icons_react.Icon;
|
|
30
|
+
readonly Broadcast: _phosphor_icons_react.Icon;
|
|
31
|
+
readonly Buildings: _phosphor_icons_react.Icon;
|
|
32
|
+
readonly CalendarBlank: _phosphor_icons_react.Icon;
|
|
33
|
+
readonly CaretDown: _phosphor_icons_react.Icon;
|
|
34
|
+
readonly CaretLeft: _phosphor_icons_react.Icon;
|
|
35
|
+
readonly CaretRight: _phosphor_icons_react.Icon;
|
|
36
|
+
readonly CaretUp: _phosphor_icons_react.Icon;
|
|
37
|
+
readonly CarSimple: _phosphor_icons_react.Icon;
|
|
38
|
+
readonly ChargingStation: _phosphor_icons_react.Icon;
|
|
39
|
+
readonly ChartBar: _phosphor_icons_react.Icon;
|
|
40
|
+
readonly ChartLine: _phosphor_icons_react.Icon;
|
|
41
|
+
readonly ChartLineUp: _phosphor_icons_react.Icon;
|
|
42
|
+
readonly Check: _phosphor_icons_react.Icon;
|
|
43
|
+
readonly CheckCircle: _phosphor_icons_react.Icon;
|
|
44
|
+
readonly CheckSquare: _phosphor_icons_react.Icon;
|
|
45
|
+
readonly Circle: _phosphor_icons_react.Icon;
|
|
46
|
+
readonly CircleDashed: _phosphor_icons_react.Icon;
|
|
47
|
+
readonly CircleNotch: _phosphor_icons_react.Icon;
|
|
48
|
+
readonly ClipboardText: _phosphor_icons_react.Icon;
|
|
49
|
+
readonly ClockCountdown: _phosphor_icons_react.Icon;
|
|
50
|
+
readonly Cloud: _phosphor_icons_react.Icon;
|
|
51
|
+
readonly CloudArrowDown: _phosphor_icons_react.Icon;
|
|
52
|
+
readonly CloudFog: _phosphor_icons_react.Icon;
|
|
53
|
+
readonly CloudLightning: _phosphor_icons_react.Icon;
|
|
54
|
+
readonly CloudRain: _phosphor_icons_react.Icon;
|
|
55
|
+
readonly CloudSnow: _phosphor_icons_react.Icon;
|
|
56
|
+
readonly CloudSun: _phosphor_icons_react.Icon;
|
|
57
|
+
readonly Code: _phosphor_icons_react.Icon;
|
|
58
|
+
readonly Columns: _phosphor_icons_react.Icon;
|
|
59
|
+
readonly Copy: _phosphor_icons_react.Icon;
|
|
60
|
+
readonly Cursor: _phosphor_icons_react.Icon;
|
|
61
|
+
readonly Database: _phosphor_icons_react.Icon;
|
|
62
|
+
readonly DotsSix: _phosphor_icons_react.Icon;
|
|
63
|
+
readonly DotsThree: _phosphor_icons_react.Icon;
|
|
64
|
+
readonly DownloadSimple: _phosphor_icons_react.Icon;
|
|
65
|
+
readonly EnvelopeSimple: _phosphor_icons_react.Icon;
|
|
66
|
+
readonly Eye: _phosphor_icons_react.Icon;
|
|
67
|
+
readonly EyeClosed: _phosphor_icons_react.Icon;
|
|
68
|
+
readonly EyeSlash: _phosphor_icons_react.Icon;
|
|
69
|
+
readonly Export: _phosphor_icons_react.Icon;
|
|
70
|
+
readonly FireSimple: _phosphor_icons_react.Icon;
|
|
71
|
+
readonly Flag: _phosphor_icons_react.Icon;
|
|
72
|
+
readonly Gauge: _phosphor_icons_react.Icon;
|
|
73
|
+
readonly GearSix: _phosphor_icons_react.Icon;
|
|
74
|
+
readonly GitBranch: _phosphor_icons_react.Icon;
|
|
75
|
+
readonly HandPointing: _phosphor_icons_react.Icon;
|
|
76
|
+
readonly Handshake: _phosphor_icons_react.Icon;
|
|
77
|
+
readonly Info: _phosphor_icons_react.Icon;
|
|
78
|
+
readonly IntersectSquare: _phosphor_icons_react.Icon;
|
|
79
|
+
readonly Lightning: _phosphor_icons_react.Icon;
|
|
80
|
+
readonly LightningSlash: _phosphor_icons_react.Icon;
|
|
81
|
+
readonly List: _phosphor_icons_react.Icon;
|
|
82
|
+
readonly ListBullets: _phosphor_icons_react.Icon;
|
|
83
|
+
readonly ListNumbers: _phosphor_icons_react.Icon;
|
|
84
|
+
readonly Lock: _phosphor_icons_react.Icon;
|
|
85
|
+
readonly MagnifyingGlass: _phosphor_icons_react.Icon;
|
|
86
|
+
readonly MapPin: _phosphor_icons_react.Icon;
|
|
87
|
+
readonly MapPinArea: _phosphor_icons_react.Icon;
|
|
88
|
+
readonly MaskHappy: _phosphor_icons_react.Icon;
|
|
89
|
+
readonly Moon: _phosphor_icons_react.Icon;
|
|
90
|
+
readonly PaperPlaneRight: _phosphor_icons_react.Icon;
|
|
91
|
+
readonly PaperPlaneTilt: _phosphor_icons_react.Icon;
|
|
92
|
+
readonly PaperclipHorizontal: _phosphor_icons_react.Icon;
|
|
93
|
+
readonly PencilSimple: _phosphor_icons_react.Icon;
|
|
94
|
+
readonly Plugs: _phosphor_icons_react.Icon;
|
|
95
|
+
readonly PlugsConnected: _phosphor_icons_react.Icon;
|
|
96
|
+
readonly Plus: _phosphor_icons_react.Icon;
|
|
97
|
+
readonly Power: _phosphor_icons_react.Icon;
|
|
98
|
+
readonly Pulse: _phosphor_icons_react.Icon;
|
|
99
|
+
readonly Question: _phosphor_icons_react.Icon;
|
|
100
|
+
readonly Repeat: _phosphor_icons_react.Icon;
|
|
101
|
+
readonly Rocket: _phosphor_icons_react.Icon;
|
|
102
|
+
readonly ShareNetwork: _phosphor_icons_react.Icon;
|
|
103
|
+
readonly ShieldCheck: _phosphor_icons_react.Icon;
|
|
104
|
+
readonly SignOut: _phosphor_icons_react.Icon;
|
|
105
|
+
readonly SlackLogo: _phosphor_icons_react.Icon;
|
|
106
|
+
readonly Sliders: _phosphor_icons_react.Icon;
|
|
107
|
+
readonly SlidersHorizontal: _phosphor_icons_react.Icon;
|
|
108
|
+
readonly Snowflake: _phosphor_icons_react.Icon;
|
|
109
|
+
readonly SolarPanel: _phosphor_icons_react.Icon;
|
|
110
|
+
readonly Square: _phosphor_icons_react.Icon;
|
|
111
|
+
readonly SquaresFour: _phosphor_icons_react.Icon;
|
|
112
|
+
readonly Stack: _phosphor_icons_react.Icon;
|
|
113
|
+
readonly Sun: _phosphor_icons_react.Icon;
|
|
114
|
+
readonly Terminal: _phosphor_icons_react.Icon;
|
|
115
|
+
readonly ThermometerCold: _phosphor_icons_react.Icon;
|
|
116
|
+
readonly ThermometerHot: _phosphor_icons_react.Icon;
|
|
117
|
+
readonly ThermometerSimple: _phosphor_icons_react.Icon;
|
|
118
|
+
readonly Trash: _phosphor_icons_react.Icon;
|
|
119
|
+
readonly TreeEvergreen: _phosphor_icons_react.Icon;
|
|
120
|
+
readonly User: _phosphor_icons_react.Icon;
|
|
121
|
+
readonly UserCircle: _phosphor_icons_react.Icon;
|
|
122
|
+
readonly UserPlus: _phosphor_icons_react.Icon;
|
|
123
|
+
readonly Users: _phosphor_icons_react.Icon;
|
|
124
|
+
readonly UsersFour: _phosphor_icons_react.Icon;
|
|
125
|
+
readonly Warning: _phosphor_icons_react.Icon;
|
|
126
|
+
readonly WarningCircle: _phosphor_icons_react.Icon;
|
|
127
|
+
readonly WebhooksLogo: _phosphor_icons_react.Icon;
|
|
128
|
+
readonly Wind: _phosphor_icons_react.Icon;
|
|
129
|
+
readonly X: _phosphor_icons_react.Icon;
|
|
130
|
+
readonly TextureMenuLight: () => react_jsx_runtime.JSX.Element;
|
|
131
|
+
readonly TextureMenuDark: () => react_jsx_runtime.JSX.Element;
|
|
132
|
+
readonly WaveSine: _phosphor_icons_react.Icon;
|
|
133
|
+
};
|
|
134
|
+
type IconName = keyof typeof iconMapping;
|
|
135
|
+
type IconVariant = "default" | "container" | "brand";
|
|
136
|
+
interface ExtendedIconProps {
|
|
137
|
+
name: IconName;
|
|
138
|
+
size?: number;
|
|
139
|
+
color?: string;
|
|
140
|
+
weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone";
|
|
141
|
+
className?: string;
|
|
142
|
+
title?: string;
|
|
143
|
+
ariaLabel?: string;
|
|
144
|
+
grow?: boolean;
|
|
145
|
+
variant?: IconVariant;
|
|
146
|
+
rounded?: boolean;
|
|
147
|
+
bgColor?: string;
|
|
148
|
+
[key: string]: unknown;
|
|
149
|
+
}
|
|
150
|
+
declare const Icon: React$1.MemoExoticComponent<({ name, size, color, weight, className, title, ariaLabel, grow, variant, rounded, bgColor, ...props }: ExtendedIconProps) => react_jsx_runtime.JSX.Element | null>;
|
|
151
|
+
|
|
152
|
+
interface ActionItem {
|
|
153
|
+
/**
|
|
154
|
+
* Unique identifier for the action
|
|
155
|
+
*/
|
|
156
|
+
id: number | string;
|
|
157
|
+
/**
|
|
158
|
+
* Display name for the action
|
|
159
|
+
*/
|
|
160
|
+
name: string;
|
|
161
|
+
/**
|
|
162
|
+
* Visual variant of the action
|
|
163
|
+
*/
|
|
164
|
+
variant?: "default" | "destructive";
|
|
165
|
+
/**
|
|
166
|
+
* Icon to display with the action
|
|
167
|
+
*/
|
|
168
|
+
iconName?: IconName;
|
|
169
|
+
/**
|
|
170
|
+
* Whether the action is disabled
|
|
171
|
+
*/
|
|
172
|
+
disabled?: boolean;
|
|
173
|
+
/**
|
|
174
|
+
* Handler for when the action is selected
|
|
175
|
+
*/
|
|
176
|
+
onAction?: () => void;
|
|
177
|
+
/**
|
|
178
|
+
* Test ID for testing
|
|
179
|
+
*/
|
|
180
|
+
testId?: string;
|
|
181
|
+
}
|
|
182
|
+
interface ActionMenuProps {
|
|
183
|
+
/**
|
|
184
|
+
* List of actions to display
|
|
185
|
+
*/
|
|
186
|
+
items: ActionItem[];
|
|
187
|
+
/**
|
|
188
|
+
* Trigger button component
|
|
189
|
+
*/
|
|
190
|
+
children: ReactNode;
|
|
191
|
+
/**
|
|
192
|
+
* Alignment of the popover
|
|
193
|
+
* @default "left"
|
|
194
|
+
*/
|
|
195
|
+
align?: "left" | "right";
|
|
196
|
+
/**
|
|
197
|
+
* Size of menu items
|
|
198
|
+
* @default "md"
|
|
199
|
+
*/
|
|
200
|
+
size?: "sm" | "md";
|
|
201
|
+
/**
|
|
202
|
+
* Text alignment within menu items
|
|
203
|
+
* @default "left"
|
|
204
|
+
*/
|
|
205
|
+
textAlign?: "left" | "right";
|
|
206
|
+
/**
|
|
207
|
+
* Additional CSS classes
|
|
208
|
+
*/
|
|
209
|
+
className?: string;
|
|
210
|
+
/**
|
|
211
|
+
* Global action handler (called if item doesn't have its own onAction)
|
|
212
|
+
*/
|
|
213
|
+
onAction?: (item: ActionItem) => void;
|
|
214
|
+
}
|
|
215
|
+
/**
|
|
216
|
+
* ActionMenu
|
|
217
|
+
*
|
|
218
|
+
* A dropdown menu for actions, typically triggered by a button.
|
|
219
|
+
* Supports icons, destructive actions, and flexible alignment.
|
|
220
|
+
*/
|
|
221
|
+
declare function ActionMenu({ children, items, className, align, textAlign, size, onAction, }: ActionMenuProps): react_jsx_runtime.JSX.Element;
|
|
222
|
+
|
|
223
|
+
type SideNavItem = {
|
|
224
|
+
id: string;
|
|
225
|
+
label: string;
|
|
226
|
+
href?: string;
|
|
227
|
+
icon?: React$1.ReactNode;
|
|
228
|
+
isActive?: boolean;
|
|
229
|
+
isExpanded?: boolean;
|
|
230
|
+
children?: SideNavItem[];
|
|
231
|
+
};
|
|
232
|
+
type SideNavProps = {
|
|
233
|
+
topItems?: SideNavItem[];
|
|
234
|
+
bottomItems?: SideNavItem[];
|
|
235
|
+
logo?: React$1.ReactNode;
|
|
236
|
+
showLogo?: boolean;
|
|
237
|
+
linkComponent?: React$1.ElementType;
|
|
238
|
+
className?: string;
|
|
239
|
+
mobileMenuId?: string;
|
|
240
|
+
sidebarCollapseId?: string;
|
|
241
|
+
};
|
|
242
|
+
/**
|
|
243
|
+
* Isomorphic SideNav component
|
|
244
|
+
* Works in both server and client components with CSS-only interactions
|
|
245
|
+
*/
|
|
246
|
+
declare const SideNav: React$1.FC<SideNavProps>;
|
|
247
|
+
|
|
248
|
+
type TopNavProps = {
|
|
249
|
+
rightContent?: React$1.ReactNode;
|
|
250
|
+
showMobileMenu?: boolean;
|
|
251
|
+
avatar?: React$1.ReactNode;
|
|
252
|
+
showColorModeSwitcher?: boolean;
|
|
253
|
+
toggleTheme?: () => void;
|
|
254
|
+
isDarkThemeEnabled?: boolean;
|
|
255
|
+
actions?: React$1.ReactNode;
|
|
256
|
+
className?: string;
|
|
257
|
+
mobileMenuId?: string;
|
|
258
|
+
};
|
|
259
|
+
/**
|
|
260
|
+
* Isomorphic TopNav component
|
|
261
|
+
* Works in both server and client components
|
|
262
|
+
*/
|
|
263
|
+
declare const TopNav: React$1.FC<TopNavProps>;
|
|
264
|
+
|
|
265
|
+
/** Layout options for the AppShell */
|
|
266
|
+
type AppShellProps = {
|
|
267
|
+
/** Structured nav for the left rail */
|
|
268
|
+
sideNav: Omit<SideNavProps, "mobileMenuId" | "sidebarCollapseId">;
|
|
269
|
+
/** Optional top bar slots & options */
|
|
270
|
+
topNav?: Pick<TopNavProps, "rightContent" | "showMobileMenu" | "avatar" | "showColorModeSwitcher" | "toggleTheme" | "isDarkThemeEnabled" | "actions" | "className">;
|
|
271
|
+
/** Main page content */
|
|
272
|
+
children: React__default.ReactNode;
|
|
273
|
+
/** Layout knobs */
|
|
274
|
+
contentPaddingX?: string;
|
|
275
|
+
contentPaddingY?: string;
|
|
276
|
+
showSidebarBorder?: boolean;
|
|
277
|
+
mainClassName?: string;
|
|
278
|
+
/** Optional: Enable JavaScript progressive enhancements */
|
|
279
|
+
enableJsEnhancements?: boolean;
|
|
280
|
+
};
|
|
281
|
+
/**
|
|
282
|
+
* Isomorphic AppShell component that works as both server and client component
|
|
283
|
+
* Uses CSS-only interactions by default for full SSR compatibility
|
|
284
|
+
* Can be progressively enhanced with JavaScript when enableJsEnhancements is true
|
|
285
|
+
*/
|
|
286
|
+
declare function AppShell({ sideNav, topNav, children, contentPaddingX, contentPaddingY, showSidebarBorder, mainClassName, enableJsEnhancements, }: AppShellProps): react_jsx_runtime.JSX.Element;
|
|
287
|
+
|
|
288
|
+
interface AvatarProps {
|
|
289
|
+
/**
|
|
290
|
+
* URL of the avatar image
|
|
291
|
+
*/
|
|
292
|
+
src?: string;
|
|
293
|
+
/**
|
|
294
|
+
* Alternative text for the image
|
|
295
|
+
*/
|
|
296
|
+
alt?: string;
|
|
297
|
+
/**
|
|
298
|
+
* First name for generating initials
|
|
299
|
+
*/
|
|
300
|
+
firstName?: string;
|
|
301
|
+
/**
|
|
302
|
+
* Last name for generating initials
|
|
303
|
+
*/
|
|
304
|
+
lastName?: string;
|
|
305
|
+
/**
|
|
306
|
+
* Full name (used as fallback for alt text)
|
|
307
|
+
*/
|
|
308
|
+
fullName?: string;
|
|
309
|
+
/**
|
|
310
|
+
* Click handler
|
|
311
|
+
*/
|
|
312
|
+
onClick?: () => void;
|
|
313
|
+
/**
|
|
314
|
+
* Size of the avatar
|
|
315
|
+
* @default "md"
|
|
316
|
+
*/
|
|
317
|
+
size?: "xs" | "sm" | "md" | "lg" | "xl";
|
|
318
|
+
/**
|
|
319
|
+
* Shape of the avatar
|
|
320
|
+
* @default "circle"
|
|
321
|
+
*/
|
|
322
|
+
shape?: "circle" | "square";
|
|
323
|
+
/**
|
|
324
|
+
* Visual variant
|
|
325
|
+
* @default "user"
|
|
326
|
+
*/
|
|
327
|
+
variant?: "user" | "team" | "organization";
|
|
328
|
+
/**
|
|
329
|
+
* Additional CSS classes
|
|
330
|
+
*/
|
|
331
|
+
className?: string;
|
|
332
|
+
/**
|
|
333
|
+
* Status indicator
|
|
334
|
+
*/
|
|
335
|
+
status?: "online" | "offline" | "away" | "busy";
|
|
336
|
+
/**
|
|
337
|
+
* Whether to show a border
|
|
338
|
+
* @default false
|
|
339
|
+
*/
|
|
340
|
+
bordered?: boolean;
|
|
341
|
+
}
|
|
342
|
+
/**
|
|
343
|
+
* Avatar
|
|
344
|
+
*
|
|
345
|
+
* Display user, team, or organization avatars with support for images,
|
|
346
|
+
* initials, and fallback icons. Includes optional status indicators.
|
|
347
|
+
*/
|
|
348
|
+
declare function Avatar({ src, alt, firstName, lastName, fullName, onClick, size, shape, variant, className, status, bordered, }: AvatarProps): react_jsx_runtime.JSX.Element;
|
|
349
|
+
|
|
350
|
+
interface BadgeProps {
|
|
351
|
+
/** The content to display inside the badge */
|
|
352
|
+
children: React__default.ReactNode;
|
|
353
|
+
/** Visual variant of the badge */
|
|
354
|
+
variant?: "default" | "success" | "error" | "warning" | "info" | "primary" | "secondary" | "neutral";
|
|
355
|
+
/** Size of the badge */
|
|
356
|
+
size?: "sm" | "md" | "lg";
|
|
357
|
+
/** Shape of the badge */
|
|
358
|
+
shape?: "pill" | "rounded" | "square";
|
|
359
|
+
/** Whether to show a dot indicator */
|
|
360
|
+
dot?: boolean;
|
|
361
|
+
/** Position of the dot */
|
|
362
|
+
dotPosition?: "left" | "right";
|
|
363
|
+
/** Additional CSS classes */
|
|
364
|
+
className?: string;
|
|
365
|
+
}
|
|
366
|
+
/**
|
|
367
|
+
* Badge
|
|
368
|
+
*
|
|
369
|
+
* A non-interactive label for displaying status, counts, or categories.
|
|
370
|
+
* Use for read-only indicators. For interactive elements, use Chip instead.
|
|
371
|
+
*/
|
|
372
|
+
declare function Badge({ children, variant, size, shape, dot, dotPosition, className, }: BadgeProps): react_jsx_runtime.JSX.Element;
|
|
373
|
+
|
|
374
|
+
/**
|
|
375
|
+
* Card
|
|
376
|
+
*
|
|
377
|
+
* Surface container with optional heading and actions.
|
|
378
|
+
*/
|
|
379
|
+
interface CardProps {
|
|
380
|
+
heading?: React__default.ReactNode;
|
|
381
|
+
upperRightText?: React__default.ReactNode;
|
|
382
|
+
withPadding?: boolean;
|
|
383
|
+
isGhost?: boolean;
|
|
384
|
+
children?: React__default.ReactNode;
|
|
385
|
+
className?: string;
|
|
386
|
+
isLoading?: boolean;
|
|
387
|
+
}
|
|
388
|
+
declare const Card: React__default.FC<CardProps>;
|
|
389
|
+
|
|
390
|
+
type CodeLanguage = "json" | "javascript" | "typescript" | "html" | "css" | "markdown" | "yaml" | "xml" | "python" | "sql";
|
|
391
|
+
type CodeTheme = "github" | "github_dark";
|
|
392
|
+
interface CodeEditorProps {
|
|
393
|
+
/**
|
|
394
|
+
* The code content to display
|
|
395
|
+
*/
|
|
396
|
+
value: string;
|
|
397
|
+
/**
|
|
398
|
+
* Whether the editor is read-only
|
|
399
|
+
*/
|
|
400
|
+
readOnly?: boolean;
|
|
401
|
+
/**
|
|
402
|
+
* Callback when the content changes
|
|
403
|
+
*/
|
|
404
|
+
onChange?: (value: string) => void;
|
|
405
|
+
/**
|
|
406
|
+
* The programming language mode
|
|
407
|
+
* @default "json"
|
|
408
|
+
*/
|
|
409
|
+
language?: CodeLanguage;
|
|
410
|
+
/**
|
|
411
|
+
* The editor theme
|
|
412
|
+
* @default "github_dark"
|
|
413
|
+
*/
|
|
414
|
+
theme?: CodeTheme;
|
|
415
|
+
/**
|
|
416
|
+
* The height of the editor. If not provided, height will be calculated based on content.
|
|
417
|
+
*/
|
|
418
|
+
height?: string;
|
|
419
|
+
/**
|
|
420
|
+
* The width of the editor
|
|
421
|
+
* @default "100%"
|
|
422
|
+
*/
|
|
423
|
+
width?: string;
|
|
424
|
+
/**
|
|
425
|
+
* Additional className to apply
|
|
426
|
+
*/
|
|
427
|
+
className?: string;
|
|
428
|
+
/**
|
|
429
|
+
* Line height in pixels for auto-height calculation
|
|
430
|
+
* @default 19
|
|
431
|
+
*/
|
|
432
|
+
lineHeight?: number;
|
|
433
|
+
/**
|
|
434
|
+
* Minimum number of lines to show when auto-sizing
|
|
435
|
+
* @default 3
|
|
436
|
+
*/
|
|
437
|
+
minLines?: number;
|
|
438
|
+
/**
|
|
439
|
+
* Maximum number of lines to show when auto-sizing
|
|
440
|
+
* @default 50
|
|
441
|
+
*/
|
|
442
|
+
maxLines?: number;
|
|
443
|
+
/**
|
|
444
|
+
* Whether to show line numbers
|
|
445
|
+
* @default true
|
|
446
|
+
*/
|
|
447
|
+
showLineNumbers?: boolean;
|
|
448
|
+
/**
|
|
449
|
+
* Whether to show the gutter
|
|
450
|
+
* @default true
|
|
451
|
+
*/
|
|
452
|
+
showGutter?: boolean;
|
|
453
|
+
/**
|
|
454
|
+
* Font size for the editor
|
|
455
|
+
* @default 14
|
|
456
|
+
*/
|
|
457
|
+
fontSize?: number;
|
|
458
|
+
/**
|
|
459
|
+
* Whether to wrap long lines
|
|
460
|
+
* @default false
|
|
461
|
+
*/
|
|
462
|
+
wrapEnabled?: boolean;
|
|
463
|
+
}
|
|
464
|
+
/**
|
|
465
|
+
* CodeEditor
|
|
466
|
+
*
|
|
467
|
+
* A code editor component with syntax highlighting and various language support.
|
|
468
|
+
* Built on top of Ace Editor.
|
|
469
|
+
*/
|
|
470
|
+
declare function CodeEditor({ value, readOnly, onChange, language, theme, height, width, className, lineHeight, minLines, maxLines, showLineNumbers, showGutter, fontSize, wrapEnabled, }: CodeEditorProps): react_jsx_runtime.JSX.Element;
|
|
471
|
+
|
|
472
|
+
type YFormatType = "number" | "percent" | "kWh" | "kW" | "amperes" | "temperature" | "percentageChange" | "decimal" | "currency" | "scientific" | "integer" | "logarithmic" | "timeDuration" | "compact" | "si" | "bytes" | "rate" | "ordinal" | "date" | "largeCurrency" | "coordinates" | "ranked";
|
|
473
|
+
interface TooltipData {
|
|
474
|
+
xValue: Date;
|
|
475
|
+
series: TooltipSeries[];
|
|
476
|
+
x: number;
|
|
477
|
+
y: number;
|
|
478
|
+
position: "left" | "right";
|
|
479
|
+
}
|
|
480
|
+
interface TooltipSeries {
|
|
481
|
+
label: string;
|
|
482
|
+
value: number;
|
|
483
|
+
color: string;
|
|
484
|
+
type?: "area" | "line" | "bar";
|
|
485
|
+
}
|
|
486
|
+
interface ChartContextType {
|
|
487
|
+
xScale: ScaleTime<number, number>;
|
|
488
|
+
yScale: ScaleLinear<number, number>;
|
|
489
|
+
width: number;
|
|
490
|
+
height: number;
|
|
491
|
+
yFormatType: YFormatType;
|
|
492
|
+
animationSettings: {
|
|
493
|
+
duration: number;
|
|
494
|
+
ease: string;
|
|
495
|
+
};
|
|
496
|
+
tooltip: {
|
|
497
|
+
data: TooltipData | null;
|
|
498
|
+
show: (data: TooltipData) => void;
|
|
499
|
+
hide: () => void;
|
|
500
|
+
};
|
|
501
|
+
}
|
|
502
|
+
declare const ChartContext: React$1.Context<ChartContextType | null>;
|
|
503
|
+
|
|
504
|
+
declare const useChartContext: () => ChartContextType;
|
|
505
|
+
|
|
506
|
+
interface BaseDataPoint {
|
|
507
|
+
xValue: Date;
|
|
508
|
+
yValue: number;
|
|
509
|
+
category?: string;
|
|
510
|
+
}
|
|
511
|
+
interface ChartMargin {
|
|
512
|
+
top: number;
|
|
513
|
+
right: number;
|
|
514
|
+
bottom: number;
|
|
515
|
+
left: number;
|
|
516
|
+
}
|
|
517
|
+
declare const defaultMargin: ChartMargin;
|
|
518
|
+
interface YFormatSettings {
|
|
519
|
+
format: (value: number) => string;
|
|
520
|
+
min?: number;
|
|
521
|
+
max?: number;
|
|
522
|
+
tickInterval?: number;
|
|
523
|
+
tickFormat?: (value: number) => string;
|
|
524
|
+
}
|
|
525
|
+
declare function getYFormatSettings(formatType: YFormatType, currencySymbol?: string): YFormatSettings;
|
|
526
|
+
declare const createXScale: (data: BaseDataPoint[], width: number) => d3_scale.ScaleTime<number, number, never>;
|
|
527
|
+
declare const createYScale: (data: BaseDataPoint[], height: number, formatType: YFormatType) => d3_scale.ScaleLinear<number, number, never>;
|
|
528
|
+
|
|
529
|
+
/**
|
|
530
|
+
* DateField
|
|
531
|
+
*
|
|
532
|
+
* Segmented date input with optional calendar popup.
|
|
533
|
+
*/
|
|
534
|
+
interface DateFieldProps<T extends DateValue> extends DateFieldProps$1<T> {
|
|
535
|
+
/**
|
|
536
|
+
* Label for the date field
|
|
537
|
+
*/
|
|
538
|
+
label?: string;
|
|
539
|
+
/**
|
|
540
|
+
* Description text to show below the field
|
|
541
|
+
*/
|
|
542
|
+
description?: string;
|
|
543
|
+
/**
|
|
544
|
+
* Error message to display
|
|
545
|
+
*/
|
|
546
|
+
errorMessage?: string | ((validation: ValidationResult) => string);
|
|
547
|
+
/**
|
|
548
|
+
* Whether to show a calendar button for date selection
|
|
549
|
+
* @default false
|
|
550
|
+
*/
|
|
551
|
+
showCalendar?: boolean;
|
|
552
|
+
}
|
|
553
|
+
declare function DateField<T extends DateValue>({ label, description, errorMessage, showCalendar, ...props }: DateFieldProps<T>): react_jsx_runtime.JSX.Element;
|
|
554
|
+
|
|
555
|
+
interface FileUploadProps {
|
|
556
|
+
/**
|
|
557
|
+
* Current file URL or preview
|
|
558
|
+
*/
|
|
559
|
+
value?: string;
|
|
560
|
+
/**
|
|
561
|
+
* Callback when file is selected
|
|
562
|
+
*/
|
|
563
|
+
onChange?: (file: File | null, url?: string) => void;
|
|
564
|
+
/**
|
|
565
|
+
* Callback when file URL changes (for external upload handlers)
|
|
566
|
+
*/
|
|
567
|
+
onUrlChange?: (url: string) => void;
|
|
568
|
+
/**
|
|
569
|
+
* Accepted file types
|
|
570
|
+
*/
|
|
571
|
+
accept?: string;
|
|
572
|
+
/**
|
|
573
|
+
* Maximum file size in bytes
|
|
574
|
+
*/
|
|
575
|
+
maxSize?: number;
|
|
576
|
+
/**
|
|
577
|
+
* Whether the component is disabled
|
|
578
|
+
*/
|
|
579
|
+
isDisabled?: boolean;
|
|
580
|
+
/**
|
|
581
|
+
* Custom upload handler (e.g., for cloud storage)
|
|
582
|
+
*/
|
|
583
|
+
onUpload?: (file: File) => Promise<string>;
|
|
584
|
+
/**
|
|
585
|
+
* Additional CSS classes
|
|
586
|
+
*/
|
|
587
|
+
className?: string;
|
|
588
|
+
/**
|
|
589
|
+
* Show image preview for image files
|
|
590
|
+
*/
|
|
591
|
+
showPreview?: boolean;
|
|
592
|
+
/**
|
|
593
|
+
* Placeholder text
|
|
594
|
+
*/
|
|
595
|
+
placeholder?: string;
|
|
596
|
+
}
|
|
597
|
+
/**
|
|
598
|
+
* FileUpload
|
|
599
|
+
*
|
|
600
|
+
* A file upload component with drag-and-drop support.
|
|
601
|
+
* Supports image preview, custom upload handlers, and file validation.
|
|
602
|
+
*/
|
|
603
|
+
declare function FileUpload({ value, onChange, onUrlChange, accept, maxSize, isDisabled, onUpload, className, showPreview, placeholder, }: FileUploadProps): react_jsx_runtime.JSX.Element;
|
|
604
|
+
|
|
605
|
+
declare const sizeVariants: {
|
|
606
|
+
readonly xs: "text-lg font-semibold";
|
|
607
|
+
readonly sm: "text-xl font-semibold";
|
|
608
|
+
readonly md: "text-2xl font-semibold";
|
|
609
|
+
readonly lg: "text-3xl font-semibold";
|
|
610
|
+
readonly xl: "text-4xl font-semibold";
|
|
611
|
+
};
|
|
612
|
+
declare const heightVariants: {
|
|
613
|
+
readonly page: "h-16 leading-[62px]";
|
|
614
|
+
};
|
|
615
|
+
type HeadingSize = keyof typeof sizeVariants;
|
|
616
|
+
type HeadingHeight = keyof typeof heightVariants;
|
|
617
|
+
/**
|
|
618
|
+
* Heading
|
|
619
|
+
*
|
|
620
|
+
* Typography component for page/section headings with size and height options.
|
|
621
|
+
*/
|
|
622
|
+
interface HeadingProps {
|
|
623
|
+
tag?: keyof JSX.IntrinsicElements;
|
|
624
|
+
size?: HeadingSize;
|
|
625
|
+
height?: HeadingHeight;
|
|
626
|
+
className?: string;
|
|
627
|
+
children?: React__default.ReactNode;
|
|
628
|
+
}
|
|
629
|
+
declare function Heading({ tag: Tag, size, height, className, children, }: HeadingProps): react_jsx_runtime.JSX.Element;
|
|
630
|
+
|
|
631
|
+
interface LoaderProps {
|
|
632
|
+
/**
|
|
633
|
+
* Optional className for custom styling
|
|
634
|
+
*/
|
|
635
|
+
className?: string;
|
|
636
|
+
/**
|
|
637
|
+
* Size of the loader in pixels
|
|
638
|
+
* @default 24
|
|
639
|
+
*/
|
|
640
|
+
size?: number;
|
|
641
|
+
/**
|
|
642
|
+
* Color of the loader
|
|
643
|
+
* @default "text-action-primary"
|
|
644
|
+
*/
|
|
645
|
+
color?: string;
|
|
646
|
+
}
|
|
647
|
+
declare const Loader: ({ className, size, color }: LoaderProps) => react_jsx_runtime.JSX.Element;
|
|
648
|
+
|
|
649
|
+
interface LogoProps {
|
|
650
|
+
className?: string;
|
|
651
|
+
showWordmark?: boolean;
|
|
652
|
+
width?: number;
|
|
653
|
+
fill?: string;
|
|
654
|
+
}
|
|
655
|
+
declare const Logo: ({ className, showWordmark, width, fill }: LogoProps) => react_jsx_runtime.JSX.Element;
|
|
656
|
+
|
|
657
|
+
declare const MAPBOX_THEMES: {
|
|
658
|
+
dark: string;
|
|
659
|
+
light: string;
|
|
660
|
+
streets: string;
|
|
661
|
+
satellite: string;
|
|
662
|
+
};
|
|
663
|
+
interface StaticMapProps {
|
|
664
|
+
/**
|
|
665
|
+
* Map width
|
|
666
|
+
* @default "100%"
|
|
667
|
+
*/
|
|
668
|
+
width?: number | string;
|
|
669
|
+
/**
|
|
670
|
+
* Map height
|
|
671
|
+
* @default "100%"
|
|
672
|
+
*/
|
|
673
|
+
height?: number | string;
|
|
674
|
+
/**
|
|
675
|
+
* Initial viewport configuration
|
|
676
|
+
*/
|
|
677
|
+
initialViewState?: {
|
|
678
|
+
longitude: number;
|
|
679
|
+
latitude: number;
|
|
680
|
+
zoom: number;
|
|
681
|
+
};
|
|
682
|
+
/**
|
|
683
|
+
* Show loading skeleton
|
|
684
|
+
*/
|
|
685
|
+
isLoading?: boolean;
|
|
686
|
+
/**
|
|
687
|
+
* Map theme
|
|
688
|
+
* @default "streets"
|
|
689
|
+
*/
|
|
690
|
+
theme?: keyof typeof MAPBOX_THEMES;
|
|
691
|
+
/**
|
|
692
|
+
* Mapbox access token
|
|
693
|
+
*/
|
|
694
|
+
mapboxAccessToken?: string;
|
|
695
|
+
/**
|
|
696
|
+
* Show marker at center
|
|
697
|
+
* @default true
|
|
698
|
+
*/
|
|
699
|
+
showMarker?: boolean;
|
|
700
|
+
/**
|
|
701
|
+
* Additional CSS classes
|
|
702
|
+
*/
|
|
703
|
+
className?: string;
|
|
704
|
+
}
|
|
705
|
+
/**
|
|
706
|
+
* StaticMap
|
|
707
|
+
*
|
|
708
|
+
* A non-interactive map component for displaying a location.
|
|
709
|
+
* Perfect for showing addresses, store locations, or any single point of interest.
|
|
710
|
+
*/
|
|
711
|
+
declare function StaticMap({ width, height, initialViewState, isLoading, theme, mapboxAccessToken, showMarker, className, }: StaticMapProps): react_jsx_runtime.JSX.Element;
|
|
712
|
+
|
|
713
|
+
interface MapPoint {
|
|
714
|
+
id: string;
|
|
715
|
+
latitude: number;
|
|
716
|
+
longitude: number;
|
|
717
|
+
properties?: Record<string, unknown>;
|
|
718
|
+
}
|
|
719
|
+
interface InteractiveMapProps {
|
|
720
|
+
/**
|
|
721
|
+
* Array of points to display on the map
|
|
722
|
+
*/
|
|
723
|
+
data: MapPoint[];
|
|
724
|
+
/**
|
|
725
|
+
* Initial viewport configuration
|
|
726
|
+
*/
|
|
727
|
+
initialViewState?: ViewState;
|
|
728
|
+
/**
|
|
729
|
+
* Controlled viewport state
|
|
730
|
+
*/
|
|
731
|
+
viewState?: ViewState;
|
|
732
|
+
/**
|
|
733
|
+
* Callback when viewport changes
|
|
734
|
+
*/
|
|
735
|
+
onViewStateChange?: (viewState: ViewState) => void;
|
|
736
|
+
/**
|
|
737
|
+
* Callback when a point is clicked
|
|
738
|
+
*/
|
|
739
|
+
onPointClick?: (pointId: string) => void;
|
|
740
|
+
/**
|
|
741
|
+
* Currently selected point ID
|
|
742
|
+
*/
|
|
743
|
+
selectedPointId?: string | null;
|
|
744
|
+
/**
|
|
745
|
+
* Enable scroll zoom
|
|
746
|
+
* @default true
|
|
747
|
+
*/
|
|
748
|
+
scrollEnabled?: boolean;
|
|
749
|
+
/**
|
|
750
|
+
* Additional CSS classes
|
|
751
|
+
*/
|
|
752
|
+
className?: string;
|
|
753
|
+
/**
|
|
754
|
+
* Map theme
|
|
755
|
+
* @default "streets"
|
|
756
|
+
*/
|
|
757
|
+
theme?: keyof typeof MAPBOX_THEMES;
|
|
758
|
+
/**
|
|
759
|
+
* Mapbox access token
|
|
760
|
+
*/
|
|
761
|
+
mapboxAccessToken?: string;
|
|
762
|
+
/**
|
|
763
|
+
* Enable clustering for many points
|
|
764
|
+
* @default true
|
|
765
|
+
*/
|
|
766
|
+
enableClustering?: boolean;
|
|
767
|
+
/**
|
|
768
|
+
* Custom marker component
|
|
769
|
+
*/
|
|
770
|
+
renderMarker?: (point: MapPoint, isSelected: boolean) => React__default.ReactNode;
|
|
771
|
+
}
|
|
772
|
+
/**
|
|
773
|
+
* InteractiveMap
|
|
774
|
+
*
|
|
775
|
+
* An interactive map component for displaying multiple locations with clustering support.
|
|
776
|
+
* Supports point selection, custom markers, and viewport control.
|
|
777
|
+
*/
|
|
778
|
+
declare function InteractiveMap({ data, initialViewState, viewState, onViewStateChange, onPointClick, selectedPointId, scrollEnabled, className, theme, mapboxAccessToken, enableClustering, renderMarker, }: InteractiveMapProps): react_jsx_runtime.JSX.Element;
|
|
779
|
+
|
|
780
|
+
interface MeterProps extends MeterProps$1 {
|
|
781
|
+
/** Label displayed above the meter */
|
|
782
|
+
label?: string;
|
|
783
|
+
/** Size variant of the meter */
|
|
784
|
+
size?: "sm" | "md" | "lg";
|
|
785
|
+
/** Visual variant based on semantic meaning */
|
|
786
|
+
variant?: "default" | "success" | "warning" | "error" | "info";
|
|
787
|
+
/** Whether to show warning indicator at high values */
|
|
788
|
+
showWarningIndicator?: boolean;
|
|
789
|
+
/** Threshold percentage for showing warning (default: 80) */
|
|
790
|
+
warningThreshold?: number;
|
|
791
|
+
/** Additional CSS classes */
|
|
792
|
+
className?: string;
|
|
793
|
+
}
|
|
794
|
+
/**
|
|
795
|
+
* Meter
|
|
796
|
+
*
|
|
797
|
+
* Displays a measurement within a known range, with visual indicators for different value ranges.
|
|
798
|
+
* Perfect for showing capacity, usage levels, scores, or any bounded measurement.
|
|
799
|
+
*/
|
|
800
|
+
declare function Meter({ label, size, variant, showWarningIndicator, warningThreshold, className, ...props }: MeterProps): react_jsx_runtime.JSX.Element;
|
|
801
|
+
|
|
802
|
+
interface RichTextEditorProps {
|
|
803
|
+
/**
|
|
804
|
+
* The initial content of the editor
|
|
805
|
+
*/
|
|
806
|
+
initialContent?: string;
|
|
807
|
+
/**
|
|
808
|
+
* Callback when the content changes
|
|
809
|
+
*/
|
|
810
|
+
onChange?: (html: string) => void;
|
|
811
|
+
/**
|
|
812
|
+
* Additional className to apply to the editor
|
|
813
|
+
*/
|
|
814
|
+
className?: string;
|
|
815
|
+
/**
|
|
816
|
+
* Whether the editor is disabled
|
|
817
|
+
*/
|
|
818
|
+
isDisabled?: boolean;
|
|
819
|
+
/**
|
|
820
|
+
* Placeholder text when editor is empty
|
|
821
|
+
*/
|
|
822
|
+
placeholder?: string;
|
|
823
|
+
}
|
|
824
|
+
/**
|
|
825
|
+
* RichTextEditor
|
|
826
|
+
*
|
|
827
|
+
* A rich text editor with formatting capabilities including headings, bold, italic, lists, and links.
|
|
828
|
+
* Built on top of TipTap/ProseMirror.
|
|
829
|
+
*/
|
|
830
|
+
declare function RichTextEditor({ initialContent, onChange, className, isDisabled, placeholder, }: RichTextEditorProps): react_jsx_runtime.JSX.Element | null;
|
|
831
|
+
|
|
832
|
+
type SegmentOption = {
|
|
833
|
+
id: string;
|
|
834
|
+
label: string;
|
|
835
|
+
icon?: IconName;
|
|
836
|
+
};
|
|
837
|
+
interface SegmentedControlProps {
|
|
838
|
+
/**
|
|
839
|
+
* Array of segment options
|
|
840
|
+
*/
|
|
841
|
+
options: SegmentOption[];
|
|
842
|
+
/**
|
|
843
|
+
* Currently selected value
|
|
844
|
+
*/
|
|
845
|
+
value: string;
|
|
846
|
+
/**
|
|
847
|
+
* Callback when selection changes
|
|
848
|
+
*/
|
|
849
|
+
onChange: (value: string) => void;
|
|
850
|
+
/**
|
|
851
|
+
* Size of the control
|
|
852
|
+
* @default "md"
|
|
853
|
+
*/
|
|
854
|
+
size?: "sm" | "md" | "lg" | "xl";
|
|
855
|
+
/**
|
|
856
|
+
* Additional CSS classes
|
|
857
|
+
*/
|
|
858
|
+
className?: string;
|
|
859
|
+
/**
|
|
860
|
+
* Whether the control is disabled
|
|
861
|
+
*/
|
|
862
|
+
isDisabled?: boolean;
|
|
863
|
+
/**
|
|
864
|
+
* Aria label for accessibility
|
|
865
|
+
*/
|
|
866
|
+
"aria-label"?: string;
|
|
867
|
+
}
|
|
868
|
+
/**
|
|
869
|
+
* SegmentedControl
|
|
870
|
+
*
|
|
871
|
+
* A segmented control component for selecting between multiple options.
|
|
872
|
+
* Similar to a radio group but with a more compact, button-like appearance.
|
|
873
|
+
*/
|
|
874
|
+
declare function SegmentedControl({ options, value, onChange, size, className, isDisabled, "aria-label": ariaLabel, }: SegmentedControlProps): react_jsx_runtime.JSX.Element;
|
|
875
|
+
|
|
876
|
+
interface TextLinkProps {
|
|
877
|
+
href?: string;
|
|
878
|
+
children: ReactNode;
|
|
879
|
+
className?: string;
|
|
880
|
+
external?: boolean;
|
|
881
|
+
title?: string;
|
|
882
|
+
variant?: "default" | "primary" | "muted";
|
|
883
|
+
onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
|
|
884
|
+
asButton?: boolean;
|
|
885
|
+
onPress?: () => void;
|
|
886
|
+
showArrow?: boolean;
|
|
887
|
+
}
|
|
888
|
+
declare const TextLink: ({ href, children, className, external, title, variant, onClick, asButton, onPress, showArrow, }: TextLinkProps) => react_jsx_runtime.JSX.Element;
|
|
889
|
+
|
|
890
|
+
/**
|
|
891
|
+
* Color utilities for the edges design system
|
|
892
|
+
* Provides theme-aware color resolution and management
|
|
893
|
+
*/
|
|
894
|
+
/**
|
|
895
|
+
* Resolves a CSS variable to its computed color value
|
|
896
|
+
* Supports both var(--name) format and plain --name format
|
|
897
|
+
*
|
|
898
|
+
* @param variableName - CSS variable name (e.g., "--brand-primary" or "var(--brand-primary)")
|
|
899
|
+
* @returns Resolved color value or fallback
|
|
900
|
+
*/
|
|
901
|
+
declare const getResolvedColor: (variableName: string, fallback?: string) => string;
|
|
902
|
+
/**
|
|
903
|
+
* Clears the color cache - useful when theme changes
|
|
904
|
+
*/
|
|
905
|
+
declare const clearColorCache: () => void;
|
|
906
|
+
/**
|
|
907
|
+
* Gets theme colors from CSS variables
|
|
908
|
+
* Returns an array of resolved color values
|
|
909
|
+
*/
|
|
910
|
+
declare const getThemeCategoricalColors: () => string[];
|
|
911
|
+
/**
|
|
912
|
+
* Default color palette matching the edges design system
|
|
913
|
+
*/
|
|
914
|
+
declare const getDefaultColors: () => string[];
|
|
915
|
+
/**
|
|
916
|
+
* Gets the default chart color from theme
|
|
917
|
+
*/
|
|
918
|
+
declare const getDefaultChartColor: () => string;
|
|
919
|
+
/**
|
|
920
|
+
* Maps categories to colors based on a color scheme
|
|
921
|
+
*/
|
|
922
|
+
declare const createCategoryColorMap: (categories: string[], customColors?: Record<string, string>) => Record<string, string>;
|
|
923
|
+
/**
|
|
924
|
+
* Determines if a color is light or dark
|
|
925
|
+
* Useful for determining text color on colored backgrounds
|
|
926
|
+
*/
|
|
927
|
+
declare const isLightColor: (color: string) => boolean;
|
|
928
|
+
/**
|
|
929
|
+
* Gets contrasting text color for a background
|
|
930
|
+
*/
|
|
931
|
+
declare const getContrastingTextColor: (backgroundColor: string) => string;
|
|
932
|
+
|
|
933
|
+
export { type YFormatSettings as $, type ActionItem as A, type BaseDataPoint as B, Card as C, type DateFieldProps as D, type SideNavItem as E, type FileUploadProps as F, type SideNavProps as G, Heading as H, Icon as I, SideNav as J, TextLink as K, Loader as L, type MapPoint as M, type TopNavProps as N, TopNav as O, type TooltipSeries as P, ChartContext as Q, type RichTextEditorProps as R, type StaticMapProps as S, type TooltipData as T, useChartContext as U, type ChartMargin as V, createXScale as W, createYScale as X, type YFormatType as Y, defaultMargin as Z, getYFormatSettings as _, type IconName as a, clearColorCache as a0, createCategoryColorMap as a1, getContrastingTextColor as a2, getDefaultChartColor as a3, getDefaultColors as a4, getResolvedColor as a5, getThemeCategoricalColors as a6, isLightColor as a7, type ActionMenuProps as b, ActionMenu as c, type AppShellProps as d, AppShell as e, type AvatarProps as f, Avatar as g, type BadgeProps as h, Badge as i, type CodeEditorProps as j, type CodeLanguage as k, type CodeTheme as l, CodeEditor as m, DateField as n, FileUpload as o, Logo as p, type InteractiveMapProps as q, InteractiveMap as r, MAPBOX_THEMES as s, StaticMap as t, type MeterProps as u, Meter as v, RichTextEditor as w, type SegmentedControlProps as x, type SegmentOption as y, SegmentedControl as z };
|