@sckyzo/cosmos-react 0.1.0 → 0.2.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.
- package/CHANGELOG.md +54 -0
- package/README.md +18 -9
- package/dist/index.cjs +1219 -514
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +257 -65
- package/dist/index.d.ts +257 -65
- package/dist/index.js +1218 -515
- package/dist/index.js.map +1 -1
- package/package.json +7 -5
package/dist/index.d.ts
CHANGED
|
@@ -53,7 +53,13 @@ declare const Divider: (({ inset, align, emphasis, insetBg, className, ...rest }
|
|
|
53
53
|
type MediaObjectAlign = 'start' | 'center' | 'bottom' | 'stretch';
|
|
54
54
|
type MediaObjectPosition = 'left' | 'right';
|
|
55
55
|
type MediaObjectProps = HTMLAttributes<HTMLDivElement> & {
|
|
56
|
+
/**
|
|
57
|
+
* Where the media sits against the body: `start` (top), `center`, `bottom`,
|
|
58
|
+
* or `stretch` (the media slot takes the body's height; size the media
|
|
59
|
+
* `h-full`). Default `start`.
|
|
60
|
+
*/
|
|
56
61
|
align?: MediaObjectAlign;
|
|
62
|
+
/** Side of the body the media sits on. `right` reverses the row. Default `left`. */
|
|
57
63
|
mediaPosition?: MediaObjectPosition;
|
|
58
64
|
/** Gap between the media and the body. Default `gap-x-4` (16px). */
|
|
59
65
|
gapClassName?: string;
|
|
@@ -61,7 +67,13 @@ type MediaObjectProps = HTMLAttributes<HTMLDivElement> & {
|
|
|
61
67
|
type MediaObjectImageProps = HTMLAttributes<HTMLDivElement>;
|
|
62
68
|
type MediaObjectBodyProps = HTMLAttributes<HTMLDivElement>;
|
|
63
69
|
declare const MediaObject: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
|
|
70
|
+
/**
|
|
71
|
+
* Where the media sits against the body: `start` (top), `center`, `bottom`,
|
|
72
|
+
* or `stretch` (the media slot takes the body's height; size the media
|
|
73
|
+
* `h-full`). Default `start`.
|
|
74
|
+
*/
|
|
64
75
|
align?: MediaObjectAlign;
|
|
76
|
+
/** Side of the body the media sits on. `right` reverses the row. Default `left`. */
|
|
65
77
|
mediaPosition?: MediaObjectPosition;
|
|
66
78
|
/** Gap between the media and the body. Default `gap-x-4` (16px). */
|
|
67
79
|
gapClassName?: string;
|
|
@@ -121,6 +133,12 @@ type SidebarProps = {
|
|
|
121
133
|
children: ReactNode;
|
|
122
134
|
/** Footer content (sticks to bottom — e.g. user profile + collapse btn). */
|
|
123
135
|
footer?: ReactNode;
|
|
136
|
+
/**
|
|
137
|
+
* Renders a collapse button at the very bottom, under `footer`, and fires
|
|
138
|
+
* with the next state when it is clicked. Leave it out when the control
|
|
139
|
+
* lives elsewhere (e.g. the Topbar hamburger).
|
|
140
|
+
*/
|
|
141
|
+
onCollapsedChange?: (collapsed: boolean) => void;
|
|
124
142
|
/** Optional className override. */
|
|
125
143
|
className?: string;
|
|
126
144
|
};
|
|
@@ -132,7 +150,7 @@ type SidebarProps = {
|
|
|
132
150
|
* is automatically threaded to every subcomponent via React context, so
|
|
133
151
|
* children don't need to receive it as a prop.
|
|
134
152
|
*/
|
|
135
|
-
declare const SidebarRoot: ({ collapsed, width, collapsedWidth, children, footer, className, }: SidebarProps) => react.JSX.Element;
|
|
153
|
+
declare const SidebarRoot: ({ collapsed, width, collapsedWidth, children, footer, onCollapsedChange, className, }: SidebarProps) => react.JSX.Element;
|
|
136
154
|
type SidebarBrandProps = {
|
|
137
155
|
/** Logo node — typically a small icon, lucide component, or img. */
|
|
138
156
|
logo?: ReactNode;
|
|
@@ -157,7 +175,7 @@ type SidebarItemProps = {
|
|
|
157
175
|
label: string;
|
|
158
176
|
/** Whether the item is active (highlighted). */
|
|
159
177
|
active?: boolean;
|
|
160
|
-
/** Link target — renders an
|
|
178
|
+
/** Link target — renders an `<a>` if set, otherwise a `<button>`. */
|
|
161
179
|
href?: string;
|
|
162
180
|
/** Click handler (if not using href). */
|
|
163
181
|
onClick?: () => void;
|
|
@@ -165,10 +183,13 @@ type SidebarItemProps = {
|
|
|
165
183
|
badge?: ReactNode;
|
|
166
184
|
/** Override the inherited collapsed state. */
|
|
167
185
|
collapsed?: boolean;
|
|
168
|
-
/**
|
|
186
|
+
/**
|
|
187
|
+
* Indentation depth. Defaults to the nesting level: 0 at the top, one more
|
|
188
|
+
* inside each Sidebar.SubMenu.
|
|
189
|
+
*/
|
|
169
190
|
depth?: number;
|
|
170
191
|
};
|
|
171
|
-
declare const SidebarItem: ({ icon: Icon, label, active, href, onClick, badge, collapsed: collapsedProp, depth, }: SidebarItemProps) => react.JSX.Element;
|
|
192
|
+
declare const SidebarItem: ({ icon: Icon, label, active, href, onClick, badge, collapsed: collapsedProp, depth: depthProp, }: SidebarItemProps) => react.JSX.Element;
|
|
172
193
|
type SidebarSubMenuProps = {
|
|
173
194
|
icon: ComponentType<{
|
|
174
195
|
className?: string;
|
|
@@ -182,7 +203,7 @@ type SidebarSubMenuProps = {
|
|
|
182
203
|
active?: boolean;
|
|
183
204
|
/** Optional badge shown right of label (hidden when collapsed). */
|
|
184
205
|
badge?: ReactNode;
|
|
185
|
-
/** Nested items
|
|
206
|
+
/** Nested items: Sidebar.Item, or another Sidebar.SubMenu for a deeper level. */
|
|
186
207
|
children: ReactNode;
|
|
187
208
|
};
|
|
188
209
|
declare const SidebarSubMenu: ({ icon: Icon, label, defaultOpen, collapsed: collapsedProp, active, badge, children, }: SidebarSubMenuProps) => react.JSX.Element;
|
|
@@ -233,6 +254,12 @@ type ShellProps = {
|
|
|
233
254
|
sidebarCollapsed?: boolean;
|
|
234
255
|
/** Fired whenever the collapsed state toggles. */
|
|
235
256
|
onSidebarToggle?: (collapsed: boolean) => void;
|
|
257
|
+
/**
|
|
258
|
+
* Where the collapse control lives. `topbar` (default): the Topbar's
|
|
259
|
+
* hamburger. `sidebar`: a button at the bottom of the Sidebar, and the
|
|
260
|
+
* Topbar shows no hamburger.
|
|
261
|
+
*/
|
|
262
|
+
collapseControl?: 'topbar' | 'sidebar';
|
|
236
263
|
/** Optional className override on the root element. */
|
|
237
264
|
className?: string;
|
|
238
265
|
};
|
|
@@ -252,7 +279,7 @@ type ShellProps = {
|
|
|
252
279
|
* …
|
|
253
280
|
* </Shell>
|
|
254
281
|
*/
|
|
255
|
-
declare const Shell: ({ topbar, sidebar, children, secondary, secondaryWidthClassName, defaultSidebarCollapsed, sidebarCollapsed: controlledCollapsed, onSidebarToggle, className, }: ShellProps) => react.JSX.Element;
|
|
282
|
+
declare const Shell: ({ topbar, sidebar, children, secondary, secondaryWidthClassName, defaultSidebarCollapsed, sidebarCollapsed: controlledCollapsed, onSidebarToggle, collapseControl, className, }: ShellProps) => react.JSX.Element;
|
|
256
283
|
|
|
257
284
|
type PageBreadcrumbItem = {
|
|
258
285
|
label: string;
|
|
@@ -331,21 +358,6 @@ type SectionCardProps = {
|
|
|
331
358
|
*/
|
|
332
359
|
declare const SectionCard: ({ title, desc, icon: Icon, iconTone, iconColor, iconBg, children, className, }: SectionCardProps) => react.JSX.Element;
|
|
333
360
|
|
|
334
|
-
type PageCardProps = {
|
|
335
|
-
children: ReactNode;
|
|
336
|
-
className?: string;
|
|
337
|
-
};
|
|
338
|
-
/**
|
|
339
|
-
* PageCard — full-page outer card.
|
|
340
|
-
*
|
|
341
|
-
* Replaces multiple SectionCards stacked: a single rounded-2xl bordered card
|
|
342
|
-
* that wraps ALL page content. Use for settings, profiles, forms — anything
|
|
343
|
-
* that's hard to read full-width.
|
|
344
|
-
*
|
|
345
|
-
* Combine with `<ContentNarrow>` inside for a centered constrained column.
|
|
346
|
-
*/
|
|
347
|
-
declare const PageCard: ({ children, className }: PageCardProps) => react.JSX.Element;
|
|
348
|
-
|
|
349
361
|
type ContentNarrowProps = {
|
|
350
362
|
children: ReactNode;
|
|
351
363
|
/** Max width in px. Default: 680 */
|
|
@@ -355,7 +367,7 @@ type ContentNarrowProps = {
|
|
|
355
367
|
/**
|
|
356
368
|
* ContentNarrow — centered constrained-width wrapper.
|
|
357
369
|
*
|
|
358
|
-
* Use inside
|
|
370
|
+
* Use inside a Card or anywhere you want a readable column of content
|
|
359
371
|
* (settings forms, prose, profile pages…). Default width is 680px.
|
|
360
372
|
*/
|
|
361
373
|
declare const ContentNarrow: ({ children, maxWidth, className }: ContentNarrowProps) => react.JSX.Element;
|
|
@@ -520,7 +532,8 @@ type StackedListItemProps = LiHTMLAttributes<HTMLLIElement> & {
|
|
|
520
532
|
/**
|
|
521
533
|
* If set, the entire row becomes a navigable link via a full-row overlay
|
|
522
534
|
* (TUI pattern: `<a><span class="absolute inset-x-0 -top-px bottom-0"></span></a>`).
|
|
523
|
-
*
|
|
535
|
+
* `trailing` is lifted above the overlay so its actions stay clickable; give
|
|
536
|
+
* any other interactive element (in `subtitle` or `meta`) `position: relative`.
|
|
524
537
|
*/
|
|
525
538
|
href?: string;
|
|
526
539
|
/** When `href` is set, also append a chevron-right icon to indicate navigation. */
|
|
@@ -543,7 +556,8 @@ declare const StackedList: react.ForwardRefExoticComponent<Omit<HTMLAttributes<H
|
|
|
543
556
|
/**
|
|
544
557
|
* If set, the entire row becomes a navigable link via a full-row overlay
|
|
545
558
|
* (TUI pattern: `<a><span class="absolute inset-x-0 -top-px bottom-0"></span></a>`).
|
|
546
|
-
*
|
|
559
|
+
* `trailing` is lifted above the overlay so its actions stay clickable; give
|
|
560
|
+
* any other interactive element (in `subtitle` or `meta`) `position: relative`.
|
|
547
561
|
*/
|
|
548
562
|
href?: string;
|
|
549
563
|
/** When `href` is set, also append a chevron-right icon to indicate navigation. */
|
|
@@ -561,7 +575,10 @@ type ContentStackedListItemProps = LiHTMLAttributes<HTMLLIElement> & {
|
|
|
561
575
|
href?: string;
|
|
562
576
|
/** Optional inline badge rendered next to the title (pattern 5). */
|
|
563
577
|
badge?: ReactNode;
|
|
564
|
-
/**
|
|
578
|
+
/**
|
|
579
|
+
* Inline meta items separated by a dot. Pass an array of ReactNodes. Each item
|
|
580
|
+
* stays on one line; the last one truncates when the row runs out of room.
|
|
581
|
+
*/
|
|
565
582
|
meta?: ReactNode[];
|
|
566
583
|
/** Right-aligned slot — typically an AvatarGroup (pattern 3) or a button + actions menu (pattern 5). */
|
|
567
584
|
trailing?: ReactNode;
|
|
@@ -576,7 +593,10 @@ declare const ContentStackedList: react.ForwardRefExoticComponent<Omit<HTMLAttri
|
|
|
576
593
|
href?: string;
|
|
577
594
|
/** Optional inline badge rendered next to the title (pattern 5). */
|
|
578
595
|
badge?: ReactNode;
|
|
579
|
-
/**
|
|
596
|
+
/**
|
|
597
|
+
* Inline meta items separated by a dot. Pass an array of ReactNodes. Each item
|
|
598
|
+
* stays on one line; the last one truncates when the row runs out of room.
|
|
599
|
+
*/
|
|
580
600
|
meta?: ReactNode[];
|
|
581
601
|
/** Right-aligned slot — typically an AvatarGroup (pattern 3) or a button + actions menu (pattern 5). */
|
|
582
602
|
trailing?: ReactNode;
|
|
@@ -587,6 +607,11 @@ type StackedListInCardProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> &
|
|
|
587
607
|
/** Children must be `<StackedList.Item>` elements. */
|
|
588
608
|
children: ReactNode;
|
|
589
609
|
};
|
|
610
|
+
/**
|
|
611
|
+
* A `StackedList` on a card surface (ring, shadow, rounded from `sm` up). Each
|
|
612
|
+
* `StackedList.Item` child gets horizontal padding so its content clears the
|
|
613
|
+
* card edge; other children render unchanged.
|
|
614
|
+
*/
|
|
590
615
|
declare const StackedListInCard: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
|
|
591
616
|
/** Children must be `<StackedList.Item>` elements. */
|
|
592
617
|
children: ReactNode;
|
|
@@ -609,7 +634,7 @@ type NarrowStackedListItemProps = LiHTMLAttributes<HTMLLIElement> & {
|
|
|
609
634
|
subtitle?: ReactNode;
|
|
610
635
|
/** Optional right-of-title timestamp (Pattern 13). When set, an extra layout row is used. */
|
|
611
636
|
timestamp?: ReactNode;
|
|
612
|
-
/** Optional second body line (Pattern 13). Auto line-clamped to 2. */
|
|
637
|
+
/** Optional second body line (Pattern 13). Auto line-clamped to 2. Replaces `subtitle`. */
|
|
613
638
|
description?: ReactNode;
|
|
614
639
|
/** Optional right-aligned trailing slot — action button, link (Pattern 12). */
|
|
615
640
|
trailing?: ReactNode;
|
|
@@ -631,7 +656,7 @@ declare const NarrowStackedList: react.ForwardRefExoticComponent<Omit<HTMLAttrib
|
|
|
631
656
|
subtitle?: ReactNode;
|
|
632
657
|
/** Optional right-of-title timestamp (Pattern 13). When set, an extra layout row is used. */
|
|
633
658
|
timestamp?: ReactNode;
|
|
634
|
-
/** Optional second body line (Pattern 13). Auto line-clamped to 2. */
|
|
659
|
+
/** Optional second body line (Pattern 13). Auto line-clamped to 2. Replaces `subtitle`. */
|
|
635
660
|
description?: ReactNode;
|
|
636
661
|
/** Optional right-aligned trailing slot — action button, link (Pattern 12). */
|
|
637
662
|
trailing?: ReactNode;
|
|
@@ -652,12 +677,12 @@ type SimpleRowProps = {
|
|
|
652
677
|
*
|
|
653
678
|
* Use inside a SectionCard with `divide-y` for visually separated rows:
|
|
654
679
|
*
|
|
655
|
-
*
|
|
656
|
-
*
|
|
657
|
-
*
|
|
658
|
-
*
|
|
659
|
-
*
|
|
660
|
-
*
|
|
680
|
+
* <SectionCard title="Metadata">
|
|
681
|
+
* <div className="divide-y divide-[var(--color-border)]">
|
|
682
|
+
* <SimpleRow label="ID" value="rack-01-a" mono />
|
|
683
|
+
* <SimpleRow label="Status" value={<StatusBadge status="OK" />} />
|
|
684
|
+
* </div>
|
|
685
|
+
* </SectionCard>
|
|
661
686
|
*/
|
|
662
687
|
declare const SimpleRow: ({ label, value, mono, className }: SimpleRowProps) => react.JSX.Element;
|
|
663
688
|
|
|
@@ -672,7 +697,7 @@ type ClickableRowProps = {
|
|
|
672
697
|
subtitle?: string;
|
|
673
698
|
/** Click handler — renders a button */
|
|
674
699
|
onClick?: () => void;
|
|
675
|
-
/** Or provide an href to render an
|
|
700
|
+
/** Or provide an href to render an `<a>` instead */
|
|
676
701
|
href?: string;
|
|
677
702
|
className?: string;
|
|
678
703
|
};
|
|
@@ -741,7 +766,10 @@ declare const ActivityFeed: react.ForwardRefExoticComponent<Omit<HTMLAttributes<
|
|
|
741
766
|
|
|
742
767
|
type GridListCols = 1 | 2 | 3 | 4;
|
|
743
768
|
type GridListProps = Omit<HTMLAttributes<HTMLUListElement>, 'children'> & {
|
|
744
|
-
/**
|
|
769
|
+
/**
|
|
770
|
+
* Maximum number of columns. The grid starts at one column on phones and adds
|
|
771
|
+
* one at `sm`, `lg` and `xl` until it reaches this count.
|
|
772
|
+
*/
|
|
745
773
|
cols?: GridListCols;
|
|
746
774
|
/** Gap class (Tailwind). Default `gap-6` (24px). */
|
|
747
775
|
gapClassName?: string;
|
|
@@ -754,7 +782,10 @@ type GridListFooterActionProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
|
754
782
|
index?: number;
|
|
755
783
|
};
|
|
756
784
|
declare const GridList: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLUListElement>, "children"> & {
|
|
757
|
-
/**
|
|
785
|
+
/**
|
|
786
|
+
* Maximum number of columns. The grid starts at one column on phones and adds
|
|
787
|
+
* one at `sm`, `lg` and `xl` until it reaches this count.
|
|
788
|
+
*/
|
|
758
789
|
cols?: GridListCols;
|
|
759
790
|
/** Gap class (Tailwind). Default `gap-6` (24px). */
|
|
760
791
|
gapClassName?: string;
|
|
@@ -800,6 +831,11 @@ declare const Breadcrumb: ({ items, separator, className }: BreadcrumbProps) =>
|
|
|
800
831
|
|
|
801
832
|
type NavbarTheme = 'light' | 'dark';
|
|
802
833
|
type NavbarProps = HTMLAttributes<HTMLElement> & {
|
|
834
|
+
/**
|
|
835
|
+
* `light` follows the page theme (white, gray-800 in the dark themes);
|
|
836
|
+
* `dark` stays dark in every theme. Also the default theme of the parts.
|
|
837
|
+
* Default `light`.
|
|
838
|
+
*/
|
|
803
839
|
theme?: NavbarTheme;
|
|
804
840
|
/** Constrain inner content to a max width container. Default `7xl`. */
|
|
805
841
|
maxWidth?: 'none' | '7xl';
|
|
@@ -809,13 +845,19 @@ type NavbarProps = HTMLAttributes<HTMLElement> & {
|
|
|
809
845
|
};
|
|
810
846
|
type NavbarItemProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
811
847
|
active?: boolean;
|
|
812
|
-
/**
|
|
848
|
+
/** Defaults to the theme of the parent `<Navbar>`. */
|
|
813
849
|
theme?: NavbarTheme;
|
|
814
850
|
};
|
|
815
851
|
type NavbarMobileMenuButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
852
|
+
/** Defaults to the theme of the parent `<Navbar>`. */
|
|
816
853
|
theme?: NavbarTheme;
|
|
817
854
|
};
|
|
818
855
|
declare const Navbar: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
|
|
856
|
+
/**
|
|
857
|
+
* `light` follows the page theme (white, gray-800 in the dark themes);
|
|
858
|
+
* `dark` stays dark in every theme. Also the default theme of the parts.
|
|
859
|
+
* Default `light`.
|
|
860
|
+
*/
|
|
819
861
|
theme?: NavbarTheme;
|
|
820
862
|
/** Constrain inner content to a max width container. Default `7xl`. */
|
|
821
863
|
maxWidth?: "none" | "7xl";
|
|
@@ -1027,7 +1069,7 @@ type AvatarProps = {
|
|
|
1027
1069
|
declare const Avatar: ({ src, alt, name, size, className }: AvatarProps) => react.JSX.Element;
|
|
1028
1070
|
|
|
1029
1071
|
type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
|
|
1030
|
-
type TooltipVariant = 'dark' | 'white' | 'brand';
|
|
1072
|
+
type TooltipVariant = 'dark' | 'white' | 'brand' | 'success' | 'warning' | 'danger';
|
|
1031
1073
|
type TooltipProps = {
|
|
1032
1074
|
content: ReactNode;
|
|
1033
1075
|
children: ReactNode;
|
|
@@ -1035,8 +1077,21 @@ type TooltipProps = {
|
|
|
1035
1077
|
variant?: TooltipVariant;
|
|
1036
1078
|
/** Tailwind max-width class — default `max-w-xs` (320px) */
|
|
1037
1079
|
maxWidth?: string;
|
|
1080
|
+
/** Keys shown after the content, e.g. `['⌘', 'S']`. */
|
|
1081
|
+
shortcut?: string[];
|
|
1082
|
+
/** Bold first line; `content` then reads as its explanation. */
|
|
1083
|
+
title?: ReactNode;
|
|
1084
|
+
/** Draw the small arrow pointing at the trigger. Default `true`. */
|
|
1085
|
+
arrow?: boolean;
|
|
1086
|
+
/** Milliseconds to wait before showing on hover or focus. Default `0`. */
|
|
1087
|
+
delay?: number;
|
|
1038
1088
|
};
|
|
1039
|
-
|
|
1089
|
+
/**
|
|
1090
|
+
* Tooltip — shows `content` next to its trigger on hover and on keyboard
|
|
1091
|
+
* focus; Escape hides it. When the trigger is an element (a button, a link),
|
|
1092
|
+
* it gets `aria-describedby` pointing at the tooltip.
|
|
1093
|
+
*/
|
|
1094
|
+
declare const Tooltip: ({ content, children, position, variant, maxWidth, shortcut, title, arrow, delay, }: TooltipProps) => react.JSX.Element;
|
|
1040
1095
|
declare const TooltipHelp: ({ text, position, variant, }: {
|
|
1041
1096
|
text: string;
|
|
1042
1097
|
position?: TooltipPosition;
|
|
@@ -1183,11 +1238,26 @@ declare const Drawer: (({ open, onClose, side, size, withBackdrop, closeOutside,
|
|
|
1183
1238
|
};
|
|
1184
1239
|
|
|
1185
1240
|
type TabsOrientation = 'horizontal' | 'vertical';
|
|
1241
|
+
type TabsVariant =
|
|
1242
|
+
/** Accent line under the active tab, on a thin line under the list. */
|
|
1243
|
+
'underline'
|
|
1244
|
+
/**
|
|
1245
|
+
* File-folder tabs. The active tab is raised and joins the panel, which is
|
|
1246
|
+
* drawn as a bordered surface; inactive tabs sit recessed behind it, on the
|
|
1247
|
+
* panel's edge. Works in both orientations.
|
|
1248
|
+
*/
|
|
1249
|
+
| 'folder';
|
|
1186
1250
|
type TabsProps = {
|
|
1187
1251
|
value: string;
|
|
1188
1252
|
onChange: (value: string) => void;
|
|
1189
1253
|
/** Layout direction. `horizontal` (default) puts the tab list on top; `vertical` puts it on the left. */
|
|
1190
1254
|
orientation?: TabsOrientation;
|
|
1255
|
+
/**
|
|
1256
|
+
* Visual style. `underline` (default) marks the active tab with an accent
|
|
1257
|
+
* line. `folder` draws file-folder tabs attached to their panel, which then
|
|
1258
|
+
* gets its own border, background and padding.
|
|
1259
|
+
*/
|
|
1260
|
+
variant?: TabsVariant;
|
|
1191
1261
|
children: ReactNode;
|
|
1192
1262
|
className?: string;
|
|
1193
1263
|
};
|
|
@@ -1199,7 +1269,7 @@ type TabProps = {
|
|
|
1199
1269
|
disabled?: boolean;
|
|
1200
1270
|
className?: string;
|
|
1201
1271
|
};
|
|
1202
|
-
declare const Tabs: (({ value, onChange, orientation, children, className }: TabsProps) => react.JSX.Element) & {
|
|
1272
|
+
declare const Tabs: (({ value, onChange, orientation, variant, children, className, }: TabsProps) => react.JSX.Element) & {
|
|
1203
1273
|
List: ({ children, className }: {
|
|
1204
1274
|
children: ReactNode;
|
|
1205
1275
|
className?: string;
|
|
@@ -1215,11 +1285,18 @@ declare const Tabs: (({ value, onChange, orientation, children, className }: Tab
|
|
|
1215
1285
|
type CodeBlockProps = {
|
|
1216
1286
|
code: string;
|
|
1217
1287
|
language?: string;
|
|
1288
|
+
/**
|
|
1289
|
+
* Turns `code` into highlighted nodes, rendered inside the block's `<code>`.
|
|
1290
|
+
* Cosmos ships no highlighter: plug one in (the story wires Shiki to the
|
|
1291
|
+
* `--color-code-*` theme tokens). Without it the code is plain text. The
|
|
1292
|
+
* copy button always copies `code`.
|
|
1293
|
+
*/
|
|
1294
|
+
highlight?: (code: string, language?: string) => ReactNode;
|
|
1218
1295
|
/** Show the copy button (top-right, hover-revealed). Default `true`. */
|
|
1219
1296
|
showCopy?: boolean;
|
|
1220
1297
|
className?: string;
|
|
1221
1298
|
};
|
|
1222
|
-
declare const CodeBlock: ({ code, language, showCopy, className }: CodeBlockProps) => react.JSX.Element;
|
|
1299
|
+
declare const CodeBlock: ({ code, language, highlight, showCopy, className, }: CodeBlockProps) => react.JSX.Element;
|
|
1223
1300
|
|
|
1224
1301
|
type PageActionVariant = 'outline' | 'primary' | 'brand-outline' | 'danger-outline';
|
|
1225
1302
|
type PageActionButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
@@ -2820,17 +2897,24 @@ type TimelineItem = {
|
|
|
2820
2897
|
description?: ReactNode;
|
|
2821
2898
|
/** Time label — e.g. "5m ago", "2026-05-07 14:32". */
|
|
2822
2899
|
time?: ReactNode;
|
|
2823
|
-
/** Lucide icon — used by `dot` and `
|
|
2900
|
+
/** Lucide icon — used by `dot`, `stepper` and `alternating` variants. */
|
|
2824
2901
|
icon?: ElementType;
|
|
2825
2902
|
/** Initials/name for `avatar` variant. */
|
|
2826
2903
|
avatarName?: string;
|
|
2827
2904
|
/** Optional image URL for `avatar` variant. */
|
|
2828
2905
|
avatarSrc?: string;
|
|
2829
2906
|
/**
|
|
2830
|
-
* Visual tone for `stepper`
|
|
2831
|
-
* Defaults to `brand`.
|
|
2907
|
+
* Visual tone for `stepper` and `alternating` variants (icon circle
|
|
2908
|
+
* background). Defaults to `brand`.
|
|
2832
2909
|
*/
|
|
2833
2910
|
tone?: TimelineTone;
|
|
2911
|
+
/** Extra line under the description, e.g. "by Sarah Chen". */
|
|
2912
|
+
meta?: ReactNode;
|
|
2913
|
+
/**
|
|
2914
|
+
* Section label, e.g. "Today". Consecutive items with the same `group` get
|
|
2915
|
+
* one header above them.
|
|
2916
|
+
*/
|
|
2917
|
+
group?: string;
|
|
2834
2918
|
};
|
|
2835
2919
|
type TimelineTone = 'brand' | 'success' | 'warning' | 'danger' | 'neutral';
|
|
2836
2920
|
type TimelineVariant =
|
|
@@ -2845,7 +2929,13 @@ type TimelineVariant =
|
|
|
2845
2929
|
*/
|
|
2846
2930
|
| 'stepper'
|
|
2847
2931
|
/** Each entry rendered as a stand-alone card (no connector line). */
|
|
2848
|
-
| 'card'
|
|
2932
|
+
| 'card'
|
|
2933
|
+
/**
|
|
2934
|
+
* Cards alternating left and right of a centred line, with a `stepper`
|
|
2935
|
+
* icon circle on the line and the time on the other side. Below `md`, one
|
|
2936
|
+
* column with the line on the left.
|
|
2937
|
+
*/
|
|
2938
|
+
| 'alternating';
|
|
2849
2939
|
type TimelineProps = {
|
|
2850
2940
|
items: TimelineItem[];
|
|
2851
2941
|
variant?: TimelineVariant;
|
|
@@ -2867,7 +2957,48 @@ type MiniCalendarProps = {
|
|
|
2867
2957
|
*/
|
|
2868
2958
|
declare const MiniCalendar: ({ today, selected, onSelect, eventDays, className, }: MiniCalendarProps) => react.JSX.Element;
|
|
2869
2959
|
|
|
2960
|
+
type EventCalendarTone = 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'violet';
|
|
2961
|
+
type CalendarEvent = {
|
|
2962
|
+
id: string;
|
|
2963
|
+
title: string;
|
|
2964
|
+
/** First day of the event. Only the date is used, not the time. */
|
|
2965
|
+
start: Date;
|
|
2966
|
+
/** Last day, inclusive. Omit for a one-day event. */
|
|
2967
|
+
end?: Date;
|
|
2968
|
+
/** Dot and chip colour. Defaults to `brand`. */
|
|
2969
|
+
tone?: EventCalendarTone;
|
|
2970
|
+
};
|
|
2971
|
+
type EventCalendarProps = {
|
|
2972
|
+
events: CalendarEvent[];
|
|
2973
|
+
/** Month to show (any day in it). Set it with `onMonthChange` to control the calendar. */
|
|
2974
|
+
month?: Date;
|
|
2975
|
+
/** First month shown when `month` is not set. Defaults to the month of `today`. */
|
|
2976
|
+
defaultMonth?: Date;
|
|
2977
|
+
/** Fires with the first day of the month reached by previous / next / Today. */
|
|
2978
|
+
onMonthChange?: (month: Date) => void;
|
|
2979
|
+
/** Day highlighted as today, and where the Today button goes. Defaults to now. */
|
|
2980
|
+
today?: Date;
|
|
2981
|
+
/** Makes each event chip a button. */
|
|
2982
|
+
onEventClick?: (event: CalendarEvent) => void;
|
|
2983
|
+
/** Makes each day number a button. */
|
|
2984
|
+
onDayClick?: (date: Date) => void;
|
|
2985
|
+
className?: string;
|
|
2986
|
+
};
|
|
2987
|
+
/**
|
|
2988
|
+
* EventCalendar — month view of events, with ISO weeks (Monday first).
|
|
2989
|
+
*
|
|
2990
|
+
* Each day shows up to three event chips (a tone dot and the title) and a
|
|
2991
|
+
* "+N more" button that lists the whole day. An event with an `end` repeats on
|
|
2992
|
+
* every day it covers. Below `sm` the chips shrink to their dots.
|
|
2993
|
+
*
|
|
2994
|
+
* Uncontrolled by default; pass `month` with `onMonthChange` to drive it from
|
|
2995
|
+
* outside (a side MiniCalendar, or loading events per month).
|
|
2996
|
+
*/
|
|
2997
|
+
declare const EventCalendar: ({ events, month, defaultMonth, onMonthChange, today, onEventClick, onDayClick, className, }: EventCalendarProps) => react.JSX.Element;
|
|
2998
|
+
|
|
2870
2999
|
type SortDirection = 'asc' | 'desc';
|
|
3000
|
+
/** Row height of a `DataTable`: the standard rows, or taller `comfortable` ones. */
|
|
3001
|
+
type DataTableDensity = 'default' | 'comfortable';
|
|
2871
3002
|
type ColumnDef<T> = {
|
|
2872
3003
|
/** Stable key — used for sort/filter identity. */
|
|
2873
3004
|
key: string;
|
|
@@ -2900,6 +3031,12 @@ type DataTableProps<T> = {
|
|
|
2900
3031
|
onRetry?: () => void;
|
|
2901
3032
|
emptyTitle?: string;
|
|
2902
3033
|
emptyDescription?: string;
|
|
3034
|
+
/**
|
|
3035
|
+
* Row height. `default` keeps the standard rows. `comfortable` pads the
|
|
3036
|
+
* header and body cells more, for rows that carry two lines (a name over an
|
|
3037
|
+
* email, an avatar) or need more room. Cell content stays vertically centred.
|
|
3038
|
+
*/
|
|
3039
|
+
density?: DataTableDensity;
|
|
2903
3040
|
/** Show a checkbox column and enable row selection. */
|
|
2904
3041
|
selectable?: boolean;
|
|
2905
3042
|
/** Controlled selection set (row keys). */
|
|
@@ -2921,7 +3058,7 @@ type DataTableProps<T> = {
|
|
|
2921
3058
|
* empty states, optional row selection with bulk actions, and an optional
|
|
2922
3059
|
* global search bar.
|
|
2923
3060
|
*/
|
|
2924
|
-
declare const DataTable: <T>({ rows, columns, rowKey, renderRowAction, pageSize, loading, error, onRetry, emptyTitle, emptyDescription, selectable, selection: selectionProp, defaultSelection, onSelectionChange, bulkActions, searchValue: searchValueProp, defaultSearchValue, onSearchChange, searchPlaceholder, className, }: DataTableProps<T>) => react.JSX.Element;
|
|
3061
|
+
declare const DataTable: <T>({ rows, columns, rowKey, renderRowAction, pageSize, loading, error, onRetry, emptyTitle, emptyDescription, density, selectable, selection: selectionProp, defaultSelection, onSelectionChange, bulkActions, searchValue: searchValueProp, defaultSearchValue, onSearchChange, searchPlaceholder, className, }: DataTableProps<T>) => react.JSX.Element;
|
|
2925
3062
|
|
|
2926
3063
|
type ColumnHeaderProps = {
|
|
2927
3064
|
label: ReactNode;
|
|
@@ -2936,9 +3073,11 @@ type ColumnHeaderProps = {
|
|
|
2936
3073
|
filterSelected?: Set<string>;
|
|
2937
3074
|
onFilterToggle?: (v: string) => void;
|
|
2938
3075
|
onFilterClear?: () => void;
|
|
3076
|
+
/** Cell padding, matching the `density` of the table it heads. Default `default`. */
|
|
3077
|
+
density?: DataTableDensity;
|
|
2939
3078
|
className?: string;
|
|
2940
3079
|
};
|
|
2941
|
-
declare const ColumnHeader: ({ label, align, sortable, filterable, sortDir, onSortToggle, filterValues, filterSelected, onFilterToggle, onFilterClear, className, }: ColumnHeaderProps) => react.JSX.Element;
|
|
3080
|
+
declare const ColumnHeader: ({ label, align, sortable, filterable, sortDir, onSortToggle, filterValues, filterSelected, onFilterToggle, onFilterClear, density, className, }: ColumnHeaderProps) => react.JSX.Element;
|
|
2942
3081
|
|
|
2943
3082
|
type ColumnFilterDropdownProps = {
|
|
2944
3083
|
values: string[];
|
|
@@ -3021,17 +3160,18 @@ type ErrorPageProps = {
|
|
|
3021
3160
|
* `code`/`title` per scenario.
|
|
3022
3161
|
*
|
|
3023
3162
|
* Example (404):
|
|
3024
|
-
*
|
|
3025
|
-
*
|
|
3026
|
-
*
|
|
3027
|
-
*
|
|
3028
|
-
*
|
|
3029
|
-
*
|
|
3030
|
-
*
|
|
3031
|
-
*
|
|
3032
|
-
*
|
|
3033
|
-
*
|
|
3034
|
-
*
|
|
3163
|
+
*
|
|
3164
|
+
* <ErrorPage
|
|
3165
|
+
* code={404}
|
|
3166
|
+
* title="Page not found"
|
|
3167
|
+
* description="Sorry, the page you're looking for doesn't exist."
|
|
3168
|
+
* actions={
|
|
3169
|
+
* <>
|
|
3170
|
+
* <Button as="a" href="/">Go home</Button>
|
|
3171
|
+
* <Button variant="secondary" onClick={() => history.back()}>Back</Button>
|
|
3172
|
+
* </>
|
|
3173
|
+
* }
|
|
3174
|
+
* />
|
|
3035
3175
|
*/
|
|
3036
3176
|
declare const ErrorPage: ({ code, title, description, illustration, actions, className, }: ErrorPageProps) => react.JSX.Element;
|
|
3037
3177
|
|
|
@@ -3316,6 +3456,10 @@ declare const OptionPicker: ({ options, value, onChange, cols, className, }: Opt
|
|
|
3316
3456
|
type CosmosTheme = 'light' | 'sand' | 'dark' | 'deep-blue';
|
|
3317
3457
|
/** A Cosmos accent: the `data-accent` attribute on `<html>`, none for `blue`. */
|
|
3318
3458
|
type CosmosAccent = 'blue' | 'indigo' | 'violet' | 'purple' | 'rose' | 'teal' | 'cyan' | 'graphite' | 'red' | 'orange' | 'amber' | 'green';
|
|
3459
|
+
/** A Cosmos font: the `data-font` attribute on `<html>`, none for `outfit`. */
|
|
3460
|
+
type CosmosFont = 'outfit' | 'inter' | 'plex' | 'montserrat' | 'open-sans' | 'system';
|
|
3461
|
+
/** A Cosmos text size: the `data-text-size` attribute on `<html>`, none for `md`. */
|
|
3462
|
+
type CosmosTextSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
3319
3463
|
type CosmosThemeMeta = PaletteMeta & {
|
|
3320
3464
|
id: CosmosTheme;
|
|
3321
3465
|
dark: boolean;
|
|
@@ -3323,9 +3467,27 @@ type CosmosThemeMeta = PaletteMeta & {
|
|
|
3323
3467
|
type CosmosAccentMeta = AccentColor & {
|
|
3324
3468
|
id: CosmosAccent;
|
|
3325
3469
|
};
|
|
3470
|
+
/** `family` is the CSS font stack the theme sets for this font. */
|
|
3471
|
+
type CosmosFontMeta = {
|
|
3472
|
+
id: CosmosFont;
|
|
3473
|
+
label: string;
|
|
3474
|
+
family: string;
|
|
3475
|
+
};
|
|
3476
|
+
/** `scale` is the factor the theme applies to every text size. */
|
|
3477
|
+
type CosmosTextSizeMeta = {
|
|
3478
|
+
id: CosmosTextSize;
|
|
3479
|
+
label: string;
|
|
3480
|
+
scale: number;
|
|
3481
|
+
};
|
|
3482
|
+
/**
|
|
3483
|
+
* The page's appearance. `font` and `textSize` are optional: leave them out
|
|
3484
|
+
* and `applyAppearance` doesn't touch their attributes.
|
|
3485
|
+
*/
|
|
3326
3486
|
type CosmosAppearance = {
|
|
3327
3487
|
theme: CosmosTheme;
|
|
3328
3488
|
accent: CosmosAccent;
|
|
3489
|
+
font?: CosmosFont;
|
|
3490
|
+
textSize?: CosmosTextSize;
|
|
3329
3491
|
};
|
|
3330
3492
|
/** The four themes shipped by `@sckyzo/cosmos-theme`, ready for `<PalettePicker>`. */
|
|
3331
3493
|
declare const COSMOS_THEMES: CosmosThemeMeta[];
|
|
@@ -3335,13 +3497,23 @@ declare const COSMOS_THEMES: CosmosThemeMeta[];
|
|
|
3335
3497
|
* they come last.
|
|
3336
3498
|
*/
|
|
3337
3499
|
declare const COSMOS_ACCENTS: CosmosAccentMeta[];
|
|
3500
|
+
/**
|
|
3501
|
+
* The fonts of `@sckyzo/cosmos-theme`. Outfit loads from
|
|
3502
|
+
* `@sckyzo/cosmos-theme/fonts`, each other one from `fonts/<id>`; `system`
|
|
3503
|
+
* loads nothing. Only offer the fonts whose CSS the app imports.
|
|
3504
|
+
*/
|
|
3505
|
+
declare const COSMOS_FONTS: CosmosFontMeta[];
|
|
3506
|
+
/** The four text sizes of `@sckyzo/cosmos-theme`, smallest first. */
|
|
3507
|
+
declare const COSMOS_TEXT_SIZES: CosmosTextSizeMeta[];
|
|
3338
3508
|
/** `true` for the themes that enable Tailwind's `dark:` variant. */
|
|
3339
3509
|
declare const isDarkTheme: (theme: CosmosTheme) => boolean;
|
|
3340
3510
|
/**
|
|
3341
|
-
* Apply
|
|
3342
|
-
*
|
|
3511
|
+
* Apply an appearance to `root` (default `<html>`): swaps the theme class and
|
|
3512
|
+
* sets `data-accent`, `data-font` and `data-text-size`, removing each one for
|
|
3513
|
+
* its default (blue, Outfit, `md`). A `font` or `textSize` left out keeps its
|
|
3514
|
+
* attribute as it is. No-op during SSR.
|
|
3343
3515
|
*/
|
|
3344
|
-
declare const applyAppearance: ({ theme, accent }: CosmosAppearance, root?: HTMLElement) => void;
|
|
3516
|
+
declare const applyAppearance: ({ theme, accent, font, textSize }: CosmosAppearance, root?: HTMLElement) => void;
|
|
3345
3517
|
|
|
3346
3518
|
type AppearanceSettingsProps = {
|
|
3347
3519
|
/** Selected theme. */
|
|
@@ -3360,14 +3532,34 @@ type AppearanceSettingsProps = {
|
|
|
3360
3532
|
accents?: CosmosAccentMeta[];
|
|
3361
3533
|
/** Columns of the theme grid. Default 4; use 2 in narrow containers. */
|
|
3362
3534
|
themeColumns?: number;
|
|
3535
|
+
/** Selected font. Default `'outfit'`. */
|
|
3536
|
+
font?: CosmosFont;
|
|
3537
|
+
/** Shows the font group. */
|
|
3538
|
+
onFontChange?: (font: CosmosFont) => void;
|
|
3539
|
+
/** Selected text size. Default `'md'`. */
|
|
3540
|
+
textSize?: CosmosTextSize;
|
|
3541
|
+
/** Shows the text size group. */
|
|
3542
|
+
onTextSizeChange?: (textSize: CosmosTextSize) => void;
|
|
3543
|
+
/** Heading of the font group. Default `'Font'`. */
|
|
3544
|
+
fontLabel?: string;
|
|
3545
|
+
/** Heading of the text size group. Default `'Text size'`. */
|
|
3546
|
+
textSizeLabel?: string;
|
|
3547
|
+
/**
|
|
3548
|
+
* Fonts to offer. Default: all of `COSMOS_FONTS`. Offer only the fonts whose
|
|
3549
|
+
* CSS the app imports (`@sckyzo/cosmos-theme/fonts/<id>`).
|
|
3550
|
+
*/
|
|
3551
|
+
fonts?: CosmosFontMeta[];
|
|
3552
|
+
/** Text sizes to offer. Default: all of `COSMOS_TEXT_SIZES`. */
|
|
3553
|
+
textSizes?: CosmosTextSizeMeta[];
|
|
3363
3554
|
className?: string;
|
|
3364
3555
|
};
|
|
3365
3556
|
/**
|
|
3366
3557
|
* AppearanceSettings — theme and accent pickers for the Cosmos themes, built
|
|
3367
|
-
* on `<PalettePicker>` and `<AccentPicker
|
|
3558
|
+
* on `<PalettePicker>` and `<AccentPicker>`, plus font and text size pickers
|
|
3559
|
+
* when their `on…Change` handlers are set. Controlled: pass the result to
|
|
3368
3560
|
* `applyAppearance` (or your own theme switcher) to update the page.
|
|
3369
3561
|
*/
|
|
3370
|
-
declare const AppearanceSettings: ({ theme, accent, onThemeChange, onAccentChange, themeLabel, accentLabel, themes, accents, themeColumns, className, }: AppearanceSettingsProps) => react.JSX.Element;
|
|
3562
|
+
declare const AppearanceSettings: ({ theme, accent, onThemeChange, onAccentChange, themeLabel, accentLabel, themes, accents, themeColumns, font, onFontChange, textSize, onTextSizeChange, fontLabel, textSizeLabel, fonts, textSizes, className, }: AppearanceSettingsProps) => react.JSX.Element;
|
|
3371
3563
|
|
|
3372
3564
|
type AppearanceMenuSize = 'sm' | 'md';
|
|
3373
3565
|
type AppearanceMenuProps = Omit<AppearanceSettingsProps, 'className'> & {
|
|
@@ -3455,4 +3647,4 @@ type FigureProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'children'> & {
|
|
|
3455
3647
|
*/
|
|
3456
3648
|
declare const Figure: ({ src, alt, caption, align, size, radius, shadow, className, wrapperClassName, ...rest }: FigureProps) => react.JSX.Element;
|
|
3457
3649
|
|
|
3458
|
-
export { type AccentColor, AccentPicker, type AccentPickerProps, Accordion, type AccordionContentProps, type AccordionItemProps, type AccordionProps, type AccordionTriggerProps, ActionPanel, type ActionPanelLayout, type ActionPanelProps, type ActiveFilter, ActiveFiltersBar, type ActiveFiltersBarProps, ActivityFeed, type ActivityFeedIntent, type ActivityFeedItemProps, type ActivityFeedProps, AlertBanner, type AlertBannerProps, type AlertVariant, AnnouncementBar, type AnnouncementBarIntent, type AnnouncementBarProps, AppearanceMenu, type AppearanceMenuProps, type AppearanceMenuSize, AppearanceSettings, type AppearanceSettingsProps, AuthLayout, type AuthLayoutProps, Avatar, type AvatarProps, type AvatarSize, AvatarUploader, type AvatarUploaderProps, type AvatarUploaderSize, BackToTopFab, type BackToTopFabIntent, type BackToTopFabPosition, type BackToTopFabProps, Backdrop, type BackdropProps, Badge, type BadgeAppearance, type BadgeProps, type BadgeSize, type BadgeVariant, Blockquote, type BlockquoteAlign, type BlockquoteProps, type BlockquoteSize, type BlockquoteVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSeparator, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, COSMOS_ACCENTS, COSMOS_THEMES, Calendar, type CalendarProps, Card, type CardImageProps, type CardProps, Carousel, type CarouselControlsProps, type CarouselIndicatorsProps, type CarouselOptions, type CarouselProps, CarouselRoot, type CarouselSlideProps, type CarouselViewportProps, Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, ClickableRow, type ClickableRowProps, Clipboard, type ClipboardProps, type ClipboardSize, type ClipboardVariant, CodeBlock, type CodeBlockProps, ColBox, type ColBoxProps, ColorSwatch, type ColorSwatchProps, type ColumnDef, ColumnFilterDropdown, type ColumnFilterDropdownProps, ColumnHeader, type ColumnHeaderProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteFooterProps, type CommandPaletteGroupProps, type CommandPaletteInputProps, type CommandPaletteItemProps, type CommandPaletteListProps, type CommandPaletteProps, ConfirmationModal, type ConfirmationModalProps, ContentNarrow, type ContentNarrowProps, ContentStackedList, type ContentStackedListItemProps, type ContentStackedListProps, CookieBanner, type CookieBannerPosition, type CookieBannerProps, type CosmosAccent, type CosmosAccentMeta, type CosmosAppearance, type CosmosTheme, type CosmosThemeMeta, type CosmosToasterProps, DataTable, type DataTableProps, DatePicker, type DatePickerMode, type DatePickerProps, type DateRange, DescriptionList, type DescriptionListItemProps, type DescriptionListProps, Divider, type DividerAlign, type DividerIconProps, type DividerProps, type DividerRowProps, Drawer, type DrawerHeaderProps, type DrawerProps, type DrawerSide, type DrawerSize, Dropdown, type DropdownDivider, type DropdownItem, type DropdownOption, type DropdownProps, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, ErrorPage, type ErrorPageProps, ErrorState, type ErrorStateProps, Figure, type FigureAlign, type FigureProps, type FigureRadius, type FigureSize, FileInput, type FileInputProps, type FilterOption, FilterPills, type FilterPillsProps, FormFooter, type FormFooterAlign, type FormFooterProps, FormRow, type FormRowProps, GridList, type GridListCardProps, type GridListCols, type GridListFooterActionProps, type GridListFooterProps, type GridListProps, HealthBadge, type HealthBadgeProps, HealthDot, type HealthDotProps, type HealthStatus, HelpOverlay, type HelpOverlayProps, type HelpOverlaySectionProps, type HelpOverlayShortcutProps, IconBox, type IconBoxProps, type IconBoxSize, ImageGrid, type ImageGridColumns, type ImageGridGap, type ImageGridProps, Input, type InputProps, IntegrationCard, type IntegrationCardProps, type IntegrationStatus, Kbd, type KbdProps, type KbdSize, KpiCard, type KpiCardProps, Link, type LinkProps, type LinkVariant, List, type ListItemProps, type ListMarker, type ListOrientation, type ListProps, type ListSpacing, type ListVariant, LoadingState, type LoadingStateProps, MediaObject, type MediaObjectAlign, type MediaObjectBodyProps, type MediaObjectImageProps, type MediaObjectPosition, type MediaObjectProps, MiniCalendar, type MiniCalendarProps, Modal, type ModalAlertIntent, type ModalAlertLayout, type ModalAlertProps, type ModalHeaderProps, type ModalProps, type ModalSize, NarrowStackedList, type NarrowStackedListHeaderProps, type NarrowStackedListItemProps, type NarrowStackedListProps, Navbar, type NavbarItemProps, type NavbarMobileMenuButtonProps, type NavbarProps, type NavbarTheme, NotificationCard, type NotificationCardCondensedProps, type NotificationCardSimpleProps, type NotificationIntent, type NotificationSeverity, NotificationsPanel, type NotificationsPanelContentProps, type NotificationsPanelCountersProps, type NotificationsPanelEmptyProps, type NotificationsPanelFooterProps, type NotificationsPanelHeaderActionProps, type NotificationsPanelHeaderProps, type NotificationsPanelItemProps, type NotificationsPanelListProps, type NotificationsPanelProps, type NotificationsPanelTriggerProps, NumberInput, type NumberInputProps, OptionCard, type OptionCardProps, type OptionItem, OptionPicker, type OptionPickerProps, OtpInput, type OtpInputProps, PageActionButton, type PageActionButtonProps, PageActionIconButton, type PageActionIconButtonProps, type PageActionVariant, PageBreadcrumb, type PageBreadcrumbItem, type PageBreadcrumbProps,
|
|
3650
|
+
export { type AccentColor, AccentPicker, type AccentPickerProps, Accordion, type AccordionContentProps, type AccordionItemProps, type AccordionProps, type AccordionTriggerProps, ActionPanel, type ActionPanelLayout, type ActionPanelProps, type ActiveFilter, ActiveFiltersBar, type ActiveFiltersBarProps, ActivityFeed, type ActivityFeedIntent, type ActivityFeedItemProps, type ActivityFeedProps, AlertBanner, type AlertBannerProps, type AlertVariant, AnnouncementBar, type AnnouncementBarIntent, type AnnouncementBarProps, AppearanceMenu, type AppearanceMenuProps, type AppearanceMenuSize, AppearanceSettings, type AppearanceSettingsProps, AuthLayout, type AuthLayoutProps, Avatar, type AvatarProps, type AvatarSize, AvatarUploader, type AvatarUploaderProps, type AvatarUploaderSize, BackToTopFab, type BackToTopFabIntent, type BackToTopFabPosition, type BackToTopFabProps, Backdrop, type BackdropProps, Badge, type BadgeAppearance, type BadgeProps, type BadgeSize, type BadgeVariant, Blockquote, type BlockquoteAlign, type BlockquoteProps, type BlockquoteSize, type BlockquoteVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSeparator, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, COSMOS_ACCENTS, COSMOS_FONTS, COSMOS_TEXT_SIZES, COSMOS_THEMES, Calendar, type CalendarEvent, type CalendarProps, Card, type CardImageProps, type CardProps, Carousel, type CarouselControlsProps, type CarouselIndicatorsProps, type CarouselOptions, type CarouselProps, CarouselRoot, type CarouselSlideProps, type CarouselViewportProps, Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, ClickableRow, type ClickableRowProps, Clipboard, type ClipboardProps, type ClipboardSize, type ClipboardVariant, CodeBlock, type CodeBlockProps, ColBox, type ColBoxProps, ColorSwatch, type ColorSwatchProps, type ColumnDef, ColumnFilterDropdown, type ColumnFilterDropdownProps, ColumnHeader, type ColumnHeaderProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteFooterProps, type CommandPaletteGroupProps, type CommandPaletteInputProps, type CommandPaletteItemProps, type CommandPaletteListProps, type CommandPaletteProps, ConfirmationModal, type ConfirmationModalProps, ContentNarrow, type ContentNarrowProps, ContentStackedList, type ContentStackedListItemProps, type ContentStackedListProps, CookieBanner, type CookieBannerPosition, type CookieBannerProps, type CosmosAccent, type CosmosAccentMeta, type CosmosAppearance, type CosmosFont, type CosmosFontMeta, type CosmosTextSize, type CosmosTextSizeMeta, type CosmosTheme, type CosmosThemeMeta, type CosmosToasterProps, DataTable, type DataTableDensity, type DataTableProps, DatePicker, type DatePickerMode, type DatePickerProps, type DateRange, DescriptionList, type DescriptionListItemProps, type DescriptionListProps, Divider, type DividerAlign, type DividerIconProps, type DividerProps, type DividerRowProps, Drawer, type DrawerHeaderProps, type DrawerProps, type DrawerSide, type DrawerSize, Dropdown, type DropdownDivider, type DropdownItem, type DropdownOption, type DropdownProps, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, ErrorPage, type ErrorPageProps, ErrorState, type ErrorStateProps, EventCalendar, type EventCalendarProps, type EventCalendarTone, Figure, type FigureAlign, type FigureProps, type FigureRadius, type FigureSize, FileInput, type FileInputProps, type FilterOption, FilterPills, type FilterPillsProps, FormFooter, type FormFooterAlign, type FormFooterProps, FormRow, type FormRowProps, GridList, type GridListCardProps, type GridListCols, type GridListFooterActionProps, type GridListFooterProps, type GridListProps, HealthBadge, type HealthBadgeProps, HealthDot, type HealthDotProps, type HealthStatus, HelpOverlay, type HelpOverlayProps, type HelpOverlaySectionProps, type HelpOverlayShortcutProps, IconBox, type IconBoxProps, type IconBoxSize, ImageGrid, type ImageGridColumns, type ImageGridGap, type ImageGridProps, Input, type InputProps, IntegrationCard, type IntegrationCardProps, type IntegrationStatus, Kbd, type KbdProps, type KbdSize, KpiCard, type KpiCardProps, Link, type LinkProps, type LinkVariant, List, type ListItemProps, type ListMarker, type ListOrientation, type ListProps, type ListSpacing, type ListVariant, LoadingState, type LoadingStateProps, MediaObject, type MediaObjectAlign, type MediaObjectBodyProps, type MediaObjectImageProps, type MediaObjectPosition, type MediaObjectProps, MiniCalendar, type MiniCalendarProps, Modal, type ModalAlertIntent, type ModalAlertLayout, type ModalAlertProps, type ModalHeaderProps, type ModalProps, type ModalSize, NarrowStackedList, type NarrowStackedListHeaderProps, type NarrowStackedListItemProps, type NarrowStackedListProps, Navbar, type NavbarItemProps, type NavbarMobileMenuButtonProps, type NavbarProps, type NavbarTheme, NotificationCard, type NotificationCardCondensedProps, type NotificationCardSimpleProps, type NotificationIntent, type NotificationSeverity, NotificationsPanel, type NotificationsPanelContentProps, type NotificationsPanelCountersProps, type NotificationsPanelEmptyProps, type NotificationsPanelFooterProps, type NotificationsPanelHeaderActionProps, type NotificationsPanelHeaderProps, type NotificationsPanelItemProps, type NotificationsPanelListProps, type NotificationsPanelProps, type NotificationsPanelTriggerProps, NumberInput, type NumberInputProps, OptionCard, type OptionCardProps, type OptionItem, OptionPicker, type OptionPickerProps, OtpInput, type OtpInputProps, PageActionButton, type PageActionButtonProps, PageActionIconButton, type PageActionIconButtonProps, type PageActionVariant, PageBreadcrumb, type PageBreadcrumbItem, type PageBreadcrumbProps, PageHeader, type PageHeaderMetaItemProps, type PageHeaderProps, Pagination, type PaginationProps, type PaginationSize, type PaginationVariant, PaletteCard, type PaletteCardProps, type PaletteMeta, PalettePicker, type PalettePickerProps, type PalettePreview, PasswordInput, type PasswordInputProps, PasswordPolicyChecker, type PasswordPolicyCheckerProps, type PasswordRule, Popover, type PopoverAlign, type PopoverContentProps, type PopoverPosition, type PopoverProps, type PopoverTriggerProps, ProgressBar, type ProgressBarIntent, type ProgressBarLabel, type ProgressBarProps, type ProgressBarSize, REFRESH_OPTIONS, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RadioSize, RefreshButton, type RefreshButtonProps, type RefreshOption, ResetPasswordForm, type ResetPasswordFormProps, Ribbon, type RibbonIntent, type RibbonPosition, type RibbonProps, type RibbonShape, RowActionButton, type RowActionButtonProps, STATUS_COLOR, STATUS_PILL, type SaveState, SearchInput, type SearchInputProps, SectionCard, type SectionCardProps, SectionLabel, type SectionLabelProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, SelectInput, type SelectInputOption, type SelectInputProps, type SelectOption, type SelectProps, Shell, type ShellProps, Sidebar, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSectionProps, SignInForm, type SignInFormProps, type SignInFormValues, SignUpForm, type SignUpFormProps, type SignUpFormValues, SimpleRow, type SimpleRowProps, Sk, type SkProps, SkeletonList, type SkeletonListProps, SkeletonTable, type SkeletonTableProps, SkeletonText, type SkeletonTextProps, SocialAuthButtons, type SocialAuthButtonsLayout, type SocialAuthButtonsProps, type SocialProvider, type SortDirection, Spinner, type SpinnerProps, type SpinnerSize, StackedList, StackedListInCard, type StackedListInCardProps, type StackedListItemProps, type StackedListProps, StatefulSaveButton, type StatefulSaveButtonProps, StatusBadge, type StatusBadgeProps, StatusRow, type StatusRowProps, type StepStatus, Stepper, StepperInput, type StepperInputProps, type StepperOrientation, type StepperProps, StepperRoot, type StepperSize, type StepperStepProps, type StepperVariant, StickyScrollNav, type StickyScrollNavProps, type StickyScrollNavSection, type TabProps, Tabs, type TabsOrientation, type TabsProps, type TabsVariant, Textarea, type TextareaProps, type TextareaResize, type ThemeMode, ThemeToggle, type ThemeToggleProps, type ThemeToggleSize, ThemeToggleTri, type ThemeToggleTriProps, type ThemeToggleTriSize, TimePicker, type TimePickerProps, Timeline, type TimelineItem, type TimelineProps, type TimelineTone, type TimelineVariant, Toaster, Toggle, type ToggleProps, Tooltip, TooltipHelp, type TooltipPosition, type TooltipProps, type TooltipVariant, Topbar, type TopbarProps, TwoStepVerificationForm, type TwoStepVerificationFormProps, UnsavedIndicator, type UnsavedIndicatorProps, UserMenu, type UserMenuContentProps, type UserMenuHeaderProps, type UserMenuItemProps, type UserMenuItemVariant, type UserMenuProps, type UserMenuTriggerProps, VerticalNavigation, type VerticalNavigationItemProps, type VerticalNavigationProps, type VerticalNavigationSectionProps, VideoEmbed, type VideoEmbedAspect, type VideoEmbedProps, ZoomBar, type ZoomBarProps, applyAppearance, defaultPasswordRules, isDarkTheme, useAutoRefresh };
|