@texturehq/edges 1.36.1 → 1.37.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/{colors-DlH6URGg.d.cts → colors-CIEgeqF8.d.cts} +230 -10
- package/dist/{colors-Dq4EZi3c.d.ts → colors-CQJMI7Wz.d.ts} +230 -10
- package/dist/index.cjs +29 -95
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +30 -184
- package/dist/index.d.ts +30 -184
- package/dist/index.js +29 -95
- package/dist/index.js.map +1 -1
- package/dist/server.cjs +2 -92
- package/dist/server.cjs.map +1 -1
- package/dist/server.d.cts +1 -1
- package/dist/server.d.ts +1 -1
- package/dist/server.js +2 -92
- package/dist/server.js.map +1 -1
- package/dist/styles.css +33 -3
- package/package.json +1 -1
|
@@ -459,6 +459,217 @@ type SideNavProps = {
|
|
|
459
459
|
*/
|
|
460
460
|
declare const SideNav: React$1.FC<SideNavProps>;
|
|
461
461
|
|
|
462
|
+
/**
|
|
463
|
+
* StackNav — Sliding-pane navigation rail with unbounded depth.
|
|
464
|
+
*
|
|
465
|
+
* Each item can carry `children` of the same shape. Selecting an item that has
|
|
466
|
+
* children pushes a new pane onto the navigation stack (sliding the rail one
|
|
467
|
+
* level deeper); a back affordance pops the top pane. Items that have an
|
|
468
|
+
* `href` (and no `children`) behave as leaves and call `onSelect` when clicked.
|
|
469
|
+
*
|
|
470
|
+
* The metaphor is a navigation stack — like a UIKit `UINavigationController`
|
|
471
|
+
* but living inside a sidebar. Nesting is recursive: any pane can drill into
|
|
472
|
+
* the next, so the same shape composes from one level deep to N levels deep
|
|
473
|
+
* with no code changes.
|
|
474
|
+
*
|
|
475
|
+
* @example
|
|
476
|
+
* ```tsx
|
|
477
|
+
* const items: StackNavItem[] = [
|
|
478
|
+
* { id: "home", label: "Home", href: "/" },
|
|
479
|
+
* {
|
|
480
|
+
* id: "components",
|
|
481
|
+
* label: "Components",
|
|
482
|
+
* href: "/components",
|
|
483
|
+
* children: [
|
|
484
|
+
* { id: "button", label: "Button", href: "/components/button" },
|
|
485
|
+
* {
|
|
486
|
+
* id: "data",
|
|
487
|
+
* label: "Data",
|
|
488
|
+
* children: [
|
|
489
|
+
* { id: "table", label: "Table", href: "/components/data/table" },
|
|
490
|
+
* ],
|
|
491
|
+
* },
|
|
492
|
+
* ],
|
|
493
|
+
* },
|
|
494
|
+
* ];
|
|
495
|
+
*
|
|
496
|
+
* <StackNav items={items} value="/components/button" />
|
|
497
|
+
* ```
|
|
498
|
+
*/
|
|
499
|
+
type StackNavItem = {
|
|
500
|
+
/** Stable identifier. Required for groups; for leaves defaults to `href`. */
|
|
501
|
+
id: string;
|
|
502
|
+
/** Display label. */
|
|
503
|
+
label: string;
|
|
504
|
+
/**
|
|
505
|
+
* Target URL for leaves. When omitted (or when `children` is non-empty and
|
|
506
|
+
* `pushOnSelect` is false), the row acts as a "drill-in" affordance only.
|
|
507
|
+
*
|
|
508
|
+
* If both `href` and `children` are present, clicking the row both navigates
|
|
509
|
+
* to `href` (a section overview) and pushes its sub-pane onto the stack.
|
|
510
|
+
* This mirrors the Vercel/Linear/Edges dashboard pattern.
|
|
511
|
+
*/
|
|
512
|
+
href?: string;
|
|
513
|
+
/** Optional leading-edge icon. Alias-friendly for item models shared with SideNav. */
|
|
514
|
+
icon?: React$1.ReactNode;
|
|
515
|
+
/** Optional trailing-edge content (badge, count, kbd hint, etc.). */
|
|
516
|
+
trailing?: React$1.ReactNode;
|
|
517
|
+
/** Optional leading-edge content. Overrides `icon` when both are provided. */
|
|
518
|
+
leading?: React$1.ReactNode;
|
|
519
|
+
/** Marks the leaf as a divider — purely visual, not focusable. */
|
|
520
|
+
divider?: boolean;
|
|
521
|
+
/** Renders the entry as an uppercase group label rather than a row. */
|
|
522
|
+
groupLabel?: boolean;
|
|
523
|
+
/** Nested children. Triggers the drill-in arrow and pushes a new pane. */
|
|
524
|
+
children?: StackNavItem[];
|
|
525
|
+
/**
|
|
526
|
+
* When `false` and the row has `children`, selecting the row only navigates
|
|
527
|
+
* to `href` (if present) — it does not push a sub-pane. Useful for
|
|
528
|
+
* "Overview" leaves that live in the same array as their siblings. Defaults
|
|
529
|
+
* to `true`.
|
|
530
|
+
*/
|
|
531
|
+
pushOnSelect?: boolean;
|
|
532
|
+
/** Aria-label override for screen readers. */
|
|
533
|
+
ariaLabel?: string;
|
|
534
|
+
};
|
|
535
|
+
type StackNavLinkComponentProps = {
|
|
536
|
+
href: string;
|
|
537
|
+
"aria-label"?: string;
|
|
538
|
+
className?: string;
|
|
539
|
+
children?: React$1.ReactNode;
|
|
540
|
+
"aria-current"?: "page" | undefined;
|
|
541
|
+
onClick?: (event: React$1.MouseEvent<HTMLAnchorElement>) => void;
|
|
542
|
+
};
|
|
543
|
+
/**
|
|
544
|
+
* Color overrides for the rail surface and row affordances. Any value accepted
|
|
545
|
+
* by CSS (`#hex`, `rgb()`, `var(--token)`, etc.) is fine; each entry maps to a
|
|
546
|
+
* CSS custom property on the rail container, so consumers can also override
|
|
547
|
+
* the same variables in CSS instead of via props. See `Theming` below.
|
|
548
|
+
*/
|
|
549
|
+
type StackNavTheme = {
|
|
550
|
+
/** Rail container background. Defaults to `var(--color-background-surface)`. */
|
|
551
|
+
background?: string;
|
|
552
|
+
/** Active row background. Defaults to `var(--color-background-selected)`. */
|
|
553
|
+
activeBackground?: string;
|
|
554
|
+
/** Active row text color. Defaults to `var(--color-text-primary)`. */
|
|
555
|
+
activeColor?: string;
|
|
556
|
+
/** Hover row background. Defaults to `var(--color-background-hover)`. */
|
|
557
|
+
hoverBackground?: string;
|
|
558
|
+
/** Border color (rail border, header/footer separators, dividers). Defaults to `var(--color-border-default)`. */
|
|
559
|
+
borderColor?: string;
|
|
560
|
+
};
|
|
561
|
+
type StackNavProps = {
|
|
562
|
+
/** Root pane items. Each item can recurse with `children`. */
|
|
563
|
+
items: StackNavItem[];
|
|
564
|
+
/**
|
|
565
|
+
* Additional L1 items pinned to the bottom of the root pane. Behave identically
|
|
566
|
+
* to `items` — leaves navigate, parents push a sub-pane on click, deep-links
|
|
567
|
+
* via `value` open them. Use for "tool" sections that sit at the same level
|
|
568
|
+
* as the primary IA but visually belong at the bottom (e.g., Settings,
|
|
569
|
+
* Help, Inspector). A subtle border separates them from `items`.
|
|
570
|
+
*
|
|
571
|
+
* **Constraint:** L1 `id` and `href` values must be unique across `items` and
|
|
572
|
+
* `bottomItems`. Stack tokens and `value` lookups use these as keys, so a
|
|
573
|
+
* collision causes the wrong entry to resolve. Dev builds log a warning when
|
|
574
|
+
* a duplicate is detected.
|
|
575
|
+
*/
|
|
576
|
+
bottomItems?: StackNavItem[];
|
|
577
|
+
/**
|
|
578
|
+
* Active leaf identifier (matched against `href` or `id`). When set, the
|
|
579
|
+
* StackNav auto-opens the path that contains it on first render and again
|
|
580
|
+
* whenever `value` changes externally.
|
|
581
|
+
*/
|
|
582
|
+
value?: string | null;
|
|
583
|
+
/**
|
|
584
|
+
* Initial open stack (array of ids from root to deepest pane). Ignored
|
|
585
|
+
* after first render — for ongoing control use `stack` + `onStackChange`.
|
|
586
|
+
*/
|
|
587
|
+
defaultStack?: string[];
|
|
588
|
+
/**
|
|
589
|
+
* Fully-controlled open stack. When provided, the component does not manage
|
|
590
|
+
* its own pane state.
|
|
591
|
+
*/
|
|
592
|
+
stack?: string[];
|
|
593
|
+
/** Fires when the open pane stack changes (drill-in / back). */
|
|
594
|
+
onStackChange?: (stack: string[]) => void;
|
|
595
|
+
/**
|
|
596
|
+
* Fires when a leaf row is clicked (after `href` is followed). Receives the
|
|
597
|
+
* full item plus its ancestor breadcrumb. Use this to track activation
|
|
598
|
+
* outside of router-driven flows.
|
|
599
|
+
*/
|
|
600
|
+
onSelect?: (item: StackNavItem, breadcrumb: StackNavItem[]) => void;
|
|
601
|
+
/**
|
|
602
|
+
* Custom anchor component (Next.js `Link`, react-router `Link`, etc.).
|
|
603
|
+
* Receives `href`, `className`, `aria-current`, `onClick`, and `children`.
|
|
604
|
+
* Defaults to a native `<a>`.
|
|
605
|
+
*/
|
|
606
|
+
linkComponent?: React$1.ComponentType<StackNavLinkComponentProps>;
|
|
607
|
+
/**
|
|
608
|
+
* Render the Texture logo at the top of the rail (above any `header` slot).
|
|
609
|
+
* Set `logo` to override the default mark; otherwise the standard `<Logo />`
|
|
610
|
+
* with wordmark is rendered. Defaults to `false` for backward compatibility —
|
|
611
|
+
* existing consumers that already place a logo inside `header` keep working
|
|
612
|
+
* unchanged.
|
|
613
|
+
*/
|
|
614
|
+
showLogo?: boolean;
|
|
615
|
+
/**
|
|
616
|
+
* Custom logo node rendered in the logo region when `showLogo` is true.
|
|
617
|
+
* Ignored when `showLogo` is false. Use this to swap in a co-branded mark
|
|
618
|
+
* (e.g. partner logo) without losing the standard logo layout/spacing.
|
|
619
|
+
*/
|
|
620
|
+
logo?: React$1.ReactNode;
|
|
621
|
+
/** Fixed top region (search trigger, breadcrumb, theme toggle). Rendered below the logo when both are present. */
|
|
622
|
+
header?: React$1.ReactNode;
|
|
623
|
+
/** Fixed bottom region (theme toggle, account menu). */
|
|
624
|
+
footer?: React$1.ReactNode;
|
|
625
|
+
/** Title shown above the root pane (optional — usually folded into header). */
|
|
626
|
+
rootLabel?: string;
|
|
627
|
+
/**
|
|
628
|
+
* Whether the rail itself should size itself to the viewport and stick.
|
|
629
|
+
* Defaults to `true`. Disable for embedded / non-fullheight contexts.
|
|
630
|
+
*/
|
|
631
|
+
sticky?: boolean;
|
|
632
|
+
/**
|
|
633
|
+
* Width of the rail in pixels. Defaults to 260. Pass `null` to skip the
|
|
634
|
+
* inline width style entirely (useful when an ancestor like AppShell controls
|
|
635
|
+
* width via Tailwind classes).
|
|
636
|
+
*/
|
|
637
|
+
width?: number | null;
|
|
638
|
+
/** Aria-label for the rail's `<aside>`. Defaults to "Navigation". */
|
|
639
|
+
ariaLabel?: string;
|
|
640
|
+
/**
|
|
641
|
+
* Per-instance color overrides for the rail surface and row affordances.
|
|
642
|
+
* Each key maps to a CSS custom property (see {@link StackNavTheme}).
|
|
643
|
+
* Anything left unset falls back to the corresponding `--edges-stack-nav-*`
|
|
644
|
+
* variable on the rail, which itself defaults to a neutral Edges token.
|
|
645
|
+
*/
|
|
646
|
+
theme?: StackNavTheme;
|
|
647
|
+
/**
|
|
648
|
+
* Enables the subtle pane slide/fade transition when drilling in or popping
|
|
649
|
+
* back. Defaults to `true`; set `false` for tests, perf-sensitive embedded
|
|
650
|
+
* contexts, or users/surfaces that need instant pane swaps.
|
|
651
|
+
*/
|
|
652
|
+
animated?: boolean;
|
|
653
|
+
/** Inline style passthrough on the rail container (merged with theme vars). */
|
|
654
|
+
style?: React$1.CSSProperties;
|
|
655
|
+
/** Extra classes appended to the rail container. */
|
|
656
|
+
className?: string;
|
|
657
|
+
/**
|
|
658
|
+
* ID of AppShell's mobile-menu checkbox. When provided, the logo region
|
|
659
|
+
* renders a mobile close-button that toggles this checkbox via `htmlFor`.
|
|
660
|
+
* Usually wired automatically by AppShell — consumers using StackNav
|
|
661
|
+
* standalone can leave this unset.
|
|
662
|
+
*/
|
|
663
|
+
mobileMenuId?: string;
|
|
664
|
+
/**
|
|
665
|
+
* ID of AppShell's sidebar-collapse checkbox. When provided, the logo region
|
|
666
|
+
* renders a desktop collapse toggle that targets this checkbox via `htmlFor`,
|
|
667
|
+
* and rows emit `data-collapse-*` attributes so AppShell's CSS rules apply.
|
|
668
|
+
*/
|
|
669
|
+
sidebarCollapseId?: string;
|
|
670
|
+
};
|
|
671
|
+
declare function StackNav({ items, bottomItems, value, defaultStack, stack: controlledStack, onStackChange, onSelect, linkComponent: LinkComponent, showLogo, logo, header, footer, mobileMenuId, sidebarCollapseId, rootLabel, sticky, width, ariaLabel, theme, animated, style, className, }: StackNavProps): react_jsx_runtime.JSX.Element;
|
|
672
|
+
|
|
462
673
|
type ColorMode = "system" | "light" | "dark";
|
|
463
674
|
type TopNavProps = {
|
|
464
675
|
/**
|
|
@@ -491,8 +702,15 @@ declare const TopNav: React$1.FC<TopNavProps>;
|
|
|
491
702
|
|
|
492
703
|
/** Layout options for the AppShell */
|
|
493
704
|
type AppShellProps = {
|
|
494
|
-
/**
|
|
495
|
-
|
|
705
|
+
/**
|
|
706
|
+
* Structured nav for the left rail. Use one of `sideNav` or `stackNav`.
|
|
707
|
+
* When both are provided, `stackNav` takes precedence and `sideNav` is ignored.
|
|
708
|
+
*/
|
|
709
|
+
sideNav?: Omit<SideNavProps, "mobileMenuId" | "sidebarCollapseId">;
|
|
710
|
+
/**
|
|
711
|
+
* Use the StackNav primitive in the left rail instead of SideNav.
|
|
712
|
+
*/
|
|
713
|
+
stackNav?: Omit<StackNavProps, "mobileMenuId" | "sidebarCollapseId">;
|
|
496
714
|
/** Optional top bar slots & options */
|
|
497
715
|
topNav?: Pick<TopNavProps, "rightContent" | "centerContent" | "showMobileMenu" | "avatar" | "showColorModeSwitcher" | "toggleTheme" | "isDarkThemeEnabled" | "colorMode" | "actions" | "className">;
|
|
498
716
|
/** Main page content */
|
|
@@ -505,12 +723,7 @@ type AppShellProps = {
|
|
|
505
723
|
/** Optional: Enable JavaScript progressive enhancements */
|
|
506
724
|
enableJsEnhancements?: boolean;
|
|
507
725
|
};
|
|
508
|
-
|
|
509
|
-
* Isomorphic AppShell component that works as both server and client component
|
|
510
|
-
* Uses CSS-only interactions by default for full SSR compatibility
|
|
511
|
-
* Can be progressively enhanced with JavaScript when enableJsEnhancements is true
|
|
512
|
-
*/
|
|
513
|
-
declare function AppShell({ sideNav, topNav, children, contentPaddingX, contentPaddingY, showSidebarBorder, mainClassName, enableJsEnhancements, }: AppShellProps): react_jsx_runtime.JSX.Element;
|
|
726
|
+
declare function AppShell({ sideNav, stackNav, topNav, children, contentPaddingX, contentPaddingY, showSidebarBorder, mainClassName, enableJsEnhancements, }: AppShellProps): react_jsx_runtime.JSX.Element;
|
|
514
727
|
|
|
515
728
|
interface AvatarProps {
|
|
516
729
|
/**
|
|
@@ -1706,6 +1919,13 @@ interface SegmentedControlProps {
|
|
|
1706
1919
|
* @default "subtle"
|
|
1707
1920
|
*/
|
|
1708
1921
|
variant?: SegmentedControlVariant | LegacySegmentedControlVariant;
|
|
1922
|
+
/**
|
|
1923
|
+
* When true, segments render only their icon — labels become sr-only and
|
|
1924
|
+
* still drive `aria-label` for assistive tech. Each option must provide an
|
|
1925
|
+
* `icon`; options without one fall back to showing the label.
|
|
1926
|
+
* @default false
|
|
1927
|
+
*/
|
|
1928
|
+
iconOnly?: boolean;
|
|
1709
1929
|
}
|
|
1710
1930
|
/**
|
|
1711
1931
|
* SegmentedControl
|
|
@@ -1713,7 +1933,7 @@ interface SegmentedControlProps {
|
|
|
1713
1933
|
* A segmented control component for selecting between multiple options.
|
|
1714
1934
|
* Similar to a radio group but with a more compact, button-like appearance.
|
|
1715
1935
|
*/
|
|
1716
|
-
declare function SegmentedControl({ options, value, onChange, size, className, isDisabled, variant, "aria-label": ariaLabel, }: SegmentedControlProps): react_jsx_runtime.JSX.Element;
|
|
1936
|
+
declare function SegmentedControl({ options, value, onChange, size, className, isDisabled, variant, iconOnly, "aria-label": ariaLabel, }: SegmentedControlProps): react_jsx_runtime.JSX.Element;
|
|
1717
1937
|
|
|
1718
1938
|
type TextLinkVariant = "primary" | "secondary" | "muted" | "unstyled";
|
|
1719
1939
|
type LegacyTextLinkVariant = "default" | "brand";
|
|
@@ -1985,4 +2205,4 @@ declare const isLightColor: (color: string) => boolean;
|
|
|
1985
2205
|
*/
|
|
1986
2206
|
declare const getContrastingTextColor: (backgroundColor: string) => string;
|
|
1987
2207
|
|
|
1988
|
-
export { type
|
|
2208
|
+
export { type EnergyFormat as $, type ActionItem as A, type BadgeProps as B, type ChartMargin as C, getContrastingTextColor as D, ENTITY_CONFIG as E, getDefaultChartColor as F, getDefaultColors as G, Heading as H, type InteractiveMapProps as I, getEntityConfig as J, getEntityIcon as K, Loader as L, type MapPoint as M, getEntityLabel as N, getResolvedColor as O, getThemeCategoricalColors as P, getYFormatSettings as Q, isLightColor as R, type SegmentOption as S, TextLink as T, type FieldValue as U, type BooleanFormat as V, type FormattedValue as W, type CurrentFormat as X, type YFormatSettings as Y, type DateFormat as Z, type DistanceFormat as _, type ActionMenuProps as a, getGridStateLabel as a$, type CurrencyFormat as a0, type NumberFormat as a1, type PhoneFormat as a2, type PowerFormat as a3, type FormatterFunction as a4, type ResistanceFormat as a5, type TemperatureFormat as a6, type TemperatureUnitString as a7, type TemperatureUnit as a8, type TextFormat as a9, InteractiveMap as aA, type LayerFeature as aB, type LayerStyle as aC, MAP_TYPES as aD, type MapType as aE, Meter as aF, type MetricFormat as aG, type PercentageFormat as aH, type PowerUnit as aI, type RenderType as aJ, type ResistanceUnit as aK, SegmentedControl as aL, StackNav as aM, type StackNavItem as aN, type StackNavLinkComponentProps as aO, type StackNavProps as aP, type StackNavTheme as aQ, StaticMap as aR, type TextTransform as aS, type TextTruncatePosition as aT, type VoltageUnit as aU, type ZoomStops as aV, activeDeviceStates as aW, deviceStateLabels as aX, deviceStateMetricFormats as aY, formatComponentValue as aZ, getDeviceStateLabel as a_, type VoltageFormat as aa, type FieldFormat as ab, type DeviceState as ac, type GridState as ad, type ComponentFormatter as ae, type LayerSpec as af, type CustomPinsSpec as ag, type GeoJsonLayerSpec as ah, type RasterLayerSpec as ai, type VectorLayerSpec as aj, type ClusteredVectorLayerSpec as ak, ActionMenu as al, AppShell as am, Avatar as an, Badge as ao, type BaseFormat as ap, ChartContext as aq, CodeEditor as ar, type ColorSpec as as, type ComponentFormatOptions as at, type CurrentUnit as au, type CustomFormat as av, DEFAULT_MAP_TYPE as aw, type DateFormatStyle as ax, type DistanceUnit as ay, type EnergyUnit as az, type AppShellProps as b, gridStateLabels as b0, isActiveState as b1, useChartContext as b2, useComponentFormatter as b3, type AvatarProps as c, type BaseDataPoint as d, type CodeEditorProps as e, type CodeLanguage as f, type CodeTheme as g, type EntityConfig as h, type EntityType as i, Logo as j, type MeterProps as k, type SegmentedControlProps as l, SideNav as m, type SideNavItem as n, type SideNavProps as o, type StaticMapProps as p, type TooltipData as q, type TooltipSeries as r, TopNav as s, type TopNavProps as t, type YFormatType as u, clearColorCache as v, createCategoryColorMap as w, createXScale as x, createYScale as y, defaultMargin as z };
|
|
@@ -459,6 +459,217 @@ type SideNavProps = {
|
|
|
459
459
|
*/
|
|
460
460
|
declare const SideNav: React$1.FC<SideNavProps>;
|
|
461
461
|
|
|
462
|
+
/**
|
|
463
|
+
* StackNav — Sliding-pane navigation rail with unbounded depth.
|
|
464
|
+
*
|
|
465
|
+
* Each item can carry `children` of the same shape. Selecting an item that has
|
|
466
|
+
* children pushes a new pane onto the navigation stack (sliding the rail one
|
|
467
|
+
* level deeper); a back affordance pops the top pane. Items that have an
|
|
468
|
+
* `href` (and no `children`) behave as leaves and call `onSelect` when clicked.
|
|
469
|
+
*
|
|
470
|
+
* The metaphor is a navigation stack — like a UIKit `UINavigationController`
|
|
471
|
+
* but living inside a sidebar. Nesting is recursive: any pane can drill into
|
|
472
|
+
* the next, so the same shape composes from one level deep to N levels deep
|
|
473
|
+
* with no code changes.
|
|
474
|
+
*
|
|
475
|
+
* @example
|
|
476
|
+
* ```tsx
|
|
477
|
+
* const items: StackNavItem[] = [
|
|
478
|
+
* { id: "home", label: "Home", href: "/" },
|
|
479
|
+
* {
|
|
480
|
+
* id: "components",
|
|
481
|
+
* label: "Components",
|
|
482
|
+
* href: "/components",
|
|
483
|
+
* children: [
|
|
484
|
+
* { id: "button", label: "Button", href: "/components/button" },
|
|
485
|
+
* {
|
|
486
|
+
* id: "data",
|
|
487
|
+
* label: "Data",
|
|
488
|
+
* children: [
|
|
489
|
+
* { id: "table", label: "Table", href: "/components/data/table" },
|
|
490
|
+
* ],
|
|
491
|
+
* },
|
|
492
|
+
* ],
|
|
493
|
+
* },
|
|
494
|
+
* ];
|
|
495
|
+
*
|
|
496
|
+
* <StackNav items={items} value="/components/button" />
|
|
497
|
+
* ```
|
|
498
|
+
*/
|
|
499
|
+
type StackNavItem = {
|
|
500
|
+
/** Stable identifier. Required for groups; for leaves defaults to `href`. */
|
|
501
|
+
id: string;
|
|
502
|
+
/** Display label. */
|
|
503
|
+
label: string;
|
|
504
|
+
/**
|
|
505
|
+
* Target URL for leaves. When omitted (or when `children` is non-empty and
|
|
506
|
+
* `pushOnSelect` is false), the row acts as a "drill-in" affordance only.
|
|
507
|
+
*
|
|
508
|
+
* If both `href` and `children` are present, clicking the row both navigates
|
|
509
|
+
* to `href` (a section overview) and pushes its sub-pane onto the stack.
|
|
510
|
+
* This mirrors the Vercel/Linear/Edges dashboard pattern.
|
|
511
|
+
*/
|
|
512
|
+
href?: string;
|
|
513
|
+
/** Optional leading-edge icon. Alias-friendly for item models shared with SideNav. */
|
|
514
|
+
icon?: React$1.ReactNode;
|
|
515
|
+
/** Optional trailing-edge content (badge, count, kbd hint, etc.). */
|
|
516
|
+
trailing?: React$1.ReactNode;
|
|
517
|
+
/** Optional leading-edge content. Overrides `icon` when both are provided. */
|
|
518
|
+
leading?: React$1.ReactNode;
|
|
519
|
+
/** Marks the leaf as a divider — purely visual, not focusable. */
|
|
520
|
+
divider?: boolean;
|
|
521
|
+
/** Renders the entry as an uppercase group label rather than a row. */
|
|
522
|
+
groupLabel?: boolean;
|
|
523
|
+
/** Nested children. Triggers the drill-in arrow and pushes a new pane. */
|
|
524
|
+
children?: StackNavItem[];
|
|
525
|
+
/**
|
|
526
|
+
* When `false` and the row has `children`, selecting the row only navigates
|
|
527
|
+
* to `href` (if present) — it does not push a sub-pane. Useful for
|
|
528
|
+
* "Overview" leaves that live in the same array as their siblings. Defaults
|
|
529
|
+
* to `true`.
|
|
530
|
+
*/
|
|
531
|
+
pushOnSelect?: boolean;
|
|
532
|
+
/** Aria-label override for screen readers. */
|
|
533
|
+
ariaLabel?: string;
|
|
534
|
+
};
|
|
535
|
+
type StackNavLinkComponentProps = {
|
|
536
|
+
href: string;
|
|
537
|
+
"aria-label"?: string;
|
|
538
|
+
className?: string;
|
|
539
|
+
children?: React$1.ReactNode;
|
|
540
|
+
"aria-current"?: "page" | undefined;
|
|
541
|
+
onClick?: (event: React$1.MouseEvent<HTMLAnchorElement>) => void;
|
|
542
|
+
};
|
|
543
|
+
/**
|
|
544
|
+
* Color overrides for the rail surface and row affordances. Any value accepted
|
|
545
|
+
* by CSS (`#hex`, `rgb()`, `var(--token)`, etc.) is fine; each entry maps to a
|
|
546
|
+
* CSS custom property on the rail container, so consumers can also override
|
|
547
|
+
* the same variables in CSS instead of via props. See `Theming` below.
|
|
548
|
+
*/
|
|
549
|
+
type StackNavTheme = {
|
|
550
|
+
/** Rail container background. Defaults to `var(--color-background-surface)`. */
|
|
551
|
+
background?: string;
|
|
552
|
+
/** Active row background. Defaults to `var(--color-background-selected)`. */
|
|
553
|
+
activeBackground?: string;
|
|
554
|
+
/** Active row text color. Defaults to `var(--color-text-primary)`. */
|
|
555
|
+
activeColor?: string;
|
|
556
|
+
/** Hover row background. Defaults to `var(--color-background-hover)`. */
|
|
557
|
+
hoverBackground?: string;
|
|
558
|
+
/** Border color (rail border, header/footer separators, dividers). Defaults to `var(--color-border-default)`. */
|
|
559
|
+
borderColor?: string;
|
|
560
|
+
};
|
|
561
|
+
type StackNavProps = {
|
|
562
|
+
/** Root pane items. Each item can recurse with `children`. */
|
|
563
|
+
items: StackNavItem[];
|
|
564
|
+
/**
|
|
565
|
+
* Additional L1 items pinned to the bottom of the root pane. Behave identically
|
|
566
|
+
* to `items` — leaves navigate, parents push a sub-pane on click, deep-links
|
|
567
|
+
* via `value` open them. Use for "tool" sections that sit at the same level
|
|
568
|
+
* as the primary IA but visually belong at the bottom (e.g., Settings,
|
|
569
|
+
* Help, Inspector). A subtle border separates them from `items`.
|
|
570
|
+
*
|
|
571
|
+
* **Constraint:** L1 `id` and `href` values must be unique across `items` and
|
|
572
|
+
* `bottomItems`. Stack tokens and `value` lookups use these as keys, so a
|
|
573
|
+
* collision causes the wrong entry to resolve. Dev builds log a warning when
|
|
574
|
+
* a duplicate is detected.
|
|
575
|
+
*/
|
|
576
|
+
bottomItems?: StackNavItem[];
|
|
577
|
+
/**
|
|
578
|
+
* Active leaf identifier (matched against `href` or `id`). When set, the
|
|
579
|
+
* StackNav auto-opens the path that contains it on first render and again
|
|
580
|
+
* whenever `value` changes externally.
|
|
581
|
+
*/
|
|
582
|
+
value?: string | null;
|
|
583
|
+
/**
|
|
584
|
+
* Initial open stack (array of ids from root to deepest pane). Ignored
|
|
585
|
+
* after first render — for ongoing control use `stack` + `onStackChange`.
|
|
586
|
+
*/
|
|
587
|
+
defaultStack?: string[];
|
|
588
|
+
/**
|
|
589
|
+
* Fully-controlled open stack. When provided, the component does not manage
|
|
590
|
+
* its own pane state.
|
|
591
|
+
*/
|
|
592
|
+
stack?: string[];
|
|
593
|
+
/** Fires when the open pane stack changes (drill-in / back). */
|
|
594
|
+
onStackChange?: (stack: string[]) => void;
|
|
595
|
+
/**
|
|
596
|
+
* Fires when a leaf row is clicked (after `href` is followed). Receives the
|
|
597
|
+
* full item plus its ancestor breadcrumb. Use this to track activation
|
|
598
|
+
* outside of router-driven flows.
|
|
599
|
+
*/
|
|
600
|
+
onSelect?: (item: StackNavItem, breadcrumb: StackNavItem[]) => void;
|
|
601
|
+
/**
|
|
602
|
+
* Custom anchor component (Next.js `Link`, react-router `Link`, etc.).
|
|
603
|
+
* Receives `href`, `className`, `aria-current`, `onClick`, and `children`.
|
|
604
|
+
* Defaults to a native `<a>`.
|
|
605
|
+
*/
|
|
606
|
+
linkComponent?: React$1.ComponentType<StackNavLinkComponentProps>;
|
|
607
|
+
/**
|
|
608
|
+
* Render the Texture logo at the top of the rail (above any `header` slot).
|
|
609
|
+
* Set `logo` to override the default mark; otherwise the standard `<Logo />`
|
|
610
|
+
* with wordmark is rendered. Defaults to `false` for backward compatibility —
|
|
611
|
+
* existing consumers that already place a logo inside `header` keep working
|
|
612
|
+
* unchanged.
|
|
613
|
+
*/
|
|
614
|
+
showLogo?: boolean;
|
|
615
|
+
/**
|
|
616
|
+
* Custom logo node rendered in the logo region when `showLogo` is true.
|
|
617
|
+
* Ignored when `showLogo` is false. Use this to swap in a co-branded mark
|
|
618
|
+
* (e.g. partner logo) without losing the standard logo layout/spacing.
|
|
619
|
+
*/
|
|
620
|
+
logo?: React$1.ReactNode;
|
|
621
|
+
/** Fixed top region (search trigger, breadcrumb, theme toggle). Rendered below the logo when both are present. */
|
|
622
|
+
header?: React$1.ReactNode;
|
|
623
|
+
/** Fixed bottom region (theme toggle, account menu). */
|
|
624
|
+
footer?: React$1.ReactNode;
|
|
625
|
+
/** Title shown above the root pane (optional — usually folded into header). */
|
|
626
|
+
rootLabel?: string;
|
|
627
|
+
/**
|
|
628
|
+
* Whether the rail itself should size itself to the viewport and stick.
|
|
629
|
+
* Defaults to `true`. Disable for embedded / non-fullheight contexts.
|
|
630
|
+
*/
|
|
631
|
+
sticky?: boolean;
|
|
632
|
+
/**
|
|
633
|
+
* Width of the rail in pixels. Defaults to 260. Pass `null` to skip the
|
|
634
|
+
* inline width style entirely (useful when an ancestor like AppShell controls
|
|
635
|
+
* width via Tailwind classes).
|
|
636
|
+
*/
|
|
637
|
+
width?: number | null;
|
|
638
|
+
/** Aria-label for the rail's `<aside>`. Defaults to "Navigation". */
|
|
639
|
+
ariaLabel?: string;
|
|
640
|
+
/**
|
|
641
|
+
* Per-instance color overrides for the rail surface and row affordances.
|
|
642
|
+
* Each key maps to a CSS custom property (see {@link StackNavTheme}).
|
|
643
|
+
* Anything left unset falls back to the corresponding `--edges-stack-nav-*`
|
|
644
|
+
* variable on the rail, which itself defaults to a neutral Edges token.
|
|
645
|
+
*/
|
|
646
|
+
theme?: StackNavTheme;
|
|
647
|
+
/**
|
|
648
|
+
* Enables the subtle pane slide/fade transition when drilling in or popping
|
|
649
|
+
* back. Defaults to `true`; set `false` for tests, perf-sensitive embedded
|
|
650
|
+
* contexts, or users/surfaces that need instant pane swaps.
|
|
651
|
+
*/
|
|
652
|
+
animated?: boolean;
|
|
653
|
+
/** Inline style passthrough on the rail container (merged with theme vars). */
|
|
654
|
+
style?: React$1.CSSProperties;
|
|
655
|
+
/** Extra classes appended to the rail container. */
|
|
656
|
+
className?: string;
|
|
657
|
+
/**
|
|
658
|
+
* ID of AppShell's mobile-menu checkbox. When provided, the logo region
|
|
659
|
+
* renders a mobile close-button that toggles this checkbox via `htmlFor`.
|
|
660
|
+
* Usually wired automatically by AppShell — consumers using StackNav
|
|
661
|
+
* standalone can leave this unset.
|
|
662
|
+
*/
|
|
663
|
+
mobileMenuId?: string;
|
|
664
|
+
/**
|
|
665
|
+
* ID of AppShell's sidebar-collapse checkbox. When provided, the logo region
|
|
666
|
+
* renders a desktop collapse toggle that targets this checkbox via `htmlFor`,
|
|
667
|
+
* and rows emit `data-collapse-*` attributes so AppShell's CSS rules apply.
|
|
668
|
+
*/
|
|
669
|
+
sidebarCollapseId?: string;
|
|
670
|
+
};
|
|
671
|
+
declare function StackNav({ items, bottomItems, value, defaultStack, stack: controlledStack, onStackChange, onSelect, linkComponent: LinkComponent, showLogo, logo, header, footer, mobileMenuId, sidebarCollapseId, rootLabel, sticky, width, ariaLabel, theme, animated, style, className, }: StackNavProps): react_jsx_runtime.JSX.Element;
|
|
672
|
+
|
|
462
673
|
type ColorMode = "system" | "light" | "dark";
|
|
463
674
|
type TopNavProps = {
|
|
464
675
|
/**
|
|
@@ -491,8 +702,15 @@ declare const TopNav: React$1.FC<TopNavProps>;
|
|
|
491
702
|
|
|
492
703
|
/** Layout options for the AppShell */
|
|
493
704
|
type AppShellProps = {
|
|
494
|
-
/**
|
|
495
|
-
|
|
705
|
+
/**
|
|
706
|
+
* Structured nav for the left rail. Use one of `sideNav` or `stackNav`.
|
|
707
|
+
* When both are provided, `stackNav` takes precedence and `sideNav` is ignored.
|
|
708
|
+
*/
|
|
709
|
+
sideNav?: Omit<SideNavProps, "mobileMenuId" | "sidebarCollapseId">;
|
|
710
|
+
/**
|
|
711
|
+
* Use the StackNav primitive in the left rail instead of SideNav.
|
|
712
|
+
*/
|
|
713
|
+
stackNav?: Omit<StackNavProps, "mobileMenuId" | "sidebarCollapseId">;
|
|
496
714
|
/** Optional top bar slots & options */
|
|
497
715
|
topNav?: Pick<TopNavProps, "rightContent" | "centerContent" | "showMobileMenu" | "avatar" | "showColorModeSwitcher" | "toggleTheme" | "isDarkThemeEnabled" | "colorMode" | "actions" | "className">;
|
|
498
716
|
/** Main page content */
|
|
@@ -505,12 +723,7 @@ type AppShellProps = {
|
|
|
505
723
|
/** Optional: Enable JavaScript progressive enhancements */
|
|
506
724
|
enableJsEnhancements?: boolean;
|
|
507
725
|
};
|
|
508
|
-
|
|
509
|
-
* Isomorphic AppShell component that works as both server and client component
|
|
510
|
-
* Uses CSS-only interactions by default for full SSR compatibility
|
|
511
|
-
* Can be progressively enhanced with JavaScript when enableJsEnhancements is true
|
|
512
|
-
*/
|
|
513
|
-
declare function AppShell({ sideNav, topNav, children, contentPaddingX, contentPaddingY, showSidebarBorder, mainClassName, enableJsEnhancements, }: AppShellProps): react_jsx_runtime.JSX.Element;
|
|
726
|
+
declare function AppShell({ sideNav, stackNav, topNav, children, contentPaddingX, contentPaddingY, showSidebarBorder, mainClassName, enableJsEnhancements, }: AppShellProps): react_jsx_runtime.JSX.Element;
|
|
514
727
|
|
|
515
728
|
interface AvatarProps {
|
|
516
729
|
/**
|
|
@@ -1706,6 +1919,13 @@ interface SegmentedControlProps {
|
|
|
1706
1919
|
* @default "subtle"
|
|
1707
1920
|
*/
|
|
1708
1921
|
variant?: SegmentedControlVariant | LegacySegmentedControlVariant;
|
|
1922
|
+
/**
|
|
1923
|
+
* When true, segments render only their icon — labels become sr-only and
|
|
1924
|
+
* still drive `aria-label` for assistive tech. Each option must provide an
|
|
1925
|
+
* `icon`; options without one fall back to showing the label.
|
|
1926
|
+
* @default false
|
|
1927
|
+
*/
|
|
1928
|
+
iconOnly?: boolean;
|
|
1709
1929
|
}
|
|
1710
1930
|
/**
|
|
1711
1931
|
* SegmentedControl
|
|
@@ -1713,7 +1933,7 @@ interface SegmentedControlProps {
|
|
|
1713
1933
|
* A segmented control component for selecting between multiple options.
|
|
1714
1934
|
* Similar to a radio group but with a more compact, button-like appearance.
|
|
1715
1935
|
*/
|
|
1716
|
-
declare function SegmentedControl({ options, value, onChange, size, className, isDisabled, variant, "aria-label": ariaLabel, }: SegmentedControlProps): react_jsx_runtime.JSX.Element;
|
|
1936
|
+
declare function SegmentedControl({ options, value, onChange, size, className, isDisabled, variant, iconOnly, "aria-label": ariaLabel, }: SegmentedControlProps): react_jsx_runtime.JSX.Element;
|
|
1717
1937
|
|
|
1718
1938
|
type TextLinkVariant = "primary" | "secondary" | "muted" | "unstyled";
|
|
1719
1939
|
type LegacyTextLinkVariant = "default" | "brand";
|
|
@@ -1985,4 +2205,4 @@ declare const isLightColor: (color: string) => boolean;
|
|
|
1985
2205
|
*/
|
|
1986
2206
|
declare const getContrastingTextColor: (backgroundColor: string) => string;
|
|
1987
2207
|
|
|
1988
|
-
export { type
|
|
2208
|
+
export { type EnergyFormat as $, type ActionItem as A, type BadgeProps as B, type ChartMargin as C, getContrastingTextColor as D, ENTITY_CONFIG as E, getDefaultChartColor as F, getDefaultColors as G, Heading as H, type InteractiveMapProps as I, getEntityConfig as J, getEntityIcon as K, Loader as L, type MapPoint as M, getEntityLabel as N, getResolvedColor as O, getThemeCategoricalColors as P, getYFormatSettings as Q, isLightColor as R, type SegmentOption as S, TextLink as T, type FieldValue as U, type BooleanFormat as V, type FormattedValue as W, type CurrentFormat as X, type YFormatSettings as Y, type DateFormat as Z, type DistanceFormat as _, type ActionMenuProps as a, getGridStateLabel as a$, type CurrencyFormat as a0, type NumberFormat as a1, type PhoneFormat as a2, type PowerFormat as a3, type FormatterFunction as a4, type ResistanceFormat as a5, type TemperatureFormat as a6, type TemperatureUnitString as a7, type TemperatureUnit as a8, type TextFormat as a9, InteractiveMap as aA, type LayerFeature as aB, type LayerStyle as aC, MAP_TYPES as aD, type MapType as aE, Meter as aF, type MetricFormat as aG, type PercentageFormat as aH, type PowerUnit as aI, type RenderType as aJ, type ResistanceUnit as aK, SegmentedControl as aL, StackNav as aM, type StackNavItem as aN, type StackNavLinkComponentProps as aO, type StackNavProps as aP, type StackNavTheme as aQ, StaticMap as aR, type TextTransform as aS, type TextTruncatePosition as aT, type VoltageUnit as aU, type ZoomStops as aV, activeDeviceStates as aW, deviceStateLabels as aX, deviceStateMetricFormats as aY, formatComponentValue as aZ, getDeviceStateLabel as a_, type VoltageFormat as aa, type FieldFormat as ab, type DeviceState as ac, type GridState as ad, type ComponentFormatter as ae, type LayerSpec as af, type CustomPinsSpec as ag, type GeoJsonLayerSpec as ah, type RasterLayerSpec as ai, type VectorLayerSpec as aj, type ClusteredVectorLayerSpec as ak, ActionMenu as al, AppShell as am, Avatar as an, Badge as ao, type BaseFormat as ap, ChartContext as aq, CodeEditor as ar, type ColorSpec as as, type ComponentFormatOptions as at, type CurrentUnit as au, type CustomFormat as av, DEFAULT_MAP_TYPE as aw, type DateFormatStyle as ax, type DistanceUnit as ay, type EnergyUnit as az, type AppShellProps as b, gridStateLabels as b0, isActiveState as b1, useChartContext as b2, useComponentFormatter as b3, type AvatarProps as c, type BaseDataPoint as d, type CodeEditorProps as e, type CodeLanguage as f, type CodeTheme as g, type EntityConfig as h, type EntityType as i, Logo as j, type MeterProps as k, type SegmentedControlProps as l, SideNav as m, type SideNavItem as n, type SideNavProps as o, type StaticMapProps as p, type TooltipData as q, type TooltipSeries as r, TopNav as s, type TopNavProps as t, type YFormatType as u, clearColorCache as v, createCategoryColorMap as w, createXScale as x, createYScale as y, defaultMargin as z };
|