@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.
@@ -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 };