@lessly/ui 3.0.0 → 4.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.
- package/dist/{chunk-CEXND5YW.js → chunk-LTHOLX7I.js} +223 -28
- package/dist/index.d.ts +359 -57
- package/dist/index.js +886 -752
- package/dist/router.d.ts +27 -17
- package/dist/router.js +72 -98
- package/dist/styles-federated.css +63 -10
- package/dist/styles.css +63 -16
- package/package.json +14 -14
package/dist/index.d.ts
CHANGED
|
@@ -304,6 +304,9 @@ interface OptionCardProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonEl
|
|
|
304
304
|
*/
|
|
305
305
|
declare const OptionCard: React$1.ForwardRefExoticComponent<OptionCardProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
306
306
|
|
|
307
|
+
/** How loudly a header names its page. `'page'` is a page's own header; `'compact'` is the header
|
|
308
|
+
* of a pane inside a container that has already named the section. */
|
|
309
|
+
type PageHeaderSize = 'page' | 'compact';
|
|
307
310
|
interface PageHeaderProps {
|
|
308
311
|
/** The page title. Rendered as an `<h2>`. */
|
|
309
312
|
title: React$1.ReactNode;
|
|
@@ -319,6 +322,11 @@ interface PageHeaderProps {
|
|
|
319
322
|
badge?: React$1.ReactNode;
|
|
320
323
|
/** A trailing slot (e.g. a `+ Add` button), right-aligned. */
|
|
321
324
|
actions?: React$1.ReactNode;
|
|
325
|
+
/** `'page'` (the default) is the header of a page. `'compact'` is the header of a pane inside a
|
|
326
|
+
* container that has already named the section — a settings modal with a rail of its own — and
|
|
327
|
+
* drops the medallion and the subtitle, which only repeat what the container said. `media` and
|
|
328
|
+
* the title stay: an entity glyph is identity, and the title is the pane's only name for itself. */
|
|
329
|
+
size?: PageHeaderSize;
|
|
322
330
|
id?: string;
|
|
323
331
|
}
|
|
324
332
|
/**
|
|
@@ -331,7 +339,7 @@ interface PageHeaderProps {
|
|
|
331
339
|
* A header carrying a leading glyph indents its title past the content edge; a bare title sits on
|
|
332
340
|
* it. That difference is deliberate — it is what tells you a page has a mark.
|
|
333
341
|
*/
|
|
334
|
-
declare function PageHeader({ title, subtitle, icon: Icon, media, badge, actions, id }: PageHeaderProps): React$1.JSX.Element;
|
|
342
|
+
declare function PageHeader({ title, subtitle, icon: Icon, media, badge, actions, size, id }: PageHeaderProps): React$1.JSX.Element;
|
|
335
343
|
|
|
336
344
|
interface SectionIntroProps {
|
|
337
345
|
what: React.ReactNode;
|
|
@@ -385,6 +393,16 @@ interface SettingRowProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, '
|
|
|
385
393
|
* an object beside a block.
|
|
386
394
|
*/
|
|
387
395
|
labelTone?: 'primary' | 'secondary';
|
|
396
|
+
/**
|
|
397
|
+
* The value is one nothing on this screen will ever set, so the row draws a lock before it.
|
|
398
|
+
*
|
|
399
|
+
* It is the shape of a stated fact rather than a disabled control: there is no control to
|
|
400
|
+
* disable, and the reader is not being told to come back later. What took the setting away goes
|
|
401
|
+
* in `description`, because an imposed state is shown with its reason in one line
|
|
402
|
+
* (`Guidelines/Controls/State with a reason`) and a reason behind a hover is a reason most
|
|
403
|
+
* readers never get.
|
|
404
|
+
*/
|
|
405
|
+
locked?: boolean;
|
|
388
406
|
/** Names the control this row carries; renders <label>, otherwise <span>. */
|
|
389
407
|
htmlFor?: string;
|
|
390
408
|
/** The right-hand side — a Switch, a Select, a Button, or the value the row states. */
|
|
@@ -666,15 +684,19 @@ declare const MenubarShortcut: {
|
|
|
666
684
|
};
|
|
667
685
|
|
|
668
686
|
/**
|
|
669
|
-
* `status` (#359) is the console's state pill
|
|
670
|
-
*
|
|
671
|
-
*
|
|
672
|
-
*
|
|
673
|
-
*
|
|
674
|
-
*
|
|
675
|
-
*
|
|
676
|
-
*
|
|
677
|
-
* the
|
|
687
|
+
* `status` (#359) is the console's state pill, and it lifts off whatever it lands on: `bg-bg-overlay`
|
|
688
|
+
* is the one fill above the ground in both themes (`Guidelines/Look/Surface tone`), 1.07:1 on a light
|
|
689
|
+
* page and 1.18:1 on a dark one. `outline` gives a status the same hairline frame a button has — and
|
|
690
|
+
* since a ghost button carries no border at rest, the status pill ended up the most button-shaped
|
|
691
|
+
* object in a row. It is deliberately *not* `secondary`: that's the attribute chip (scope, auth
|
|
692
|
+
* method), so a status painted with it reads as an attribute.
|
|
693
|
+
*
|
|
694
|
+
* The plate runs out where the ground is already the top rung. On a `Card` the pill's fill and the
|
|
695
|
+
* card's are one colour in both themes, so the pill keeps `border-border-subtle`, the kit's quietest
|
|
696
|
+
* edge, which is what draws its shape there. That edge is a step below the one `outline` wears,
|
|
697
|
+
* which is what keeps the two apart. Under the cursor the plate is back either way: `EntityRow`
|
|
698
|
+
* washes to `--hov-bg`, and the pill reads 1.30:1 above that wash in light and 1.12:1 below it in
|
|
699
|
+
* dark.
|
|
678
700
|
*
|
|
679
701
|
* `danger-subtle`, `warning-subtle` and `neutral-subtle` are the three rungs of a severity ladder —
|
|
680
702
|
* critical, important, and the rung that is only worth knowing. They are the one place colour marks
|
|
@@ -780,11 +802,19 @@ interface EntityTileProps {
|
|
|
780
802
|
name?: string;
|
|
781
803
|
/** A type glyph. Wins over the initial, and never tints. */
|
|
782
804
|
glyph?: React$1.ReactNode;
|
|
805
|
+
/**
|
|
806
|
+
* `'neutral'` keeps a named object off the tint ramp. `Guidelines/Avatars` already names things
|
|
807
|
+
* that have a name and stay neutral — a group, a connector.
|
|
808
|
+
*
|
|
809
|
+
* Not the full palette: a call site that could pick violet is a call site that can contradict the
|
|
810
|
+
* name a thing is recognised by.
|
|
811
|
+
*/
|
|
812
|
+
tone?: 'auto' | 'neutral';
|
|
783
813
|
src?: string;
|
|
784
814
|
size?: MarkSize;
|
|
785
815
|
label?: string;
|
|
786
816
|
}
|
|
787
|
-
declare function EntityTile({ name, glyph, src, size, label }: EntityTileProps): React$1.JSX.Element;
|
|
817
|
+
declare function EntityTile({ name, glyph, tone, src, size, label }: EntityTileProps): React$1.JSX.Element;
|
|
788
818
|
|
|
789
819
|
declare const Separator: React$1.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
790
820
|
|
|
@@ -818,9 +848,47 @@ declare const Collapsible: React$1.ForwardRefExoticComponent<CollapsiblePrimitiv
|
|
|
818
848
|
declare const CollapsibleTrigger: React$1.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
819
849
|
declare const CollapsibleContent: React$1.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
820
850
|
|
|
821
|
-
|
|
851
|
+
/** A scroll region whose bar is drawn OVER the content rather than beside it (#2357).
|
|
852
|
+
*
|
|
853
|
+
* The platform's own bar is two things we don't want: on Windows and Linux it takes a lane out of
|
|
854
|
+
* the layout, so a region that starts scrolling reflows everything in it, and it is painted by the
|
|
855
|
+
* OS in a grey that answers to neither theme. This draws the bar itself, absolutely positioned, on
|
|
856
|
+
* the kit's own border token — so one declaration is correct in light and dark.
|
|
857
|
+
*
|
|
858
|
+
* `type="scroll"` plus `forceMount` is what makes it appear only when it is wanted. Radix keeps
|
|
859
|
+
* `data-state` on the bar — `visible` while the region is being scrolled, `hidden` once
|
|
860
|
+
* `scrollHideDelay` has passed — and the bar stays mounted so the pointer can bring it back too:
|
|
861
|
+
* hovering anywhere over the region is the other half of the rule, and CSS alone answers it.
|
|
862
|
+
*/
|
|
863
|
+
declare const ScrollArea: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
864
|
+
/** Classes for the scrolling viewport — where a scroll region's own padding belongs, so that
|
|
865
|
+
* the bar rides over the padding instead of being inset by it. */
|
|
866
|
+
viewportClassName?: string;
|
|
867
|
+
/** Forwarded to the viewport, so a caller can reach the element that actually scrolls. */
|
|
868
|
+
viewportProps?: React$1.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Viewport> & {
|
|
869
|
+
[key: `data-${string}`]: string;
|
|
870
|
+
};
|
|
871
|
+
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
822
872
|
declare const ScrollBar: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
823
873
|
|
|
874
|
+
/**
|
|
875
|
+
* SEVERITY IS A TINT AND AN EDGE, NEVER A FILL.
|
|
876
|
+
*
|
|
877
|
+
* The four variants used to paint `--bg-danger`, `--bg-success` and `--bg-warning` — three saturated
|
|
878
|
+
* plates with reversed text on them, each carrying one value for both themes. Two things went wrong
|
|
879
|
+
* with that. A block of solid red is colour at maximum volume marking a *state*, which is the one
|
|
880
|
+
* thing colour does not do in this console (Guidelines/Look/Colour marks actions); and a set of them
|
|
881
|
+
* on one page reads as three warnings shouting over each other.
|
|
882
|
+
*
|
|
883
|
+
* So each variant takes its subtle ground, its own hairline and body text at the page's own tone,
|
|
884
|
+
* and the severity is carried by the edge and by the icon. The `-subtle` family is declared per
|
|
885
|
+
* theme, which the filled one is not — `--bg-danger` is `#78100b` on a white page as readily as on a
|
|
886
|
+
* dark one.
|
|
887
|
+
*
|
|
888
|
+
* `default` keeps the neutral plate and takes `--border-default` rather than `--border-subtle`: the
|
|
889
|
+
* elevated ground is 1.05:1 against the page it sits on, so with a hairline that quiet the box has
|
|
890
|
+
* no edge at all and reads as grey printed on grey.
|
|
891
|
+
*/
|
|
824
892
|
declare const alertVariants: (props?: ({
|
|
825
893
|
variant?: "default" | "destructive" | "success" | "warning" | null | undefined;
|
|
826
894
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
@@ -898,7 +966,62 @@ declare const Command: React$1.ForwardRefExoticComponent<Omit<{
|
|
|
898
966
|
disablePointerSelection?: boolean;
|
|
899
967
|
vimBindings?: boolean;
|
|
900
968
|
} & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
901
|
-
|
|
969
|
+
/** One place the palette can go. */
|
|
970
|
+
interface CommandDialogItem {
|
|
971
|
+
/** Unique within its group. Falls back to the label. */
|
|
972
|
+
id?: string;
|
|
973
|
+
label: React$1.ReactNode;
|
|
974
|
+
/** The second line under the label — the thing this one sits inside. */
|
|
975
|
+
sub?: React$1.ReactNode;
|
|
976
|
+
/** Leading mark — an icon, an avatar, a tile. */
|
|
977
|
+
mark?: React$1.ReactNode;
|
|
978
|
+
/**
|
|
979
|
+
* What the input matches on. Defaults to the heading, the sub and the label joined, so a word
|
|
980
|
+
* that appears only in the group's name still finds the row — and two rows with one label are
|
|
981
|
+
* told apart by the groups they are in rather than reading as one line twice.
|
|
982
|
+
*/
|
|
983
|
+
value?: string;
|
|
984
|
+
onSelect?: () => void;
|
|
985
|
+
}
|
|
986
|
+
interface CommandDialogGroup {
|
|
987
|
+
heading: string;
|
|
988
|
+
items: CommandDialogItem[];
|
|
989
|
+
}
|
|
990
|
+
interface CommandDialogProps extends DialogProps {
|
|
991
|
+
/**
|
|
992
|
+
* The destinations, as headings and rows. Supply these and the dialog draws its own input, list,
|
|
993
|
+
* empty line and key hints; supply `children` instead and it draws whatever you put in it.
|
|
994
|
+
*/
|
|
995
|
+
groups?: CommandDialogGroup[];
|
|
996
|
+
/** The input's placeholder. Read only alongside `groups`. */
|
|
997
|
+
placeholder?: string;
|
|
998
|
+
/** What the list says when nothing matches. Read only alongside `groups`. */
|
|
999
|
+
empty?: React$1.ReactNode;
|
|
1000
|
+
/**
|
|
1001
|
+
* The strip under the list naming the keys that drive the palette. It is drawn by default because
|
|
1002
|
+
* those keys are true of every palette; pass a node to say something else there, or `null` to draw
|
|
1003
|
+
* none. Nothing is drawn while no row matches, whatever is passed — the slot is under a list, and
|
|
1004
|
+
* an empty list has no keys. Read only alongside `groups`.
|
|
1005
|
+
*/
|
|
1006
|
+
keyHints?: React$1.ReactNode;
|
|
1007
|
+
/**
|
|
1008
|
+
* Bind ⌘K (Ctrl+K off a Mac) to toggle the dialog.
|
|
1009
|
+
*
|
|
1010
|
+
* It is the dialog's rather than the caller's because the shortcut has to work from anywhere on
|
|
1011
|
+
* the page, and a listener hung off whichever row happens to be mounted works from wherever that
|
|
1012
|
+
* row is. Needs `onOpenChange` — there is nothing to toggle without it.
|
|
1013
|
+
*/
|
|
1014
|
+
shortcut?: boolean;
|
|
1015
|
+
}
|
|
1016
|
+
/**
|
|
1017
|
+
* A command palette in a dialog.
|
|
1018
|
+
*
|
|
1019
|
+
* `groups` is the whole of a palette that searches a navigation: one heading per area, one row per
|
|
1020
|
+
* place. What it does not decide is where the rows come from — reading them off an app's own
|
|
1021
|
+
* navigation tables is that app's business, and a list kept beside those tables is a list that
|
|
1022
|
+
* drifts from them.
|
|
1023
|
+
*/
|
|
1024
|
+
declare const CommandDialog: ({ children, groups, placeholder, empty, keyHints, shortcut, open, onOpenChange, ...props }: CommandDialogProps) => React$1.JSX.Element;
|
|
902
1025
|
declare const CommandInput: React$1.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React$1.InputHTMLAttributes<HTMLInputElement>> & {
|
|
903
1026
|
ref?: React$1.Ref<HTMLInputElement>;
|
|
904
1027
|
} & {
|
|
@@ -947,12 +1070,27 @@ interface CommandItemProps extends React$1.ComponentPropsWithoutRef<typeof Comma
|
|
|
947
1070
|
/** The second line under the label. */
|
|
948
1071
|
sub?: React$1.ReactNode;
|
|
949
1072
|
}
|
|
1073
|
+
/**
|
|
1074
|
+
* `data-selected` here is where the arrow keys and the pointer are standing, not what the reader has
|
|
1075
|
+
* chosen, so the row takes a plate and the tone and no weight step: bold is a wider glyph, and a row
|
|
1076
|
+
* that thickens under the pointer reflows its own text and shifts every row below it
|
|
1077
|
+
* (`Guidelines/Look/Selection weight`). The plate is `--hov-bg`, the one the pointer paints
|
|
1078
|
+
* everywhere else in the console, so it steps the same way off the palette's own fill as a row does
|
|
1079
|
+
* off a card: 1.12:1 down in light, 1.12:1 up in dark.
|
|
1080
|
+
*/
|
|
950
1081
|
declare const CommandItem: React$1.ForwardRefExoticComponent<CommandItemProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
951
1082
|
declare const CommandShortcut: {
|
|
952
1083
|
({ className, ...props }: React$1.HTMLAttributes<HTMLSpanElement>): React$1.JSX.Element;
|
|
953
1084
|
displayName: string;
|
|
954
1085
|
};
|
|
955
1086
|
|
|
1087
|
+
/**
|
|
1088
|
+
* @deprecated A horizontal bar of menu triggers across the top of a page. This console navigates
|
|
1089
|
+
* from a rail: `AppSidebar` (with `NavRow` for a row) holds the sections, `Tabs` switches within a
|
|
1090
|
+
* page, and `DropdownMenu` or `MenuPopup` opens a menu from a trigger. It arrived with the shadcn
|
|
1091
|
+
* set and no surface here has ever drawn one. Removed in a future major, and every
|
|
1092
|
+
* `NavigationMenu*` part goes with it.
|
|
1093
|
+
*/
|
|
956
1094
|
declare const NavigationMenu: React$1.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuProps & React$1.RefAttributes<HTMLElement>, "ref"> & React$1.RefAttributes<HTMLElement>>;
|
|
957
1095
|
declare const NavigationMenuList: React$1.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuListProps & React$1.RefAttributes<HTMLUListElement>, "ref"> & React$1.RefAttributes<HTMLUListElement>>;
|
|
958
1096
|
declare const NavigationMenuItem: React$1.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuItemProps & React$1.RefAttributes<HTMLLIElement>>;
|
|
@@ -978,6 +1116,9 @@ declare function useTheme(): {
|
|
|
978
1116
|
* `system` remains a stored preference — a console nobody has told defaults to it — and pressing
|
|
979
1117
|
* this mark ends it. That is why the name says so while the preference is still `system`: the press
|
|
980
1118
|
* costs something a person cannot see, and `ThemePicker` is where it is given back.
|
|
1119
|
+
*
|
|
1120
|
+
* It rests on `topBarMarkClass` — it stands in the top bar's row of marks, and how that row rests is
|
|
1121
|
+
* one thing rather than one per component.
|
|
981
1122
|
*/
|
|
982
1123
|
declare function ThemeToggle(): React$1.JSX.Element;
|
|
983
1124
|
|
|
@@ -1180,6 +1321,22 @@ interface StatCardProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
|
1180
1321
|
hint?: React$1.ReactNode;
|
|
1181
1322
|
sub?: React$1.ReactNode;
|
|
1182
1323
|
icon?: LucideIcon;
|
|
1324
|
+
/**
|
|
1325
|
+
* The shape behind the value, drawn under the figure and its delta: `delta` says how far the
|
|
1326
|
+
* number moved, this says the path it took. A chart is what goes here, and the card never draws
|
|
1327
|
+
* one — it holds the region and the caller fills it, so a card is still a card and not a
|
|
1328
|
+
* charting API.
|
|
1329
|
+
*
|
|
1330
|
+
* Give what goes in it a height of its own. Passing `null` keeps the room anyway — 40px, the
|
|
1331
|
+
* height a chart here is expected to take — so a card whose series is empty stands as tall as
|
|
1332
|
+
* the cards beside it; omit the prop and there is no region at all.
|
|
1333
|
+
*
|
|
1334
|
+
* It is decoration: the value is written out above it. What goes in hides itself from the
|
|
1335
|
+
* accessibility tree the way an `aria-hidden` chart does — the card will not do it for you, since
|
|
1336
|
+
* hiding a region it has never seen would swallow a caption and put a chart's own tooltip out of
|
|
1337
|
+
* reach.
|
|
1338
|
+
*/
|
|
1339
|
+
trend?: React$1.ReactNode;
|
|
1183
1340
|
}
|
|
1184
1341
|
declare const StatCard: React$1.ForwardRefExoticComponent<StatCardProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1185
1342
|
|
|
@@ -1369,9 +1526,16 @@ interface UserMenuProps {
|
|
|
1369
1526
|
user: UserMenuUser;
|
|
1370
1527
|
items: UserMenuItem[];
|
|
1371
1528
|
collapsed?: boolean;
|
|
1529
|
+
/**
|
|
1530
|
+
* The name-on-hover for the collapsed trigger. On by default, because in a 52px rail the tooltip
|
|
1531
|
+
* is the only place the name appears at all. A top bar is the case for turning it off: the avatar
|
|
1532
|
+
* sits among icon marks that name themselves the same way, and one more of them naming *you* is
|
|
1533
|
+
* the thing you already know.
|
|
1534
|
+
*/
|
|
1535
|
+
tooltip?: boolean;
|
|
1372
1536
|
align?: 'start' | 'center' | 'end';
|
|
1373
1537
|
}
|
|
1374
|
-
declare function UserMenu({ user, items, collapsed, align }: UserMenuProps): React$1.JSX.Element;
|
|
1538
|
+
declare function UserMenu({ user, items, collapsed, tooltip, align }: UserMenuProps): React$1.JSX.Element;
|
|
1375
1539
|
|
|
1376
1540
|
/** True when `name` (kebab-case) maps to a real lucide-react icon. */
|
|
1377
1541
|
declare function isKnownExtensionIcon(name: string): boolean;
|
|
@@ -1904,8 +2068,9 @@ interface BackLinkProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElem
|
|
|
1904
2068
|
* edge, naming the parent rather than saying "Back".
|
|
1905
2069
|
*
|
|
1906
2070
|
* It is not a second trail: the top bar keeps the whole breadcrumb, and the back/forward history
|
|
1907
|
-
* arrows are gone (#337), which is what leaves this the one control that walks
|
|
1908
|
-
*
|
|
2071
|
+
* arrows are gone (#337), which is what leaves this the one control that walks the content column.
|
|
2072
|
+
* A rail's own drill-in walks with `SidebarBackHeader`, inside the rail. A **wizard gets none** —
|
|
2073
|
+
* its steps are the navigation. See `Guidelines/Page & navigation/Second level navigation`.
|
|
1909
2074
|
*
|
|
1910
2075
|
* **Two ways to spell the destination, and one of them is required.**
|
|
1911
2076
|
*
|
|
@@ -2147,8 +2312,8 @@ interface GrantRolePickerProps {
|
|
|
2147
2312
|
* It is not a `Select`. A select answers with one of its options; this one can also take the thing
|
|
2148
2313
|
* it describes away, and a command sitting among options is neither a listbox nor a set of radios.
|
|
2149
2314
|
* So it is a menu, and the removal is a menu item (Guidelines/Controls/When it isn't a Button),
|
|
2150
|
-
* which reddens under the pointer or the keyboard and drops the
|
|
2151
|
-
* rests on, because a row repeated down a menu would shout (Guidelines/Controls/Destructive
|
|
2315
|
+
* which reddens under the pointer or the keyboard and drops the frame and the wash a destructive
|
|
2316
|
+
* `Button` rests on, because a row repeated down a menu would shout (Guidelines/Controls/Destructive
|
|
2152
2317
|
* actions).
|
|
2153
2318
|
*/
|
|
2154
2319
|
declare const GrantRolePicker: React$1.ForwardRefExoticComponent<GrantRolePickerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
@@ -2261,7 +2426,7 @@ interface RemovableChipProps extends Omit<React$1.HTMLAttributes<HTMLSpanElement
|
|
|
2261
2426
|
* nothing in it to click. This carries a control, and everything below follows from that.
|
|
2262
2427
|
*
|
|
2263
2428
|
* **The ✕ stays grey on hover, and that is the point.** Every other remove in this console wears its
|
|
2264
|
-
* danger — `Button variant="destructive"` rests on a red
|
|
2429
|
+
* danger — `Button variant="destructive"` rests on a red wash and reddens under the pointer, which
|
|
2265
2430
|
* is how a revoke or a teardown announces what it costs (Guidelines/Destructive actions). This one does
|
|
2266
2431
|
* not, because **taking someone out of a draft has not done anything yet**: nothing is revoked,
|
|
2267
2432
|
* nothing is saved, and the only state it changes is a list you are still assembling. Red here
|
|
@@ -2323,6 +2488,10 @@ declare function useSidebar(options?: UseSidebarOptions): UseSidebarResult;
|
|
|
2323
2488
|
|
|
2324
2489
|
/** `rail` is the sidebar, `menu` a popup surface, `card` a settings line inside a `Card`. */
|
|
2325
2490
|
type NavRowVariant = 'rail' | 'menu' | 'card';
|
|
2491
|
+
/** What pressing the row does, in the words of `Guidelines/Lists & rows/List items`: `drill` opens
|
|
2492
|
+
* the thing as a page of its own, `disclosure` grows its detail underneath. Everything else goes
|
|
2493
|
+
* bare, which is why there is no third name here. */
|
|
2494
|
+
type NavRowMark = 'drill' | 'disclosure';
|
|
2326
2495
|
interface NavRowOwnProps {
|
|
2327
2496
|
/** Leading glyph. Rendered in a fixed 20px box with SVGs normalized to 18px — 16px and 16px on
|
|
2328
2497
|
* `card`, where the row sits beside body text rather than in a rail.
|
|
@@ -2348,9 +2517,19 @@ interface NavRowOwnProps {
|
|
|
2348
2517
|
* A falsy value (`null`/`false`/`0`/`''`) renders nothing — e.g. passing
|
|
2349
2518
|
* `trailing={count}` with `count === 0` produces no adornment, not a "0". */
|
|
2350
2519
|
trailing?: React$1.ReactNode;
|
|
2520
|
+
/** The kit's own trailing mark, drawn into the same slot `trailing` fills. A row that names one
|
|
2521
|
+
* takes that slot: `trailing` fills it only where no mark is named, so a caller cannot declare
|
|
2522
|
+
* `mark="drill"` and draw something else in its place. Dropped at the narrow width — see
|
|
2523
|
+
* `hideLabel`. */
|
|
2524
|
+
mark?: NavRowMark;
|
|
2525
|
+
/** Whether a `disclosure` row's detail is open: the caret turns 180°, and the row states
|
|
2526
|
+
* `aria-expanded` unless its caller states one of its own. `drill` reads it as nothing. */
|
|
2527
|
+
markOpen?: boolean;
|
|
2351
2528
|
/** The trailing value is an absence ("None yet") — a step quieter. */
|
|
2352
2529
|
mutedTrailing?: boolean;
|
|
2353
|
-
/** Icon-only row (collapsed rails). `label` becomes the aria-label
|
|
2530
|
+
/** Icon-only row (collapsed rails). `label` becomes the aria-label, and `mark` draws nothing:
|
|
2531
|
+
* at that width there is no label left for a mark to point at. A `trailing` node stays — what
|
|
2532
|
+
* a caller puts in the slot is the caller's to drop. */
|
|
2354
2533
|
hideLabel?: boolean;
|
|
2355
2534
|
}
|
|
2356
2535
|
/** Render the single child element instead of a button, e.g. a router <Link>.
|
|
@@ -2369,14 +2548,71 @@ type NavRowProps = NavRowOwnProps & Omit<React$1.ComponentPropsWithoutRef<'butto
|
|
|
2369
2548
|
*
|
|
2370
2549
|
* The `card` variant is the settings line that leaves the page for another section — People →
|
|
2371
2550
|
* Members, Security → Identity. It carries no trailing mark and no underline: a section jump is
|
|
2372
|
-
* not an entity opening as a page, so the hover fill is the whole affordance.
|
|
2373
|
-
*
|
|
2374
|
-
* Rail rows are designed for the `bg-surface` canvas. In the light theme `--hov-bg` is an
|
|
2375
|
-
* opaque `#ffffff` plate, so a rail `NavRow` has no hover contrast on a surface that is
|
|
2376
|
-
* already white — notably a `--menu-bg` plate. Use the `menu` variant there; its
|
|
2377
|
-
* `--menu-hov` is tuned for that surface. */
|
|
2551
|
+
* not an entity opening as a page, so the hover fill is the whole affordance. */
|
|
2378
2552
|
declare const NavRow: React$1.ForwardRefExoticComponent<NavRowProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
2379
2553
|
|
|
2554
|
+
interface RailToggleProps extends React$1.ComponentPropsWithoutRef<'button'> {
|
|
2555
|
+
/** Which state the rail is in now, not what the press will do. The mark and the accessible name
|
|
2556
|
+
* are both read off it, so a rail cannot say one thing and draw another. */
|
|
2557
|
+
collapsed: boolean;
|
|
2558
|
+
}
|
|
2559
|
+
/**
|
|
2560
|
+
* The control that opens and closes a rail: one box on the glyph column, and a mark whose bar
|
|
2561
|
+
* crosses it while the rail travels. Both are timed from `.motion-rail-collapse`, so the bar and
|
|
2562
|
+
* the edge arrive together and both go to nothing under `prefers-reduced-motion`. It draws its own
|
|
2563
|
+
* mark: the mark is the state, so a caller's would be a rail saying nothing about which side it
|
|
2564
|
+
* is on.
|
|
2565
|
+
*
|
|
2566
|
+
* `AppSidebar` already stands one at its foot, and a consumer of that rail never mounts this. It
|
|
2567
|
+
* ships for the other rail — one a product draws itself, because it carries two panes or a shape
|
|
2568
|
+
* `AppSidebar` does not offer — where the alternative is a hand-copied 40px box and a hand-copied
|
|
2569
|
+
* seam that drift from the rail beside them.
|
|
2570
|
+
*
|
|
2571
|
+
* `collapsed` is the only required prop and it is state, not intent: the accessible name says what
|
|
2572
|
+
* the press will do (`Expand sidebar` when closed), `aria-expanded` reports what is true now, and a
|
|
2573
|
+
* caller's own `aria-label` replaces the first without touching the second — which is how the
|
|
2574
|
+
* console gives the control the words its command palette already uses for it.
|
|
2575
|
+
*
|
|
2576
|
+
* No tooltip of its own. On a closed rail every neighbour has one, so the call site composes it —
|
|
2577
|
+
* and the label it shows is then the same string this takes.
|
|
2578
|
+
*/
|
|
2579
|
+
declare const RailToggle: React$1.ForwardRefExoticComponent<RailToggleProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
2580
|
+
|
|
2581
|
+
interface QuickSearchRowProps {
|
|
2582
|
+
/** Opens the palette. The row is a way in, not the thing it opens. */
|
|
2583
|
+
onOpen: () => void;
|
|
2584
|
+
/** The words on the row, and the name it answers to at the narrow width. */
|
|
2585
|
+
label?: string;
|
|
2586
|
+
/**
|
|
2587
|
+
* The second way in, stated rather than implied — this is the one fact a person needs before they
|
|
2588
|
+
* stop reaching for the sidebar at all. `false` for a rail with no shortcut bound.
|
|
2589
|
+
*/
|
|
2590
|
+
shortcut?: React$1.ReactNode;
|
|
2591
|
+
/**
|
|
2592
|
+
* The narrow rail, which draws the plain row instead of the field: the shortcut goes and the
|
|
2593
|
+
* tooltip carries the words. Not `hideLabel` passed through — a rail this narrow has no field in
|
|
2594
|
+
* it at all, so the two widths are two shapes rather than one shape with its words hidden.
|
|
2595
|
+
*/
|
|
2596
|
+
collapsed?: boolean;
|
|
2597
|
+
/** Leading mark. The magnifier, unless the rail draws search as something else. */
|
|
2598
|
+
icon?: React$1.ReactNode;
|
|
2599
|
+
}
|
|
2600
|
+
/**
|
|
2601
|
+
* A rail's first row: it opens the command palette, and states the shortcut that reaches the same
|
|
2602
|
+
* palette without it.
|
|
2603
|
+
*
|
|
2604
|
+
* It wears a field — a frame, a magnifier inside it, the label at placeholder tone — because that is
|
|
2605
|
+
* the shape a person looks for when they arrive wanting to search, and it is what Cloudflare, Linear
|
|
2606
|
+
* and Vercel each put at the top of a sidebar. It is never a text input: what it opens is where the
|
|
2607
|
+
* typing happens, and a field in the rail that ate keystrokes would be a second search. A collapsed
|
|
2608
|
+
* rail draws the plain row instead — there is no field at 64px, and a frame with nothing in it is
|
|
2609
|
+
* not one. Needs a `TooltipProvider` above it, like every tooltip here.
|
|
2610
|
+
*/
|
|
2611
|
+
declare function QuickSearchRow({ onOpen, label, shortcut, collapsed, icon, }: QuickSearchRowProps): React$1.JSX.Element;
|
|
2612
|
+
declare namespace QuickSearchRow {
|
|
2613
|
+
var displayName: string;
|
|
2614
|
+
}
|
|
2615
|
+
|
|
2380
2616
|
type NavSectionLabelProps = React$1.HTMLAttributes<HTMLDivElement>;
|
|
2381
2617
|
/** Section header for nav rails and menu popups. Insets match the 0.3.0 prototype
|
|
2382
2618
|
* (4px 4px 2px 8px), so it hangs slightly left of the rows it labels. */
|
|
@@ -2442,6 +2678,38 @@ interface OrgProductSwitcherItem {
|
|
|
2442
2678
|
/** Optional leading mark. Falls back to a lettered tile built from `name`. */
|
|
2443
2679
|
icon?: React$1.ReactNode;
|
|
2444
2680
|
}
|
|
2681
|
+
/**
|
|
2682
|
+
* A product's lifecycle state (#343). These are the platform's own three — the admin API has
|
|
2683
|
+
* `product_block` / `unblock` and `product_archive` / `unarchive`, and nothing else. "Paused" was
|
|
2684
|
+
* invented once and is gone; there is no pause operation to reach it.
|
|
2685
|
+
*
|
|
2686
|
+
* `active` renders nothing. It is what almost every product is, so a badge on it states nothing and
|
|
2687
|
+
* turns a scannable list into a column of identical pills. The two states that stop a product being
|
|
2688
|
+
* usable are the ones worth a mark, and they get the `status` badge (Guidelines/Marks/Badge kinds).
|
|
2689
|
+
*
|
|
2690
|
+
* `archived` is hidden org-wide and read-only, restorable any time. `blocked` is imposed from the
|
|
2691
|
+
* outside — a platform admin blocks a product — so it is a state a console observes, never one it
|
|
2692
|
+
* causes.
|
|
2693
|
+
*/
|
|
2694
|
+
type ProductStatus = 'active' | 'blocked' | 'archived';
|
|
2695
|
+
/**
|
|
2696
|
+
* The one place the silent-when-active rule is written down, for every surface that lists products —
|
|
2697
|
+
* this menu and the console's own product lists alike. Returns `undefined` rather than a badge
|
|
2698
|
+
* rendering nothing, so a caller's `meta`/`badge` slot stays genuinely empty and doesn't reserve a
|
|
2699
|
+
* gap.
|
|
2700
|
+
*/
|
|
2701
|
+
declare function productStatusBadge(status: ProductStatus): React$1.ReactNode | undefined;
|
|
2702
|
+
/**
|
|
2703
|
+
* A product in the menu. An organization has no lifecycle state, which is why this is a second type
|
|
2704
|
+
* rather than a field on the one above.
|
|
2705
|
+
*
|
|
2706
|
+
* `status` is optional so that adding it does not break every consumer already passing products, and
|
|
2707
|
+
* an omission reads as `active` — which is the risk the field exists to answer: a blocked product
|
|
2708
|
+
* listed without one is offered as if it were fine. Pass it wherever the state is known.
|
|
2709
|
+
*/
|
|
2710
|
+
interface OrgProductSwitcherProduct extends OrgProductSwitcherItem {
|
|
2711
|
+
status?: ProductStatus;
|
|
2712
|
+
}
|
|
2445
2713
|
/** A row in the menu's footer action group — e.g. Create product, Product settings, Org
|
|
2446
2714
|
* settings. `href` renders a link (right-click / new-tab work); otherwise `onSelect` fires. */
|
|
2447
2715
|
interface OrgProductSwitcherAction {
|
|
@@ -2452,34 +2720,63 @@ interface OrgProductSwitcherAction {
|
|
|
2452
2720
|
href?: string;
|
|
2453
2721
|
}
|
|
2454
2722
|
interface OrgProductSwitcherProps {
|
|
2455
|
-
/**
|
|
2456
|
-
|
|
2457
|
-
|
|
2458
|
-
|
|
2459
|
-
|
|
2460
|
-
|
|
2461
|
-
|
|
2462
|
-
|
|
2723
|
+
/** The organizations the user can switch to. Supply these and the menu is the organizations —
|
|
2724
|
+
* whatever else is passed. Omit them for a switcher scoped to one org, and the menu is the
|
|
2725
|
+
* products. */
|
|
2726
|
+
organizations?: OrgProductSwitcherItem[];
|
|
2727
|
+
activeOrgId?: string;
|
|
2728
|
+
onOrgSelect?: (id: string) => void;
|
|
2729
|
+
/**
|
|
2730
|
+
* The products to switch between. Each carries its `status`, which the row states.
|
|
2731
|
+
*
|
|
2732
|
+
* @deprecated Passing `products` alongside `organizations` is deprecated and now lists the
|
|
2733
|
+
* organizations alone: give the products to their own switcher — the top bar's
|
|
2734
|
+
* `trigger="inline"` — and leave this one the organizations. `products` on its own is unchanged,
|
|
2735
|
+
* and so are `activeProductId` and `onProductSelect`, which the trigger reads either way.
|
|
2736
|
+
*/
|
|
2737
|
+
products?: OrgProductSwitcherProduct[];
|
|
2738
|
+
/** The product the trigger names. Read whichever list the menu shows, so a switcher listing
|
|
2739
|
+
* organizations still says which product you are in. */
|
|
2463
2740
|
activeProductId?: string;
|
|
2741
|
+
/** Fires when a product row is chosen. A menu showing the organizations has no product rows. */
|
|
2464
2742
|
onProductSelect?: (id: string) => void;
|
|
2465
|
-
/** Footer actions below the
|
|
2743
|
+
/** Footer actions below the list (Create organization, Create product, …). The group and
|
|
2466
2744
|
* its divider render only when this is non-empty — the consumer owns which rows appear. */
|
|
2467
2745
|
actions?: OrgProductSwitcherAction[];
|
|
2746
|
+
/**
|
|
2747
|
+
* The trigger's shape, and it follows from where the switcher sits rather than from taste.
|
|
2748
|
+
*
|
|
2749
|
+
* `stacked` is the sidebar header's box: the org over the product, full width, behind the mark
|
|
2750
|
+
* the organizations switcher leads with — a products switcher leads with the name in either form.
|
|
2751
|
+
* `inline` is one line at a top bar's weight — the name you are in and the chevron, hugging its
|
|
2752
|
+
* own words — because a bar has no column to fill and the mark beside it is the page's, not the
|
|
2753
|
+
* switcher's. The menu is the same either way: switching product is the same act wherever the
|
|
2754
|
+
* console offers it.
|
|
2755
|
+
*/
|
|
2756
|
+
trigger?: 'stacked' | 'inline';
|
|
2468
2757
|
/** Accessible name for the trigger. Defaults to `"<org> / <product>"`, and to whatever the
|
|
2469
2758
|
* trigger reads before an org resolves. */
|
|
2470
2759
|
'aria-label'?: string;
|
|
2471
2760
|
className?: string;
|
|
2472
2761
|
}
|
|
2473
2762
|
/**
|
|
2474
|
-
*
|
|
2475
|
-
*
|
|
2476
|
-
*
|
|
2763
|
+
* The switcher for the sidebar header (#81) and the top bar: a control that names where you are and
|
|
2764
|
+
* opens one list to move.
|
|
2765
|
+
*
|
|
2766
|
+
* **One switcher, one list.** `organizations` supplied and it is the organizations; `organizations`
|
|
2767
|
+
* omitted and it is the products. The rail carries the organizations and the bar's `inline` trigger
|
|
2768
|
+
* carries the products, so a console offers each switch in one place and the trigger names the
|
|
2769
|
+
* product either way.
|
|
2770
|
+
*
|
|
2771
|
+
* The list is always searched — a field above the rows whatever their number, so nothing about the
|
|
2772
|
+
* control depends on how many things you happen to own. Every product states the state it is in on
|
|
2773
|
+
* its row, in the console's own words: `active` says nothing, which is the rule and not a gap.
|
|
2477
2774
|
*
|
|
2478
2775
|
* Presentational: the consumer owns selection state and re-supplies `products` +
|
|
2479
2776
|
* `activeProductId` for the newly-selected org. Wiring org/product switches to routing is the
|
|
2480
2777
|
* consumer's job.
|
|
2481
2778
|
*/
|
|
2482
|
-
declare function OrgProductSwitcher({ organizations, activeOrgId, onOrgSelect, products, activeProductId, onProductSelect, actions, className, ...props }: OrgProductSwitcherProps): React$1.JSX.Element;
|
|
2779
|
+
declare function OrgProductSwitcher({ organizations, activeOrgId, onOrgSelect, products, activeProductId, onProductSelect, actions, trigger, className, ...props }: OrgProductSwitcherProps): React$1.JSX.Element;
|
|
2483
2780
|
declare namespace OrgProductSwitcher {
|
|
2484
2781
|
var displayName: string;
|
|
2485
2782
|
}
|
|
@@ -2515,14 +2812,20 @@ interface SidebarBackHeaderProps extends Omit<React$1.HTMLAttributes<HTMLElement
|
|
|
2515
2812
|
* (`onTitleClick`).
|
|
2516
2813
|
* - **Single mode** (`onTitleClick` omitted): the whole row is one native button (`onBack`).
|
|
2517
2814
|
*
|
|
2518
|
-
* The row adds NO horizontal padding of its own — the parent pane owns horizontal inset.
|
|
2815
|
+
* The row adds NO horizontal padding of its own — the parent pane owns horizontal inset.
|
|
2816
|
+
*
|
|
2817
|
+
* **Beside `BackLink`.** This one walks the *rail*: it heads a drilled pane and takes the rail
|
|
2818
|
+
* back to the rows it came from, changing which navigation is on screen and not which page is.
|
|
2819
|
+
* `BackLink` walks the *page* — one control above a sub-page's title, on the content column's
|
|
2820
|
+
* left edge, naming the parent (`Guidelines/Second level navigation`). A drilled rail beside an
|
|
2821
|
+
* entity page shows both at once, so they are not two spellings of one control. */
|
|
2519
2822
|
declare function SidebarBackHeader({ title, onBack, onTitleClick, backLabel, arrowProps, titleProps, className, ...rowProps }: SidebarBackHeaderProps): React$1.JSX.Element;
|
|
2520
2823
|
declare namespace SidebarBackHeader {
|
|
2521
2824
|
var displayName: string;
|
|
2522
2825
|
}
|
|
2523
2826
|
|
|
2524
2827
|
interface TopBarProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
2525
|
-
/**
|
|
2828
|
+
/** What sits at the leading edge. `OrgProductSwitcher` is what normally goes here. */
|
|
2526
2829
|
left?: React$1.ReactNode;
|
|
2527
2830
|
/** What rests at the right edge. `TopBarUtilities` is what normally goes here. */
|
|
2528
2831
|
right?: React$1.ReactNode;
|
|
@@ -2532,7 +2835,7 @@ interface TopBarProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
|
2532
2835
|
* Goes in `AppShell`'s `topBar` slot.
|
|
2533
2836
|
*
|
|
2534
2837
|
* It writes no horizontal inset, because `AppShell` spells that once for this row and for `main`
|
|
2535
|
-
* together — so
|
|
2838
|
+
* together — so `left` starts on the content's left edge because the shell puts them both there,
|
|
2536
2839
|
* not because two files agreed on the same number. It draws no bottom border either: the band already
|
|
2537
2840
|
* aligns with the sidebar header, and the rail's divider is the line for both.
|
|
2538
2841
|
*
|
|
@@ -2557,16 +2860,16 @@ interface TopBarUtilitiesProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
|
2557
2860
|
items: TopBarUtility[];
|
|
2558
2861
|
}
|
|
2559
2862
|
/**
|
|
2560
|
-
* The utility marks resting at the top bar's right edge —
|
|
2863
|
+
* The utility marks resting at the top bar's right edge — feedback, support, and whatever else
|
|
2864
|
+
* a product parks there.
|
|
2561
2865
|
*
|
|
2562
2866
|
* The row is one set of marks, and that is the whole component: same form, same weight, name carried
|
|
2563
2867
|
* by the tooltip. A visible label on one of them makes it read as a button standing among glyphs, and
|
|
2564
2868
|
* a frame on one makes it read as a different kind of control — so the row spells neither, and a call
|
|
2565
2869
|
* site cannot ask for them. Which marks a product picks, and in what order, is the `items` array; how
|
|
2566
|
-
* they rest is
|
|
2870
|
+
* they rest is `topBarMarkClass`, which is not negotiable and not this component's alone.
|
|
2567
2871
|
*
|
|
2568
|
-
* Every mark is a button. A mark that navigates has no arm here yet —
|
|
2569
|
-
* no `asChild`, so an anchor cannot wear it — and until it does, a destination is an `onClick`.
|
|
2872
|
+
* Every mark is a button. A mark that navigates has no arm here yet — a destination is an `onClick`.
|
|
2570
2873
|
*
|
|
2571
2874
|
* Needs a `TooltipProvider` above it. `AppShell` mounts one, so a top bar inside the shell has it.
|
|
2572
2875
|
*/
|
|
@@ -2634,10 +2937,9 @@ declare const Col: React$1.ForwardRefExoticComponent<ColProps & React$1.RefAttri
|
|
|
2634
2937
|
/**
|
|
2635
2938
|
* The page column: the one grid a console page lays its cards on, in one of two widths.
|
|
2636
2939
|
*
|
|
2637
|
-
* `reading` (the default) is capped and centred in the well
|
|
2638
|
-
*
|
|
2639
|
-
*
|
|
2640
|
-
* log or a chart: something that gets better with horizontal room.
|
|
2940
|
+
* `reading` (the default) is capped and centred in the well, which is most of the console; `full`
|
|
2941
|
+
* drops the cap and fills it. Which one a page takes is Guidelines/Page & navigation/Page column's
|
|
2942
|
+
* answer.
|
|
2641
2943
|
*
|
|
2642
2944
|
* It writes no horizontal padding, ever. `AppShell` spells the inset once for `main` and the
|
|
2643
2945
|
* top-bar row together, so a column that padded itself again would push the page off the trail
|
|
@@ -2727,7 +3029,7 @@ type ConnectorStatus = 'active' | 'needs-reconnect' | 'not-connected';
|
|
|
2727
3029
|
interface ConnectorCardProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
2728
3030
|
/**
|
|
2729
3031
|
* The account name — what this connector is linked WITH, never a bare provider name and never a
|
|
2730
|
-
* bare "Connected" (#270). E.g. "GitHub
|
|
3032
|
+
* bare "Connected" (#270). E.g. "GitHub: acme", "Google Ads: ads@acme.com".
|
|
2731
3033
|
*/
|
|
2732
3034
|
name: string;
|
|
2733
3035
|
/** What kind of external account this is, in the provider's words: "GitHub organization". */
|
|
@@ -3069,7 +3371,7 @@ interface NotificationToastProps {
|
|
|
3069
3371
|
item: NotificationItem;
|
|
3070
3372
|
/** Provenance shown once per run of same-source cards. Default `true`. */
|
|
3071
3373
|
showSource?: boolean;
|
|
3072
|
-
/** A short state line under the body, e.g. "Awaiting your decision
|
|
3374
|
+
/** A short state line under the body, e.g. "Awaiting your decision. Expires in 20s." */
|
|
3073
3375
|
note?: React$1.ReactNode;
|
|
3074
3376
|
/** The card's own controls: mute the source, turn its pushes off. Sits before the dismiss ✕. */
|
|
3075
3377
|
overflow?: React$1.ReactNode;
|
|
@@ -3279,10 +3581,10 @@ type ThemePickerProps = ThemePickerBaseProps & ({
|
|
|
3279
3581
|
onValueChange?: (theme: Theme) => void;
|
|
3280
3582
|
});
|
|
3281
3583
|
/**
|
|
3282
|
-
* Choosing the console's theme, by looking at it:
|
|
3283
|
-
*
|
|
3284
|
-
*
|
|
3285
|
-
* offering only light and dark would contradict the console's own control.
|
|
3584
|
+
* Choosing the console's theme, by looking at it: every card is a miniature of the console, Light and
|
|
3585
|
+
* Dark in the theme they offer and Auto in both at once across one diagonal cut, because it follows
|
|
3586
|
+
* the machine. Auto is `system`, and it is here because `ThemeToggle` already cycles through it — a
|
|
3587
|
+
* picker offering only light and dark would contradict the console's own control.
|
|
3286
3588
|
*/
|
|
3287
3589
|
declare const ThemePicker: React$1.ForwardRefExoticComponent<ThemePickerProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
3288
3590
|
|
|
@@ -3478,4 +3780,4 @@ interface RatingScaleProps extends Omit<React$1.ComponentPropsWithoutRef<typeof
|
|
|
3478
3780
|
}
|
|
3479
3781
|
declare const RatingScale: React$1.ForwardRefExoticComponent<RatingScaleProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
3480
3782
|
|
|
3481
|
-
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AddPicker, type AddPickerItem, type AddPickerProps, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, AttachmentChip, type AttachmentChipProps, type AttachmentState, AutoHeight, type AutoHeightProps, Avatar, AvatarFallback, AvatarImage, BackLink, type BackLinkProps, Badge, type BadgeProps, type BeneficialOwnerPayload, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, COUNTRY_OPTIONS, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardNote, type CardNoteProps, type CardProps, CardTitle, type CardTitleProps, Carousel, type CarouselApi, CarouselContent, type CarouselContextProps, CarouselItem, CarouselNext, type CarouselOptions, type CarouselPlugin, CarouselPrevious, type CarouselProps, Checkbox, Code, CodeBlock, type CodeBlockProps, type CodeLang, type CodeProps, type CodeVariant, Col, type ColProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, type CommandItemProps, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogStepUp, ConnectorCard, type ConnectorCardProps, type ConnectorOrigin, type ConnectorStatus, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, DatePicker, type DatePickerProps, DecorativeIcon, type DecorativeIconProps, type DeltaDirection, type DeltaTone, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DocsLink, type DocsLinkProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, EntityRow, type EntityRowOpens, type EntityRowOpensProps, type EntityRowProps, EntityTile, type EntityTileProps, ExtensionIcon, type ExtensionIconProps, FeedbackButton, type FeedbackButtonLabels, type FeedbackButtonProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GlyphAvatar, type GlyphAvatarProps, type GrantRole, type GrantRoleNotes, GrantRolePicker, type GrantRolePickerProps, GrantRow, type GrantRowProps, Grid, GridOverlay, type GridOverlayProps, type GridProps, HoverCard, HoverCardContent, HoverCardTrigger, IconHint, type IconHintProps, ImageCropDialog, type ImageCropDialogProps, type ImageCropShape, type ImageCropType, ImageCropper, type ImageCropperProps, ImageUpload, type ImageUploadProps, type ImageUploadSize, InlineError, type InlineErrorProps, Input, InputAddon, type InputAddonProps, InputGroup, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, ListCells, type ListCellsProps, type ListColumn, type ListColumnWidth, ListHeader, type ListHeaderProps, MISSING_TONE, Medallion, type MedallionProps, MenuDivider, MenuPopup, type MenuPopupProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavRow, type NavRowProps, type NavRowVariant, NavSectionLabel, type NavSectionLabelProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, type NotifClass, type NotificationAction, NotificationBell, type NotificationBellProps, NotificationCenter, type NotificationCenterProps, type NotificationClass, type NotificationDeepLink, type NotificationItem, type NotificationMute, type NotificationPreferences, type NotificationProduct, NotificationRow, type NotificationRowProps, NotificationSettings, type NotificationSettingsProps, type NotificationSeverity, type NotificationSubscription, type NotificationThreshold, NotificationToast, type NotificationToastDwell, type NotificationToastProps, NotificationToaster, type NotificationToasterPosition, type NotificationToasterProps, OptionCard, type OptionCardProps, OrgProductSwitcher, type OrgProductSwitcherAction, type OrgProductSwitcherItem, type OrgProductSwitcherProps, type OrganizationOnboardingDefaults, OrganizationOnboardingForm, type OrganizationOnboardingFormProps, type OrganizationOnboardingPayload, PageColumn, type PageColumnProps, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, PersonAvatar, type PersonAvatarProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, RatingScale, type RatingScaleProps, type RatingScaleSize, RemovableChip, type RemovableChipProps, RemoveButton, type RemoveButtonProps, RequestRow, type RequestRowProps, type RequestState, type RequestSurface, type ResolvedTheme, type Responsive, ScrollArea, ScrollBar, SecretReveal, type SecretRevealProps, SectionIntro, type SectionIntroProps, Select, type SelectOption, type SelectProps, Separator, SettingRow, type SettingRowProps, type Severity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarBackHeader, type SidebarBackHeaderProps, SidebarProductHeader, type SidebarProductHeaderProps, Skeleton, Slider, StarRating, type StarRatingProps, type StarRatingSize, StatCard, type StatCardProps, StatusDot, type StatusDotProps, StepUpChallenge, type StepUpChallengeProps, type StepUpMethod, type StepUpProof, Switch, type SwitchProps, TOAST_DWELL, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, type Theme, ThemePicker, type ThemePickerProps, ThemeToggle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, type TopBarProps, TopBarUtilities, type TopBarUtilitiesProps, type TopBarUtility, type UseFreshHighlightResult, type UseSidebarOptions, type UseSidebarResult, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuUser, WEIGHT_TONE, alertVariants, attachmentChipVariants, badgeVariants, buttonVariants, cn, formatRelativeAge, grantRemoveLabel, isKnownExtensionIcon, isNotificationSettled, navigationMenuTriggerStyle, severityBadgeVariant, severityLabels, statusDotVariants, toggleVariants, useCarousel, useFormField, useFreshHighlight, useIsMobile, useSidebar, useTheme };
|
|
3783
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AddPicker, type AddPickerItem, type AddPickerProps, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, AttachmentChip, type AttachmentChipProps, type AttachmentState, AutoHeight, type AutoHeightProps, Avatar, AvatarFallback, AvatarImage, BackLink, type BackLinkProps, Badge, type BadgeProps, type BeneficialOwnerPayload, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, COUNTRY_OPTIONS, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardNote, type CardNoteProps, type CardProps, CardTitle, type CardTitleProps, Carousel, type CarouselApi, CarouselContent, type CarouselContextProps, CarouselItem, CarouselNext, type CarouselOptions, type CarouselPlugin, CarouselPrevious, type CarouselProps, Checkbox, Code, CodeBlock, type CodeBlockProps, type CodeLang, type CodeProps, type CodeVariant, Col, type ColProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, type CommandDialogGroup, type CommandDialogItem, type CommandDialogProps, CommandEmpty, CommandGroup, CommandInput, CommandItem, type CommandItemProps, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogStepUp, ConnectorCard, type ConnectorCardProps, type ConnectorOrigin, type ConnectorStatus, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, DatePicker, type DatePickerProps, DecorativeIcon, type DecorativeIconProps, type DeltaDirection, type DeltaTone, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DocsLink, type DocsLinkProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, EntityRow, type EntityRowOpens, type EntityRowOpensProps, type EntityRowProps, EntityTile, type EntityTileProps, ExtensionIcon, type ExtensionIconProps, FeedbackButton, type FeedbackButtonLabels, type FeedbackButtonProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GlyphAvatar, type GlyphAvatarProps, type GrantRole, type GrantRoleNotes, GrantRolePicker, type GrantRolePickerProps, GrantRow, type GrantRowProps, Grid, GridOverlay, type GridOverlayProps, type GridProps, HoverCard, HoverCardContent, HoverCardTrigger, IconHint, type IconHintProps, ImageCropDialog, type ImageCropDialogProps, type ImageCropShape, type ImageCropType, ImageCropper, type ImageCropperProps, ImageUpload, type ImageUploadProps, type ImageUploadSize, InlineError, type InlineErrorProps, Input, InputAddon, type InputAddonProps, InputGroup, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, ListCells, type ListCellsProps, type ListColumn, type ListColumnWidth, ListHeader, type ListHeaderProps, MISSING_TONE, Medallion, type MedallionProps, MenuDivider, MenuPopup, type MenuPopupProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavRow, type NavRowMark, type NavRowProps, type NavRowVariant, NavSectionLabel, type NavSectionLabelProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, type NotifClass, type NotificationAction, NotificationBell, type NotificationBellProps, NotificationCenter, type NotificationCenterProps, type NotificationClass, type NotificationDeepLink, type NotificationItem, type NotificationMute, type NotificationPreferences, type NotificationProduct, NotificationRow, type NotificationRowProps, NotificationSettings, type NotificationSettingsProps, type NotificationSeverity, type NotificationSubscription, type NotificationThreshold, NotificationToast, type NotificationToastDwell, type NotificationToastProps, NotificationToaster, type NotificationToasterPosition, type NotificationToasterProps, OptionCard, type OptionCardProps, OrgProductSwitcher, type OrgProductSwitcherAction, type OrgProductSwitcherItem, type OrgProductSwitcherProduct, type OrgProductSwitcherProps, type OrganizationOnboardingDefaults, OrganizationOnboardingForm, type OrganizationOnboardingFormProps, type OrganizationOnboardingPayload, PageColumn, type PageColumnProps, PageHeader, type PageHeaderProps, type PageHeaderSize, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, PersonAvatar, type PersonAvatarProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type ProductStatus, Progress, QuickSearchRow, type QuickSearchRowProps, RadioGroup, RadioGroupItem, RailToggle, type RailToggleProps, RatingScale, type RatingScaleProps, type RatingScaleSize, RemovableChip, type RemovableChipProps, RemoveButton, type RemoveButtonProps, RequestRow, type RequestRowProps, type RequestState, type RequestSurface, type ResolvedTheme, type Responsive, ScrollArea, ScrollBar, SecretReveal, type SecretRevealProps, SectionIntro, type SectionIntroProps, Select, type SelectOption, type SelectProps, Separator, SettingRow, type SettingRowProps, type Severity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarBackHeader, type SidebarBackHeaderProps, SidebarProductHeader, type SidebarProductHeaderProps, Skeleton, Slider, StarRating, type StarRatingProps, type StarRatingSize, StatCard, type StatCardProps, StatusDot, type StatusDotProps, StepUpChallenge, type StepUpChallengeProps, type StepUpMethod, type StepUpProof, Switch, type SwitchProps, TOAST_DWELL, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, type Theme, ThemePicker, type ThemePickerProps, ThemeToggle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, type TopBarProps, TopBarUtilities, type TopBarUtilitiesProps, type TopBarUtility, type UseFreshHighlightResult, type UseSidebarOptions, type UseSidebarResult, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuUser, WEIGHT_TONE, alertVariants, attachmentChipVariants, badgeVariants, buttonVariants, cn, formatRelativeAge, grantRemoveLabel, isKnownExtensionIcon, isNotificationSettled, navigationMenuTriggerStyle, productStatusBadge, severityBadgeVariant, severityLabels, statusDotVariants, toggleVariants, useCarousel, useFormField, useFreshHighlight, useIsMobile, useSidebar, useTheme };
|