@texturehq/edges 1.0.1 → 1.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 (23) hide show
  1. package/dist/components.manifest.json +324 -20
  2. package/dist/index.cjs +7 -7
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +1090 -8
  5. package/dist/index.d.ts +1090 -8
  6. package/dist/index.js +7 -7
  7. package/dist/index.js.map +1 -1
  8. package/dist/{server-DmvMh5XJ.d.cts → server-DkP8PI1p.d.cts} +106 -148
  9. package/dist/{server-DmvMh5XJ.d.ts → server-DkP8PI1p.d.ts} +106 -148
  10. package/dist/server.cjs +11 -12
  11. package/dist/server.cjs.map +1 -1
  12. package/dist/server.d.cts +1 -1
  13. package/dist/server.d.ts +1 -1
  14. package/dist/server.js +11 -12
  15. package/dist/server.js.map +1 -1
  16. package/dist/styles/utilities.css +10 -7
  17. package/dist/styles.css +1203 -94
  18. package/package.json +3 -1
  19. package/scripts/copy-assets.js +9 -2
  20. package/scripts/generate-components-manifest.js +19 -8
  21. package/scripts/setup-cursor-rules-manual.js +66 -57
  22. package/scripts/setup-cursor-rules.js +103 -89
  23. package/scripts/validate-tokens.js +46 -48
package/dist/{server-DmvMh5XJ.d.cts → server-DkP8PI1p.d.cts} RENAMED
@@ -1,153 +1,53 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as React$1 from 'react';
3
3
  import React__default, { ReactNode } from 'react';
4
- import * as _phosphor_icons_react from '@phosphor-icons/react';
4
+ import * as PhosphorIcons from '@phosphor-icons/react';
5
+ import { IconProps as IconProps$1 } from '@phosphor-icons/react';
5
6
  import { DateValue, DateFieldProps as DateFieldProps$1, ValidationResult, MeterProps as MeterProps$1 } from 'react-aria-components';
6
7
  import { ViewState } from 'react-map-gl';
7
8
  import * as d3_scale from 'd3-scale';
8
9
  import { ScaleTime, ScaleLinear } from 'd3-scale';
9
10
 
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;
11
+ type PhosphorIconName = keyof typeof PhosphorIcons;
12
+ type IconName = PhosphorIconName;
13
+ declare const sizePresets: {
14
+ readonly xs: 16;
15
+ readonly sm: 20;
16
+ readonly md: 24;
17
+ readonly lg: 32;
18
+ readonly xl: 40;
19
+ readonly "2xl": 48;
133
20
  };
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;
21
+ type SizePreset = keyof typeof sizePresets;
22
+ interface IconProps extends Omit<IconProps$1, "size"> {
23
+ /**
24
+ * The name of the Phosphor icon to render
25
+ * Any valid icon from @phosphor-icons/react
26
+ */
27
+ name: PhosphorIconName;
28
+ /**
29
+ * Size of the icon - can be a preset or custom number
30
+ */
31
+ size?: SizePreset | number;
32
+ /**
33
+ * Accessibility label (maps to aria-label)
34
+ */
143
35
  ariaLabel?: string;
144
- grow?: boolean;
145
- variant?: IconVariant;
146
- rounded?: boolean;
147
- bgColor?: string;
148
- [key: string]: unknown;
149
36
  }
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>;
37
+ /**
38
+ * Icon - A wrapper around Phosphor icons that provides:
39
+ * - Access to ALL Phosphor icons without maintaining an allow list
40
+ * - Tree-shaking support (icons are only included if used)
41
+ * - Consistent sizing and theming
42
+ * - TypeScript autocomplete for all icon names
43
+ *
44
+ * Usage:
45
+ * ```tsx
46
+ * <Icon name="House" size="md" />
47
+ * <Icon name="User" size={32} className="text-brand" />
48
+ * ```
49
+ */
50
+ declare const Icon: React$1.MemoExoticComponent<({ name, size, color, weight, className, ariaLabel, ...props }: IconProps) => react_jsx_runtime.JSX.Element | null>;
151
51
 
