@nextlyhq/ui 0.0.2-alpha.60 → 0.0.2-alpha.64
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/README.md +35 -8
- package/dist/index.cjs +475 -221
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +301 -23
- package/dist/index.d.ts +301 -23
- package/dist/index.mjs +479 -221
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/styles.scoped.css +1 -1
- package/dist/tailwind-preset.cjs.map +1 -1
- package/dist/tailwind-preset.mjs.map +1 -1
- package/dist/theme.css +132 -0
- package/package.json +6 -5
package/dist/index.d.ts
CHANGED
|
@@ -1128,7 +1128,30 @@ declare const Tabs: react.ForwardRefExoticComponent<_radix_ui_react_tabs.TabsPro
|
|
|
1128
1128
|
*/
|
|
1129
1129
|
declare const TabsList: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsListProps & react.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
|
|
1130
1130
|
variant?: "default" | "ghost" | null | undefined;
|
|
1131
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string> &
|
|
1131
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & {
|
|
1132
|
+
/**
|
|
1133
|
+
* Let a strip too wide for its container scroll sideways.
|
|
1134
|
+
*
|
|
1135
|
+
* The scroll container is a WRAPPER, never the list, and that is why this
|
|
1136
|
+
* prop exists rather than callers reaching for `overflow-x-auto`
|
|
1137
|
+
* themselves. Two things go wrong when the list is the scroller, and the
|
|
1138
|
+
* second is why the obvious remedy is also wrong:
|
|
1139
|
+
*
|
|
1140
|
+
* - Per the CSS overflow rules, `visible` computes to `auto` when the
|
|
1141
|
+
* other axis is neither `visible` nor `clip`, so `overflow-x` alone
|
|
1142
|
+
* always makes the element a VERTICAL scroll container too.
|
|
1143
|
+
* - `TabsTrigger` carries `-mb-0.5` so its 2px underline lands ON this
|
|
1144
|
+
* list's rail rather than below it. That pull-up puts content past the
|
|
1145
|
+
* content-box edge, which the new scroll container reports as vertical
|
|
1146
|
+
* overflow — so `overflow-y-hidden` would clip the 2px the underline is
|
|
1147
|
+
* made of, silencing a scrollbar by deleting the indicator.
|
|
1148
|
+
*
|
|
1149
|
+
* With the wrapper scrolling instead, the list keeps its rail and
|
|
1150
|
+
* `w-max min-w-full` makes that rail span the full scroll width rather
|
|
1151
|
+
* than stopping where the triggers do.
|
|
1152
|
+
*/
|
|
1153
|
+
scrollable?: boolean;
|
|
1154
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
1132
1155
|
/**
|
|
1133
1156
|
* TabsTrigger - Clickable tab button
|
|
1134
1157
|
*
|
|
@@ -2118,6 +2141,45 @@ declare const CommandShortcut: react.ForwardRefExoticComponent<CommandShortcutPr
|
|
|
2118
2141
|
* @experimental
|
|
2119
2142
|
*/
|
|
2120
2143
|
declare const commandDefaultFilter: (value: string, search: string, keywords?: string[]) => number;
|
|
2144
|
+
/**
|
|
2145
|
+
* The value of the item the palette has HIGHLIGHTED, from a component inside
|
|
2146
|
+
* it.
|
|
2147
|
+
*
|
|
2148
|
+
* The palette owns which item is highlighted, and it moves that highlight for
|
|
2149
|
+
* reasons a caller never sees: a pointer crossing an item, an arrow key, and a
|
|
2150
|
+
* filter that removes the item the highlight was on. Anything outside wanting
|
|
2151
|
+
* to follow it — a preview pane, a description strip, a status line — needs to
|
|
2152
|
+
* read that rather than keep a copy.
|
|
2153
|
+
*
|
|
2154
|
+
* Reading beats mirroring here for a specific reason rather than on principle.
|
|
2155
|
+
* The palette's controlled `value` sets which item is MARKED, and does not move
|
|
2156
|
+
* the internal cursor that `aria-activedescendant` and the scroll follow. So a
|
|
2157
|
+
* caller that writes the value to steer the highlight desynchronises the two:
|
|
2158
|
+
* the item drawn as current and the option announced as current stop agreeing,
|
|
2159
|
+
* and after a filter the announcement can name an element that has been
|
|
2160
|
+
* removed. A read leaves one owner and takes a derived view.
|
|
2161
|
+
*
|
|
2162
|
+
* NARROWED to the one field deliberately. The underlying library exposes its
|
|
2163
|
+
* whole store through a selector — the raw search text, its internal item and
|
|
2164
|
+
* group maps, the id it uses for `aria-activedescendant` — and publishing that
|
|
2165
|
+
* selector would make every one of those part of this kit's public API and its
|
|
2166
|
+
* generated declarations. A dependency upgrade could then reshape what callers
|
|
2167
|
+
* can reach without any export changing name, which is exactly what the
|
|
2168
|
+
* surface snapshot cannot see. This returns a string.
|
|
2169
|
+
*
|
|
2170
|
+
* Empty string means nothing is highlighted, which is the library's own
|
|
2171
|
+
* spelling and a different answer from "an item whose value is unknown".
|
|
2172
|
+
*
|
|
2173
|
+
* Must be called from inside the palette, since that is where the state lives.
|
|
2174
|
+
*
|
|
2175
|
+
* Bound to a declaration rather than re-exported with `export { x as y }`: the
|
|
2176
|
+
* bundler keeps a doc comment attached to a declaration and drops one attached
|
|
2177
|
+
* to an export statement, so the release tag would not reach the published
|
|
2178
|
+
* types.
|
|
2179
|
+
*
|
|
2180
|
+
* @experimental
|
|
2181
|
+
*/
|
|
2182
|
+
declare const useCommandHighlight: () => string;
|
|
2121
2183
|
|
|
2122
2184
|
/**
|
|
2123
2185
|
* Spinner Component - Design System Specification
|
|
@@ -2557,6 +2619,27 @@ declare const ContextMenuShortcut: {
|
|
|
2557
2619
|
displayName: string;
|
|
2558
2620
|
};
|
|
2559
2621
|
|
|
2622
|
+
/**
|
|
2623
|
+
* A splitter's accessible name, which the caller must supply one way or the
|
|
2624
|
+
* other.
|
|
2625
|
+
*
|
|
2626
|
+
* REQUIRED rather than documented, because the handle is focusable: a keyboard
|
|
2627
|
+
* user lands on it whether or not anyone remembered, and an unnamed separator
|
|
2628
|
+
* announces its position — "74" — with nothing saying what is at 74. The
|
|
2629
|
+
* caller is the only one who can name it, since only the caller knows what the
|
|
2630
|
+
* two panels hold, so the type is the only place the requirement can live.
|
|
2631
|
+
*
|
|
2632
|
+
* Either attribute satisfies it and neither may be paired with the other: two
|
|
2633
|
+
* names on one element is not a stronger label, it is an ambiguity resolved by
|
|
2634
|
+
* precedence rules nobody writing the call site is thinking about.
|
|
2635
|
+
*/
|
|
2636
|
+
type SplitterName = {
|
|
2637
|
+
"aria-label": string;
|
|
2638
|
+
"aria-labelledby"?: never;
|
|
2639
|
+
} | {
|
|
2640
|
+
"aria-labelledby": string;
|
|
2641
|
+
"aria-label"?: never;
|
|
2642
|
+
};
|
|
2560
2643
|
/**
|
|
2561
2644
|
* A group of resizable panels, laid out horizontally or vertically.
|
|
2562
2645
|
*
|
|
@@ -2578,7 +2661,7 @@ declare const ResizablePanel: typeof ResizablePrimitive.Panel;
|
|
|
2578
2661
|
*
|
|
2579
2662
|
* @experimental
|
|
2580
2663
|
*/
|
|
2581
|
-
declare const ResizableHandle: ({ withGrip, className, children, ...props }: react.ComponentProps<typeof ResizablePrimitive.Separator> & {
|
|
2664
|
+
declare const ResizableHandle: ({ withGrip, className, children, ...props }: Omit<react.ComponentProps<typeof ResizablePrimitive.Separator>, "aria-label" | "aria-labelledby"> & SplitterName & {
|
|
2582
2665
|
withGrip?: boolean;
|
|
2583
2666
|
}) => react_jsx_runtime.JSX.Element;
|
|
2584
2667
|
|
|
@@ -2664,6 +2747,21 @@ interface TreeNode {
|
|
|
2664
2747
|
/** Skipped by every keyboard move and not selectable. */
|
|
2665
2748
|
disabled?: boolean;
|
|
2666
2749
|
}
|
|
2750
|
+
/**
|
|
2751
|
+
* Which gesture a row's modifiers meant.
|
|
2752
|
+
*
|
|
2753
|
+
* Named by the same three words the rest of the system uses, so a caller maps
|
|
2754
|
+
* them onto its own selection rules without translating. Both Meta and Control
|
|
2755
|
+
* mean toggle: a Mac author presses Command and a Windows author presses
|
|
2756
|
+
* Control, and neither ever presses the other's.
|
|
2757
|
+
*
|
|
2758
|
+
* Shift outranks the toggle modifier — a shift+mod click is a slip rather than
|
|
2759
|
+
* a fourth gesture, and extending is the one whose result is visible and undone
|
|
2760
|
+
* by a plain click.
|
|
2761
|
+
*
|
|
2762
|
+
* @experimental
|
|
2763
|
+
*/
|
|
2764
|
+
type TreeSelectionMode = "replace" | "toggle" | "extend";
|
|
2667
2765
|
/** @experimental */
|
|
2668
2766
|
interface TreeViewProps extends Omit<react.HTMLAttributes<HTMLDivElement>, "onSelect"> {
|
|
2669
2767
|
/** The roots of the tree. */
|
|
@@ -2674,12 +2772,27 @@ interface TreeViewProps extends Omit<react.HTMLAttributes<HTMLDivElement>, "onSe
|
|
|
2674
2772
|
defaultExpandedIds?: readonly string[];
|
|
2675
2773
|
/** Called with the full next set whenever a branch opens or closes. */
|
|
2676
2774
|
onExpandedChange?: (ids: string[]) => void;
|
|
2677
|
-
/**
|
|
2775
|
+
/**
|
|
2776
|
+
* The selected node id, if the caller owns it.
|
|
2777
|
+
*
|
|
2778
|
+
* With `selectedIds` also supplied this is the PRIMARY — the row a detail
|
|
2779
|
+
* panel answers for. Drawn at a heavier weight so a reader can tell which
|
|
2780
|
+
* member of a multi-row selection the rest of the screen describes.
|
|
2781
|
+
*/
|
|
2678
2782
|
selectedId?: string | null;
|
|
2783
|
+
/**
|
|
2784
|
+
* Every selected id, when the caller holds more than one.
|
|
2785
|
+
*
|
|
2786
|
+
* Additive: omit it and the tree behaves exactly as it did. Supplying it also
|
|
2787
|
+
* makes the tree announce itself as `aria-multiselectable`, which is why it
|
|
2788
|
+
* is a separate prop rather than inferred — a single-select tree claiming to
|
|
2789
|
+
* be multi-selectable is wrong in a way a screen-reader user acts on.
|
|
2790
|
+
*/
|
|
2791
|
+
selectedIds?: readonly string[];
|
|
2679
2792
|
/** Which id starts selected when the caller does not own selection. */
|
|
2680
2793
|
defaultSelectedId?: string | null;
|
|
2681
2794
|
/** Called when a row is chosen, by pointer or by Enter. */
|
|
2682
|
-
onSelectedChange?: (id: string) => void;
|
|
2795
|
+
onSelectedChange?: (id: string, mode: TreeSelectionMode) => void;
|
|
2683
2796
|
/**
|
|
2684
2797
|
* Names the tree for a screen reader. One of this or `aria-labelledby` is required: a tree
|
|
2685
2798
|
* announced only as "tree" tells a user nothing about which one they are in.
|
|
@@ -2882,8 +2995,10 @@ interface ShortcutLayerOptions {
|
|
|
2882
2995
|
* Fixing it needs the manager to record when a layer is ACTIVATED, which registration order
|
|
2883
2996
|
* does not capture: `useShortcuts` registers once at mount and updates its options in place, so
|
|
2884
2997
|
* a layer enabled later still carries its mount-time sequence. Not attempted here because
|
|
2885
|
-
* nothing reaches it yet
|
|
2886
|
-
*
|
|
2998
|
+
* nothing reaches it yet: the layers that raise priority are modal HOLDS, and a hold blocks the
|
|
2999
|
+
* keystroke that would open the next one — the command palette cannot be summoned over a dialog
|
|
3000
|
+
* that is already holding, so two of them are not both active for a keystroke to be resolved
|
|
3001
|
+
* between.
|
|
2887
3002
|
*/
|
|
2888
3003
|
priority?: number;
|
|
2889
3004
|
/** Whether the layer participates at all. A disabled layer neither matches nor blocks. */
|
|
@@ -3046,6 +3161,27 @@ declare function useShortcutManager(): ShortcutManager;
|
|
|
3046
3161
|
*/
|
|
3047
3162
|
declare function useActiveShortcuts(): readonly ActiveShortcut[];
|
|
3048
3163
|
|
|
3164
|
+
/**
|
|
3165
|
+
* A layout effect in the browser, a plain effect where there is no DOM.
|
|
3166
|
+
*
|
|
3167
|
+
* These components are client code, but a consumer may still PRERENDER them,
|
|
3168
|
+
* and React warns that `useLayoutEffect` does nothing on the server. Layout
|
|
3169
|
+
* timing is what the browser needs wherever an effect has to be settled before
|
|
3170
|
+
* anything else can observe it — a registration that must exist before the
|
|
3171
|
+
* first frame, or a native listener that must be the current one before the
|
|
3172
|
+
* next event reaches it. Neither effect runs during a server render, so
|
|
3173
|
+
* choosing between them by environment loses nothing and silences a warning
|
|
3174
|
+
* that reports no real problem.
|
|
3175
|
+
*
|
|
3176
|
+
* Published rather than kept beside its first caller, because a second one
|
|
3177
|
+
* arrived: two spellings of this choice would drift the first time either
|
|
3178
|
+
* learned something about a new environment. A third now lives in another
|
|
3179
|
+
* package, which is why it leaves this one through the barrel.
|
|
3180
|
+
*
|
|
3181
|
+
* @experimental
|
|
3182
|
+
*/
|
|
3183
|
+
declare const useIsomorphicLayoutEffect: typeof react.useEffect;
|
|
3184
|
+
|
|
3049
3185
|
/**
|
|
3050
3186
|
* Parsing and matching for keyboard shortcut specifications.
|
|
3051
3187
|
*
|
|
@@ -3094,6 +3230,43 @@ type KeySequence = readonly KeyChord[];
|
|
|
3094
3230
|
* @experimental
|
|
3095
3231
|
*/
|
|
3096
3232
|
declare function parseKeys(spec: string): KeySequence;
|
|
3233
|
+
/**
|
|
3234
|
+
* The modifier state an event carries, with `mod` already resolved for the platform.
|
|
3235
|
+
*
|
|
3236
|
+
* @experimental
|
|
3237
|
+
*/
|
|
3238
|
+
interface ModifierState {
|
|
3239
|
+
readonly ctrlKey: boolean;
|
|
3240
|
+
readonly metaKey: boolean;
|
|
3241
|
+
readonly altKey: boolean;
|
|
3242
|
+
readonly shiftKey: boolean;
|
|
3243
|
+
/** Optional, so a caller driving the matcher by hand need not synthesise one. */
|
|
3244
|
+
readonly getModifierState?: (key: string) => boolean;
|
|
3245
|
+
}
|
|
3246
|
+
/**
|
|
3247
|
+
* Whether a chord describes the given keystroke.
|
|
3248
|
+
*
|
|
3249
|
+
* Modifiers are matched EXACTLY rather than as a minimum: a binding for `s` must not fire on
|
|
3250
|
+
* `mod+s`, which is a different shortcut and very often a destructive one.
|
|
3251
|
+
*
|
|
3252
|
+
* @param chord - The chord to test.
|
|
3253
|
+
* @param key - The event's `key`.
|
|
3254
|
+
* @param state - The event's modifier flags.
|
|
3255
|
+
* @param isApple - Whether `mod` should resolve to Command rather than Control.
|
|
3256
|
+
*
|
|
3257
|
+
* @experimental
|
|
3258
|
+
*/
|
|
3259
|
+
declare function chordMatches(chord: KeyChord, key: string, state: ModifierState, isApple: boolean): boolean;
|
|
3260
|
+
/**
|
|
3261
|
+
* Whether this platform uses Command as its primary modifier.
|
|
3262
|
+
*
|
|
3263
|
+
* Reads the modern `userAgentData` hint before the deprecated `navigator.platform`, and answers
|
|
3264
|
+
* `false` when neither exists — the non-Apple default is also the correct answer for a server
|
|
3265
|
+
* render, where no keystroke can arrive.
|
|
3266
|
+
*
|
|
3267
|
+
* @experimental
|
|
3268
|
+
*/
|
|
3269
|
+
declare function detectApplePlatform(): boolean;
|
|
3097
3270
|
|
|
3098
3271
|
/**
|
|
3099
3272
|
* How wide a field's CONTROL may grow.
|
|
@@ -3160,17 +3333,6 @@ interface FieldShellProps {
|
|
|
3160
3333
|
*/
|
|
3161
3334
|
children: React.ReactElement | ((field: FieldShellRenderProps) => React.ReactNode);
|
|
3162
3335
|
}
|
|
3163
|
-
/**
|
|
3164
|
-
* The page measure. "form" suits most pages; "wide" is opt-in for dense ones.
|
|
3165
|
-
* @experimental
|
|
3166
|
-
*/
|
|
3167
|
-
type FormMeasure = "form" | "wide";
|
|
3168
|
-
/** @experimental */
|
|
3169
|
-
interface FormLayoutProps {
|
|
3170
|
-
width?: FormMeasure;
|
|
3171
|
-
className?: string;
|
|
3172
|
-
children: React.ReactNode;
|
|
3173
|
-
}
|
|
3174
3336
|
/** @experimental */
|
|
3175
3337
|
interface FormActionsProps {
|
|
3176
3338
|
/**
|
|
@@ -3207,11 +3369,7 @@ interface FormSectionProps {
|
|
|
3207
3369
|
declare function FormSection({ label, description, className, children, }: FormSectionProps): react_jsx_runtime.JSX.Element;
|
|
3208
3370
|
|
|
3209
3371
|
/**
|
|
3210
|
-
*
|
|
3211
|
-
*/
|
|
3212
|
-
declare function FormLayout({ width, className, children, }: FormLayoutProps): react_jsx_runtime.JSX.Element;
|
|
3213
|
-
/**
|
|
3214
|
-
* One action bar per form, at the end of the measure.
|
|
3372
|
+
* One action bar per form, at the end of the page's measure.
|
|
3215
3373
|
*
|
|
3216
3374
|
* A form commits as a single document, so there is one place to commit it. The
|
|
3217
3375
|
* dirty flag arrives from the page because the form state already answers that
|
|
@@ -3221,4 +3379,124 @@ declare function FormLayout({ width, className, children, }: FormLayoutProps): r
|
|
|
3221
3379
|
*/
|
|
3222
3380
|
declare function FormActions({ dirty, className, children }: FormActionsProps): react_jsx_runtime.JSX.Element;
|
|
3223
3381
|
|
|
3224
|
-
|
|
3382
|
+
/** @experimental */
|
|
3383
|
+
interface PageShellProps extends HTMLAttributes<HTMLDivElement> {
|
|
3384
|
+
/**
|
|
3385
|
+
* Which measure the content column is bounded to. `full` removes the cap so
|
|
3386
|
+
* the column takes whatever the panel gives it, while KEEPING the gutter — a
|
|
3387
|
+
* full-width page is still inset from the panel's edge.
|
|
3388
|
+
*/
|
|
3389
|
+
width?: "form" | "wide" | "full";
|
|
3390
|
+
}
|
|
3391
|
+
/**
|
|
3392
|
+
* What each named width resolves to, owned here because this is what applies it.
|
|
3393
|
+
*
|
|
3394
|
+
* Declared as a lookup rather than branched at the call site so the three arms
|
|
3395
|
+
* are one list. A `switch` here would let a fourth width be added to the type
|
|
3396
|
+
* and forgotten in the mapping, which the checker cannot see through a
|
|
3397
|
+
* `default` arm.
|
|
3398
|
+
*
|
|
3399
|
+
* Exported because a caller whose CONTENT carries the measure needs the same
|
|
3400
|
+
* value as a length, and the alternative is a second table naming the same
|
|
3401
|
+
* tokens — which drifts silently, since both look correct beside their own
|
|
3402
|
+
* neighbours. Reading it here means there is one answer rather than two that
|
|
3403
|
+
* agree today.
|
|
3404
|
+
*
|
|
3405
|
+
* @experimental
|
|
3406
|
+
*/
|
|
3407
|
+
declare const SHELL_MEASURE: Record<NonNullable<PageShellProps["width"]>, string>;
|
|
3408
|
+
/**
|
|
3409
|
+
* The page's inset and measure, owned in one place and spent as GRID COLUMNS.
|
|
3410
|
+
*
|
|
3411
|
+
* This replaces a pairing in which an outer container padded the panel and an
|
|
3412
|
+
* inner one padded again while capping the width. That shape had three
|
|
3413
|
+
* defects, and all three are structural rather than cosmetic:
|
|
3414
|
+
*
|
|
3415
|
+
* - The two insets ADDED, because padding is not something a descendant can
|
|
3416
|
+
* cancel. Measured on the settings page, the header sat at x=360 and the
|
|
3417
|
+
* form card at x=384 — a 24px disagreement between two elements that are
|
|
3418
|
+
* supposed to share a left edge. Here the inset is a column, so there is one
|
|
3419
|
+
* declaration and no second site to disagree with it.
|
|
3420
|
+
* - A measure applied INSIDE a form component lets anything the page renders
|
|
3421
|
+
* beside that form escape it. With the page owning the shell, a sibling is
|
|
3422
|
+
* inside the measure by default and leaves it only by saying `Bleed`.
|
|
3423
|
+
* - Centring by `mx-auto` on a max-width box does nothing at panel widths
|
|
3424
|
+
* where the cap does not bind. Here the two outer tracks are equal and
|
|
3425
|
+
* flexible, so the content column is centred at every width and no
|
|
3426
|
+
* `justify-content` is declared — with flexible tracks the grid fills its
|
|
3427
|
+
* container and there is no free space for one to distribute.
|
|
3428
|
+
*
|
|
3429
|
+
* Vertical padding stays ordinary `padding-block`: it is not in tension with
|
|
3430
|
+
* the columns, and keeping it here means one component answers the whole of
|
|
3431
|
+
* "how far is content from the panel's edge".
|
|
3432
|
+
* @experimental
|
|
3433
|
+
*/
|
|
3434
|
+
declare const PageShell: react.ForwardRefExoticComponent<PageShellProps & react.RefAttributes<HTMLDivElement>>;
|
|
3435
|
+
/** @experimental */
|
|
3436
|
+
type BleedProps = HTMLAttributes<HTMLDivElement>;
|
|
3437
|
+
/**
|
|
3438
|
+
* Opts one child out of the measure, edge to edge across the shell's gutter.
|
|
3439
|
+
*
|
|
3440
|
+
* The sanctioned form of something that previously only happened by accident.
|
|
3441
|
+
* A wide data table, a delivery log or a toolbar declares that it wants the
|
|
3442
|
+
* full panel, so a reviewer can see the intent — and, just as usefully, a block
|
|
3443
|
+
* that is merely in the wrong place no longer LOOKS like a deliberate
|
|
3444
|
+
* full-bleed.
|
|
3445
|
+
*
|
|
3446
|
+
* Valid only as a DIRECT child of `PageShell`. The `full-start`/`full-end`
|
|
3447
|
+
* lines are named on the shell's own grid, so they are in scope for its
|
|
3448
|
+
* children and nowhere else; nested inside a `FormSection` this renders a plain
|
|
3449
|
+
* block and the `grid-column` is inert. That is a real constraint rather than a
|
|
3450
|
+
* stylistic preference, and `page-shell.test.tsx` pins both halves: that a
|
|
3451
|
+
* `Bleed` rendered directly under the shell is its child, and that one nested a
|
|
3452
|
+
* level deeper does NOT receive the full column.
|
|
3453
|
+
*
|
|
3454
|
+
* It forwards its ref and any div attributes for the same reason: a consumer
|
|
3455
|
+
* cannot reach for the usual remedy of wrapping it, because a wrapper is
|
|
3456
|
+
* precisely what makes it stop working.
|
|
3457
|
+
* @experimental
|
|
3458
|
+
*/
|
|
3459
|
+
declare const Bleed: react.ForwardRefExoticComponent<BleedProps & react.RefAttributes<HTMLDivElement>>;
|
|
3460
|
+
|
|
3461
|
+
/** @experimental */
|
|
3462
|
+
interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
|
|
3463
|
+
/** The page's name, rendered as its `h1`. */
|
|
3464
|
+
title: string;
|
|
3465
|
+
/**
|
|
3466
|
+
* A sentence under the title. A `ReactNode` rather than a string because a
|
|
3467
|
+
* description carrying a link or an inline code span is ordinary here, and
|
|
3468
|
+
* typing it narrowly would push those pages back to hand-rolling the header.
|
|
3469
|
+
*/
|
|
3470
|
+
description?: ReactNode;
|
|
3471
|
+
/** The trail above the title. The page supplies it; this only places it. */
|
|
3472
|
+
breadcrumbs?: ReactNode;
|
|
3473
|
+
/** Page-level actions, trailing the title on one line where there is room. */
|
|
3474
|
+
actions?: ReactNode;
|
|
3475
|
+
}
|
|
3476
|
+
/**
|
|
3477
|
+
* A page's own identity — its trail, its name, its one-line summary and its
|
|
3478
|
+
* actions — rendered once instead of at every page that needs one.
|
|
3479
|
+
*
|
|
3480
|
+
* Every value arrives as a PROP, and that is the point rather than an
|
|
3481
|
+
* implementation detail. The markup this replaces was written out by hand on 22
|
|
3482
|
+
* pages, and the settings pages took their title from a ~130-line chain that
|
|
3483
|
+
* matched `window.location.pathname` in a file none of them import. Both are
|
|
3484
|
+
* the same defect from opposite ends: a page knows what it is, and nothing let
|
|
3485
|
+
* it say so — so the title lived either in 22 copies or in one foreign file
|
|
3486
|
+
* that had to be edited whenever a route was added.
|
|
3487
|
+
*
|
|
3488
|
+
* The route registry already made this decision for the sidebar. A private
|
|
3489
|
+
* route must DECLARE the rail section it belongs to, because the sidebar reads
|
|
3490
|
+
* that declaration rather than matching the URL, which makes a route added
|
|
3491
|
+
* without one a compile error instead of a page that silently highlights the
|
|
3492
|
+
* wrong entry. A title derived from a pathname is the same defect in the half
|
|
3493
|
+
* nobody had covered.
|
|
3494
|
+
*
|
|
3495
|
+
* It also makes a plugin's page indistinguishable from a first-party one: a
|
|
3496
|
+
* plugin cannot add a branch to an if-chain it does not ship, but it can pass a
|
|
3497
|
+
* prop.
|
|
3498
|
+
* @experimental
|
|
3499
|
+
*/
|
|
3500
|
+
declare const PageHeader: react.ForwardRefExoticComponent<PageHeaderProps & react.RefAttributes<HTMLElement>>;
|
|
3501
|
+
|
|
3502
|
+
export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type ActionCallbacks, type ActiveShortcut, Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, type AlertDialogOverlayProps, AlertDialogPortal, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Bleed, type BleedProps, Button, type ButtonProps, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorPicker, type ColorPickerProps, type ColorSwatch, Command, CommandDialog, type CommandDialogProps, CommandEmpty, type CommandEmptyProps, CommandGroup, type CommandGroupProps, CommandInput, type CommandInputProps, CommandItem, type CommandItemProps, CommandList, type CommandListProps, type CommandProps, CommandSeparator, type CommandSeparatorProps, CommandShortcut, type CommandShortcutProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type DataFetcher, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, DialogTitle, type DialogTitleProps, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, FieldShell, type FieldShellProps, type FieldShellRenderProps, type FieldWidth, type FilterInfo, FormActions, type FormActionsProps, FormLabelWithTooltip, type FormLabelWithTooltipProps, FormSection, type FormSectionProps, Grid, type GridProps, Input, type InputProps, type KeyChord, type KeySequence, Label, type ListResponse, type ModifierState, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, type PaginationConfig, type PaginationMeta, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalProvider, Progress, type ProgressProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, SHELL_MEASURE, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, type SheetContentRef, SheetDescription, type SheetDescriptionProps, type SheetDescriptionRef, SheetFooter, type SheetFooterProps, SheetHeader, type SheetHeaderProps, SheetOverlay, type SheetOverlayProps, type SheetOverlayRef, SheetPortal, type SheetProps, SheetTitle, type SheetTitleProps, type SheetTitleRef, SheetTrigger, type SheetTriggerProps, type ShortcutBinding, type ShortcutLayerOptions, type ShortcutManager, type ShortcutManagerOptions, ShortcutProvider, type ShortcutProviderProps, type ShortcutRegistration, ShortcutScope, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderThumbProps, type SortInfo, Spinner, type SpinnerProps, Stack, type StackProps, Stat, type StatProps, Switch, Table, TableBody, TableCaption, TableCell, TableEmpty, type TableEmptyProps, TableError, type TableErrorProps, TableFooter, TableHead, TableHeader, TableLoading, type TableParams, TableRow, TableSearch, type TableSearchProps, TableSkeleton, type TableSkeletonProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TreeNode, TreeView, type TreeViewProps, type UseShortcutsOptions, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, chordMatches, commandDefaultFilter, createShortcutManager, detectApplePlatform, dialogContentVariants, inputVariants, parseKeys, progressVariants, selectTriggerVariants, sheetVariants, spinnerVariants, useActiveShortcuts, useCommandHighlight, useIsomorphicLayoutEffect, usePortalContainer, useShortcutManager, useShortcuts };
|