152
52
  interface ActionItem {
153
53
  /**
@@ -229,8 +129,13 @@ type SideNavItem = {
229
129
  isExpanded?: boolean;
230
130
  children?: SideNavItem[];
231
131
  };
132
+ type SideNavSection = {
133
+ id: string;
134
+ title?: string;
135
+ items: SideNavItem[];
136
+ };
232
137
  type SideNavProps = {
233
- topItems?: SideNavItem[];
138
+ topItems?: SideNavItem[] | SideNavSection[];
234
139
  bottomItems?: SideNavItem[];
235
140
  logo?: React$1.ReactNode;
236
141
  showLogo?: boolean;
@@ -372,20 +277,73 @@ interface BadgeProps {
372
277
  declare function Badge({ children, variant, size, shape, dot, dotPosition, className, }: BadgeProps): react_jsx_runtime.JSX.Element;
373
278
 
374
279
  /**
375
- * Card
280
+ * Card - Enterprise surface container component
376
281
  *
377
- * Surface container with optional heading and actions.
282
+ * A flexible, composable card component following enterprise design system best practices.
283
+ * Supports modular content sections with consistent styling and accessibility.
284
+ *
285
+ * Usage:
286
+ * ```tsx
287
+ * <Card variant="outlined" size="md">
288
+ * <Card.Header
289
+ * title="Card Title"
290
+ * subtitle="Optional subtitle"
291
+ * actions={<Button variant="ghost" icon="MoreHorizontal" />}
292
+ * />
293
+ * <Card.Media src="image.jpg" alt="Description" />
294
+ * <Card.Content>
295
+ * <p>Main content goes here</p>
296
+ * </Card.Content>
297
+ * <Card.Footer>
298
+ * <Button variant="primary">Action</Button>
299
+ * </Card.Footer>
300
+ * </Card>
301
+ * ```
378
302
  */
303
+ type CardVariant = "outlined" | "elevated" | "filled" | "ghost";
379
304
  interface CardProps {
380
- heading?: React__default.ReactNode;
381
- upperRightText?: React__default.ReactNode;
382
- withPadding?: boolean;
383
- isGhost?: boolean;
305
+ variant?: CardVariant;
306
+ className?: string;
384
307
  children?: React__default.ReactNode;
308
+ isLoading?: boolean;
309
+ }
310
+ interface CardHeaderProps {
311
+ title?: React__default.ReactNode;
312
+ subtitle?: React__default.ReactNode;
313
+ actions?: React__default.ReactNode;
385
314
  className?: string;
386
315
  isLoading?: boolean;
387
316
  }
388
- declare const Card: React__default.FC<CardProps>;
317
+ interface CardMediaProps {
318
+ src?: string;
319
+ alt?: string;
320
+ aspectRatio?: "square" | "video" | "wide" | "auto";
321
+ className?: string;
322
+ children?: React__default.ReactNode;
323
+ isLoading?: boolean;
324
+ }
325
+ interface CardContentProps {
326
+ className?: string;
327
+ children?: React__default.ReactNode;
328
+ isLoading?: boolean;
329
+ }
330
+ interface CardFooterProps {
331
+ className?: string;
332
+ children?: React__default.ReactNode;
333
+ align?: "start" | "end" | "center" | "between";
334
+ isLoading?: boolean;
335
+ }
336
+ declare function Card({ variant, className, children, isLoading }: CardProps): react_jsx_runtime.JSX.Element;
337
+ declare namespace Card {
338
+ var Header: typeof CardHeader;
339
+ var Media: typeof CardMedia;
340
+ var Content: typeof CardContent;
341
+ var Footer: typeof CardFooter;
342
+ }
343
+ declare function CardHeader({ title, subtitle, actions, className, isLoading, }: CardHeaderProps): react_jsx_runtime.JSX.Element | null;
344
+ declare function CardMedia({ src, alt, aspectRatio, className, children, isLoading, }: CardMediaProps): react_jsx_runtime.JSX.Element | null;
345
+ declare function CardContent({ className, children, isLoading }: CardContentProps): react_jsx_runtime.JSX.Element | null;
346
+ declare function CardFooter({ className, children, align, isLoading, }: CardFooterProps): react_jsx_runtime.JSX.Element | null;
389
347
 
390
348
  type CodeLanguage = "json" | "javascript" | "typescript" | "html" | "css" | "markdown" | "yaml" | "xml" | "python" | "sql";
391
349
  type CodeTheme = "github" | "github_dark";
@@ -930,4 +888,4 @@ declare const isLightColor: (color: string) => boolean;
930
888
  */
931
889
  declare const getContrastingTextColor: (backgroundColor: string) => string;
932
890
 
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 };
891
+ export { defaultMargin as $, type ActionItem as A, type BaseDataPoint as B, type CardProps as C, type DateFieldProps as D, type SegmentOption as E, type FileUploadProps as F, SegmentedControl as G, Heading as H, Icon as I, type SideNavItem as J, type SideNavProps as K, Loader as L, type MapPoint as M, SideNav as N, TextLink as O, type TopNavProps as P, TopNav as Q, type RichTextEditorProps as R, type StaticMapProps as S, type TooltipData as T, type TooltipSeries as U, ChartContext as V, useChartContext as W, type ChartMargin as X, type YFormatType as Y, createXScale as Z, createYScale as _, type IconName as a, getYFormatSettings as a0, type YFormatSettings as a1, clearColorCache as a2, createCategoryColorMap as a3, getContrastingTextColor as a4, getDefaultChartColor as a5, getDefaultColors as a6, getResolvedColor as a7, getThemeCategoricalColors as a8, isLightColor as a9, 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 CardVariant as j, Card as k, type CodeEditorProps as l, type CodeLanguage as m, type CodeTheme as n, CodeEditor as o, DateField as p, FileUpload as q, Logo as r, type InteractiveMapProps as s, InteractiveMap as t, MAPBOX_THEMES as u, StaticMap as v, type MeterProps as w, Meter as x, RichTextEditor as y, type SegmentedControlProps as z };
package/dist/{server-DmvMh5XJ.d.ts → server-DkP8PI1p.d.ts} RENAMED
@@ -1,153 +1,53 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as React$1 from 'react';
3
3
  import React__default, { ReactNode } from 'react';
4
- import * as _phosphor_icons_react from '@phosphor-icons/react';
4
+ import * as PhosphorIcons from '@phosphor-icons/react';
5
+ import { IconProps as IconProps$1 } from '@phosphor-icons/react';
5
6
  import { DateValue, DateFieldProps as DateFieldProps$1, ValidationResult, MeterProps as MeterProps$1 } from 'react-aria-components';
6
7
  import { ViewState } from 'react-map-gl';
7
8
  import * as d3_scale from 'd3-scale';
8
9
  import { ScaleTime, ScaleLinear } from 'd3-scale';
9
10
 
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;
11
+ type PhosphorIconName = keyof typeof PhosphorIcons;
12
+ type IconName = PhosphorIconName;
13
+ declare const sizePresets: {
14
+ readonly xs: 16;
15
+ readonly sm: 20;
16
+ readonly md: 24;
17
+ readonly lg: 32;
18
+ readonly xl: 40;
19
+ readonly "2xl": 48;
133
20
  };
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;
21
+ type SizePreset = keyof typeof sizePresets;
22
+ interface IconProps extends Omit<IconProps$1, "size"> {
23
+ /**
24
+ * The name of the Phosphor icon to render
25
+ * Any valid icon from @phosphor-icons/react
26
+ */
27
+ name: PhosphorIconName;
28
+ /**
29
+ * Size of the icon - can be a preset or custom number
30
+ */
31
+ size?: SizePreset | number;
32
+ /**
33
+ * Accessibility label (maps to aria-label)
34
+ */
143
35
  ariaLabel?: string;
144
- grow?: boolean;
145
- variant?: IconVariant;
146
- rounded?: boolean;
147
- bgColor?: string;
148
- [key: string]: unknown;
149
36
  }
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>;
37
+ /**
38
+ * Icon - A wrapper around Phosphor icons that provides:
39
+ * - Access to ALL Phosphor icons without maintaining an allow list
40
+ * - Tree-shaking support (icons are only included if used)
41
+ * - Consistent sizing and theming
42
+ * - TypeScript autocomplete for all icon names
43
+ *
44
+ * Usage:
45
+ * ```tsx
46
+ * <Icon name="House" size="md" />
47
+ * <Icon name="User" size={32} className="text-brand" />
48
+ * ```
49
+ */
50
+ declare const Icon: React$1.MemoExoticComponent<({ name, size, color, weight, className, ariaLabel, ...props }: IconProps) => react_jsx_runtime.JSX.Element | null>;
151
51
 
152
52
  interface ActionItem {
153
53
  /**
@@ -229,8 +129,13 @@ type SideNavItem = {
229
129
  isExpanded?: boolean;
230
130
  children?: SideNavItem[];
231
131
  };
132
+ type SideNavSection = {
133
+ id: string;
134
+ title?: string;
135
+ items: SideNavItem[];
136
+ };
232
137
  type SideNavProps = {
233
- topItems?: SideNavItem[];
138
+ topItems?: SideNavItem[] | SideNavSection[];
234
139
  bottomItems?: SideNavItem[];
235
140
  logo?: React$1.ReactNode;
236
141
  showLogo?: boolean;
@@ -372,20 +277,73 @@ interface BadgeProps {
372
277
  declare function Badge({ children, variant, size, shape, dot, dotPosition, className, }: BadgeProps): react_jsx_runtime.JSX.Element;
373
278
 
374
279
  /**
375
- * Card
280
+ * Card - Enterprise surface container component
376
281
  *
377
- * Surface container with optional heading and actions.
282
+ * A flexible, composable card component following enterprise design system best practices.
283
+ * Supports modular content sections with consistent styling and accessibility.
284
+ *
285
+ * Usage:
286
+ * ```tsx
287
+ * <Card variant="outlined" size="md">
288
+ * <Card.Header
289
+ * title="Card Title"
290
+ * subtitle="Optional subtitle"
291
+ * actions={<Button variant="ghost" icon="MoreHorizontal" />}
292
+ * />
293
+ * <Card.Media src="image.jpg" alt="Description" />
294
+ * <Card.Content>
295
+ * <p>Main content goes here</p>
296
+ * </Card.Content>
297
+ * <Card.Footer>
298
+ * <Button variant="primary">Action</Button>
299
+ * </Card.Footer>
300
+ * </Card>
301
+ * ```
378
302
  */
303
+ type CardVariant = "outlined" | "elevated" | "filled" | "ghost";
379
304
  interface CardProps {
380
- heading?: React__default.ReactNode;
381
- upperRightText?: React__default.ReactNode;
382
- withPadding?: boolean;
383
- isGhost?: boolean;
305
+ variant?: CardVariant;
306
+ className?: string;
384
307
  children?: React__default.ReactNode;
308
+ isLoading?: boolean;
309
+ }
310
+ interface CardHeaderProps {
311
+ title?: React__default.ReactNode;
312
+ subtitle?: React__default.ReactNode;
313
+ actions?: React__default.ReactNode;
385
314
  className?: string;
386
315
  isLoading?: boolean;
387
316
  }
388
- declare const Card: React__default.FC<CardProps>;
317
+ interface CardMediaProps {
318
+ src?: string;
319
+ alt?: string;
320
+ aspectRatio?: "square" | "video" | "wide" | "auto";
321
+ className?: string;
322
+ children?: React__default.ReactNode;
323
+ isLoading?: boolean;
324
+ }
325
+ interface CardContentProps {
326
+ className?: string;
327
+ children?: React__default.ReactNode;
328
+ isLoading?: boolean;
329
+ }
330
+ interface CardFooterProps {
331
+ className?: string;
332
+ children?: React__default.ReactNode;
333
+ align?: "start" | "end" | "center" | "between";
334
+ isLoading?: boolean;
335
+ }
336
+ declare function Card({ variant, className, children, isLoading }: CardProps): react_jsx_runtime.JSX.Element;
337
+ declare namespace Card {
338
+ var Header: typeof CardHeader;
339
+ var Media: typeof CardMedia;
340
+ var Content: typeof CardContent;
341
+ var Footer: typeof CardFooter;
342
+ }
343
+ declare function CardHeader({ title, subtitle, actions, className, isLoading, }: CardHeaderProps): react_jsx_runtime.JSX.Element | null;
344
+ declare function CardMedia({ src, alt, aspectRatio, className, children, isLoading, }: CardMediaProps): react_jsx_runtime.JSX.Element | null;
345
+ declare function CardContent({ className, children, isLoading }: CardContentProps): react_jsx_runtime.JSX.Element | null;
346
+ declare function CardFooter({ className, children, align, isLoading, }: CardFooterProps): react_jsx_runtime.JSX.Element | null;
389
347
 
390
348
  type CodeLanguage = "json" | "javascript" | "typescript" | "html" | "css" | "markdown" | "yaml" | "xml" | "python" | "sql";
391
349
  type CodeTheme = "github" | "github_dark";
@@ -930,4 +888,4 @@ declare const isLightColor: (color: string) => boolean;
930
888
  */
931
889
  declare const getContrastingTextColor: (backgroundColor: string) => string;
932
890
 
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 };
891
+ export { defaultMargin as $, type ActionItem as A, type BaseDataPoint as B, type CardProps as C, type DateFieldProps as D, type SegmentOption as E, type FileUploadProps as F, SegmentedControl as G, Heading as H, Icon as I, type SideNavItem as J, type SideNavProps as K, Loader as L, type MapPoint as M, SideNav as N, TextLink as O, type TopNavProps as P, TopNav as Q, type RichTextEditorProps as R, type StaticMapProps as S, type TooltipData as T, type TooltipSeries as U, ChartContext as V, useChartContext as W, type ChartMargin as X, type YFormatType as Y, createXScale as Z, createYScale as _, type IconName as a, getYFormatSettings as a0, type YFormatSettings as a1, clearColorCache as a2, createCategoryColorMap as a3, getContrastingTextColor as a4, getDefaultChartColor as a5, getDefaultColors as a6, getResolvedColor as a7, getThemeCategoricalColors as a8, isLightColor as a9, 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 CardVariant as j, Card as k, type CodeEditorProps as l, type CodeLanguage as m, type CodeTheme as n, CodeEditor as o, DateField as p, FileUpload as q, Logo as r, type InteractiveMapProps as s, InteractiveMap as t, MAPBOX_THEMES as u, StaticMap as v, type MeterProps as w, Meter as x, RichTextEditor as y, type SegmentedControlProps as z };