@glyphui/ui 0.3.0 → 0.4.0

package/dist/index.d.ts

@@ -1,9 +1,11 @@
 import { n as tv, t as VariantProps } from "./tv-DuMh7UH2.js";
-import { a as IconButton, c as fieldStyles, i as ButtonProps, l as ButtonVariants, n as FieldProps, o as IconButtonProps, r as Button, s as FieldVariants, t as Field, u as buttonStyles } from "./index-BWK4czIG.js";
+import { a as IconButton, c as fieldStyles, i as ButtonProps, l as ButtonVariants, n as FieldProps, o as IconButtonProps, r as Button, s as FieldVariants, t as Field, u as buttonStyles } from "./index-Bi7rZ6ba.js";
 import { t as StylesEntry } from "./registry-BGSJoiLq.js";
+import { n as ColorModePreference, r as getColorModeScript, t as ColorModeOptions } from "./color-mode-script-KdwItKN2.js";
+import { a as LinkComponentProps, c as useIsActive, i as LinkComponent, l as useLinkComponent, n as GlyphRouter, o as UseIsActive, r as IsActiveOptions, s as useGlyph, t as GlyphContextValue } from "./glyph-context-DxGJrdvr.js";
 import { ColorMode, ColorMode as ColorMode$1, ColorToken, ComponentName, ComponentOverrides, GlyphComponentRegistry, RadiusToken, ShadowToken, TextToken, Theme, Theme as Theme$1, ThemeInput, Tone, defineTheme, themeToCss, tokenVar } from "@glyphui/tokens";
 import { Accordion as Accordion$1, AlertDialog as AlertDialog$1, AspectRatio as AspectRatio$1, Avatar as Avatar$1, Checkbox as Checkbox$1, Collapsible as Collapsible$1, ContextMenu as ContextMenu$1, Dialog as Dialog$1, DropdownMenu as DropdownMenu$1, HoverCard as HoverCard$1, Label as Label$1, NavigationMenu as NavigationMenu$1, Popover as Popover$1, RadioGroup as RadioGroup$1, ScrollArea as ScrollArea$1, Select as Select$1, Separator as Separator$1, Switch as Switch$1, Tabs as Tabs$1, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1, Tooltip as Tooltip$1, VisuallyHidden as VisuallyHidden$1 } from "radix-ui";
-import { ComponentProps, DependencyList, Dispatch, ElementType, MouseEvent, MouseEventHandler, ReactNode, SetStateAction } from "react";
+import { ComponentProps, DependencyList, Dispatch, FormEvent, MouseEvent, ReactNode, SetStateAction } from "react";
 import { DateRange, DateRange as DateRange$1, DayPickerProps, Matcher, Matcher as Matcher$1 } from "react-day-picker";
 import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
 import { ClassValue } from "clsx";
@@ -578,7 +580,9 @@ interface SegmentedControlProps<T extends string> extends VariantProps<typeof se
   value?: T;
   defaultValue?: T;
   onValueChange?: (value: T) => void;
-  'aria-label': string;
+  /** Required unless the control sits in a `<Field label>`, which labels it. */
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
   className?: string;
   id?: string;
 }
@@ -841,11 +845,11 @@ export declare const tableStyles: import("tailwind-variants").TVReturnType<{
       caption?: import("tailwind-variants").ClassValue;
       header?: import("tailwind-variants").ClassValue;
       body?: import("tailwind-variants").ClassValue;
-      wrapper?: import("tailwind-variants").ClassValue;
-      table?: import("tailwind-variants").ClassValue;
-      row?: import("tailwind-variants").ClassValue;
       head?: import("tailwind-variants").ClassValue;
+      table?: import("tailwind-variants").ClassValue;
       cell?: import("tailwind-variants").ClassValue;
+      row?: import("tailwind-variants").ClassValue;
+      wrapper?: import("tailwind-variants").ClassValue;
     };
   };
 } | {
@@ -854,11 +858,11 @@ export declare const tableStyles: import("tailwind-variants").TVReturnType<{
       caption?: import("tailwind-variants").ClassValue;
       header?: import("tailwind-variants").ClassValue;
       body?: import("tailwind-variants").ClassValue;
-      wrapper?: import("tailwind-variants").ClassValue;
-      table?: import("tailwind-variants").ClassValue;
-      row?: import("tailwind-variants").ClassValue;
       head?: import("tailwind-variants").ClassValue;
+      table?: import("tailwind-variants").ClassValue;
       cell?: import("tailwind-variants").ClassValue;
+      row?: import("tailwind-variants").ClassValue;
+      wrapper?: import("tailwind-variants").ClassValue;
     };
   };
 } | {}, {
@@ -876,11 +880,11 @@ export declare const tableStyles: import("tailwind-variants").TVReturnType<{
       caption?: import("tailwind-variants").ClassValue;
       header?: import("tailwind-variants").ClassValue;
       body?: import("tailwind-variants").ClassValue;
-      wrapper?: import("tailwind-variants").ClassValue;
-      table?: import("tailwind-variants").ClassValue;
-      row?: import("tailwind-variants").ClassValue;
       head?: import("tailwind-variants").ClassValue;
+      table?: import("tailwind-variants").ClassValue;
       cell?: import("tailwind-variants").ClassValue;
+      row?: import("tailwind-variants").ClassValue;
+      wrapper?: import("tailwind-variants").ClassValue;
     };
   };
 } | {}, {
@@ -1288,9 +1292,9 @@ export declare const sidebarStyles: import("tailwind-variants").TVReturnType<{
       root?: import("tailwind-variants").ClassValue;
       footer?: import("tailwind-variants").ClassValue;
       header?: import("tailwind-variants").ClassValue;
-      item?: import("tailwind-variants").ClassValue;
       content?: import("tailwind-variants").ClassValue;
       section?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
       sectionLabel?: import("tailwind-variants").ClassValue;
       itemIcon?: import("tailwind-variants").ClassValue;
       itemLabel?: import("tailwind-variants").ClassValue;
@@ -1303,9 +1307,9 @@ export declare const sidebarStyles: import("tailwind-variants").TVReturnType<{
       root?: import("tailwind-variants").ClassValue;
       footer?: import("tailwind-variants").ClassValue;
       header?: import("tailwind-variants").ClassValue;
-      item?: import("tailwind-variants").ClassValue;
       content?: import("tailwind-variants").ClassValue;
       section?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
       sectionLabel?: import("tailwind-variants").ClassValue;
       itemIcon?: import("tailwind-variants").ClassValue;
       itemLabel?: import("tailwind-variants").ClassValue;
@@ -1329,9 +1333,9 @@ export declare const sidebarStyles: import("tailwind-variants").TVReturnType<{
       root?: import("tailwind-variants").ClassValue;
       footer?: import("tailwind-variants").ClassValue;
       header?: import("tailwind-variants").ClassValue;
-      item?: import("tailwind-variants").ClassValue;
       content?: import("tailwind-variants").ClassValue;
       section?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
       sectionLabel?: import("tailwind-variants").ClassValue;
       itemIcon?: import("tailwind-variants").ClassValue;
       itemLabel?: import("tailwind-variants").ClassValue;
@@ -2202,9 +2206,9 @@ export declare const breadcrumbStyles: import("tailwind-variants").TVReturnType<
     [key: string]: import("tailwind-variants").ClassValue | {
       root?: import("tailwind-variants").ClassValue;
       link?: import("tailwind-variants").ClassValue;
-      item?: import("tailwind-variants").ClassValue;
       list?: import("tailwind-variants").ClassValue;
       separator?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
       page?: import("tailwind-variants").ClassValue;
     };
   };
@@ -2213,9 +2217,9 @@ export declare const breadcrumbStyles: import("tailwind-variants").TVReturnType<
     [x: string]: import("tailwind-variants").ClassValue | {
       root?: import("tailwind-variants").ClassValue;
       link?: import("tailwind-variants").ClassValue;
-      item?: import("tailwind-variants").ClassValue;
       list?: import("tailwind-variants").ClassValue;
       separator?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
       page?: import("tailwind-variants").ClassValue;
     };
   };
@@ -2231,9 +2235,9 @@ export declare const breadcrumbStyles: import("tailwind-variants").TVReturnType<
     [key: string]: import("tailwind-variants").ClassValue | {
       root?: import("tailwind-variants").ClassValue;
       link?: import("tailwind-variants").ClassValue;
-      item?: import("tailwind-variants").ClassValue;
       list?: import("tailwind-variants").ClassValue;
       separator?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
       page?: import("tailwind-variants").ClassValue;
     };
   };
@@ -2650,16 +2654,16 @@ export declare const collapsibleStyles: import("tailwind-variants").TVReturnType
   [key: string]: {
     [key: string]: import("tailwind-variants").ClassValue | {
       root?: import("tailwind-variants").ClassValue;
-      trigger?: import("tailwind-variants").ClassValue;
       content?: import("tailwind-variants").ClassValue;
+      trigger?: import("tailwind-variants").ClassValue;
     };
   };
 } | {
   [x: string]: {
     [x: string]: import("tailwind-variants").ClassValue | {
       root?: import("tailwind-variants").ClassValue;
-      trigger?: import("tailwind-variants").ClassValue;
       content?: import("tailwind-variants").ClassValue;
+      trigger?: import("tailwind-variants").ClassValue;
     };
   };
 } | {}, {
@@ -2670,8 +2674,8 @@ export declare const collapsibleStyles: import("tailwind-variants").TVReturnType
   [key: string]: {
     [key: string]: import("tailwind-variants").ClassValue | {
       root?: import("tailwind-variants").ClassValue;
-      trigger?: import("tailwind-variants").ClassValue;
       content?: import("tailwind-variants").ClassValue;
+      trigger?: import("tailwind-variants").ClassValue;
     };
   };
 } | {}, {
@@ -2897,12 +2901,12 @@ export declare const commandMenuStyles: import("tailwind-variants").TVReturnType
     [key: string]: import("tailwind-variants").ClassValue | {
       root?: import("tailwind-variants").ClassValue;
       search?: import("tailwind-variants").ClassValue;
-      group?: import("tailwind-variants").ClassValue;
       input?: import("tailwind-variants").ClassValue;
-      item?: import("tailwind-variants").ClassValue;
+      group?: import("tailwind-variants").ClassValue;
       content?: import("tailwind-variants").ClassValue;
       list?: import("tailwind-variants").ClassValue;
       separator?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
       overlay?: import("tailwind-variants").ClassValue;
       itemIcon?: import("tailwind-variants").ClassValue;
       itemLabel?: import("tailwind-variants").ClassValue;
@@ -2915,12 +2919,12 @@ export declare const commandMenuStyles: import("tailwind-variants").TVReturnType
     [x: string]: import("tailwind-variants").ClassValue | {
       root?: import("tailwind-variants").ClassValue;
       search?: import("tailwind-variants").ClassValue;
-      group?: import("tailwind-variants").ClassValue;
       input?: import("tailwind-variants").ClassValue;
-      item?: import("tailwind-variants").ClassValue;
+      group?: import("tailwind-variants").ClassValue;
       content?: import("tailwind-variants").ClassValue;
       list?: import("tailwind-variants").ClassValue;
       separator?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
       overlay?: import("tailwind-variants").ClassValue;
       itemIcon?: import("tailwind-variants").ClassValue;
       itemLabel?: import("tailwind-variants").ClassValue;
@@ -2947,12 +2951,12 @@ export declare const commandMenuStyles: import("tailwind-variants").TVReturnType
     [key: string]: import("tailwind-variants").ClassValue | {
       root?: import("tailwind-variants").ClassValue;
       search?: import("tailwind-variants").ClassValue;
-      group?: import("tailwind-variants").ClassValue;
       input?: import("tailwind-variants").ClassValue;
-      item?: import("tailwind-variants").ClassValue;
+      group?: import("tailwind-variants").ClassValue;
       content?: import("tailwind-variants").ClassValue;
       list?: import("tailwind-variants").ClassValue;
       separator?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
       overlay?: import("tailwind-variants").ClassValue;
       itemIcon?: import("tailwind-variants").ClassValue;
       itemLabel?: import("tailwind-variants").ClassValue;
@@ -3671,6 +3675,8 @@ export declare function Eyebrow(inProps: EyebrowProps): import("react").JSX.Elem
 //#region src/components/field/field-context.d.ts
 interface FieldContextValue {
   id: string;
+  /** Id of the visible label, for controls labelled by reference (aria-labelledby). */
+  labelId: string | undefined;
   descriptionId: string | undefined;
   errorId: string | undefined;
   invalid: boolean;
@@ -3749,10 +3755,10 @@ export declare const fileUploadStyles: import("tailwind-variants").TVReturnType<
       icon?: import("tailwind-variants").ClassValue;
       root?: import("tailwind-variants").ClassValue;
       title?: import("tailwind-variants").ClassValue;
-      item?: import("tailwind-variants").ClassValue;
-      list?: import("tailwind-variants").ClassValue;
       progress?: import("tailwind-variants").ClassValue;
+      list?: import("tailwind-variants").ClassValue;
       hint?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
       highlight?: import("tailwind-variants").ClassValue;
       rejections?: import("tailwind-variants").ClassValue;
       fileIcon?: import("tailwind-variants").ClassValue;
@@ -3770,10 +3776,10 @@ export declare const fileUploadStyles: import("tailwind-variants").TVReturnType<
       icon?: import("tailwind-variants").ClassValue;
       root?: import("tailwind-variants").ClassValue;
       title?: import("tailwind-variants").ClassValue;
-      item?: import("tailwind-variants").ClassValue;
-      list?: import("tailwind-variants").ClassValue;
       progress?: import("tailwind-variants").ClassValue;
+      list?: import("tailwind-variants").ClassValue;
       hint?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
       highlight?: import("tailwind-variants").ClassValue;
       rejections?: import("tailwind-variants").ClassValue;
       fileIcon?: import("tailwind-variants").ClassValue;
@@ -3808,10 +3814,10 @@ export declare const fileUploadStyles: import("tailwind-variants").TVReturnType<
       icon?: import("tailwind-variants").ClassValue;
       root?: import("tailwind-variants").ClassValue;
       title?: import("tailwind-variants").ClassValue;
-      item?: import("tailwind-variants").ClassValue;
-      list?: import("tailwind-variants").ClassValue;
       progress?: import("tailwind-variants").ClassValue;
+      list?: import("tailwind-variants").ClassValue;
       hint?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
       highlight?: import("tailwind-variants").ClassValue;
       rejections?: import("tailwind-variants").ClassValue;
       fileIcon?: import("tailwind-variants").ClassValue;
@@ -4278,7 +4284,7 @@ interface LinkProps extends Omit<ComponentProps<'a'>, 'href'>, LinkVariants {
 export declare function Link(inProps: LinkProps): import("react").JSX.Element;
 //#endregion
 //#region src/components/modal/modal.d.ts
-interface ModalProps extends Omit<DialogContentProps, 'title' | 'children'> {
+interface ModalProps extends Omit<DialogContentProps, 'title' | 'children' | 'onSubmit'> {
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?: (open: boolean) => void;
@@ -4291,6 +4297,12 @@ interface ModalProps extends Omit<DialogContentProps, 'title' | 'children'> {
   footer?: ReactNode;
   /** Close when the backdrop is clicked. Default true. */
   closeOnOverlayClick?: boolean;
+  /**
+   * Turns the body and footer into one `<form>`, so a `type="submit"` button in the footer
+   * submits the fields in the body. The page does not reload. With `@glyphui/ui/form`, use
+   * `<Form>` in the body and `<FormSubmit form={form}>` in the footer instead.
+   */
+  onSubmit?: (event: FormEvent<HTMLFormElement>) => void;
   children?: ReactNode;
 }
 /**
@@ -4310,6 +4322,7 @@ export declare const modalStyles: import("tailwind-variants").TVReturnType<{
       header?: import("tailwind-variants").ClassValue;
       body?: import("tailwind-variants").ClassValue;
       content?: import("tailwind-variants").ClassValue;
+      form?: import("tailwind-variants").ClassValue;
     };
   };
 } | {
@@ -4319,6 +4332,7 @@ export declare const modalStyles: import("tailwind-variants").TVReturnType<{
       header?: import("tailwind-variants").ClassValue;
       body?: import("tailwind-variants").ClassValue;
       content?: import("tailwind-variants").ClassValue;
+      form?: import("tailwind-variants").ClassValue;
     };
   };
 } | {}, {
@@ -4326,6 +4340,8 @@ export declare const modalStyles: import("tailwind-variants").TVReturnType<{
   header: string;
   body: string;
   footer: string;
+  /** Wraps body and footer when `onSubmit` is set; `contents` keeps the dialog layout. */
+  form: string;
 }, undefined, {
   [key: string]: {
     [key: string]: import("tailwind-variants").ClassValue | {
@@ -4333,6 +4349,7 @@ export declare const modalStyles: import("tailwind-variants").TVReturnType<{
       header?: import("tailwind-variants").ClassValue;
       body?: import("tailwind-variants").ClassValue;
       content?: import("tailwind-variants").ClassValue;
+      form?: import("tailwind-variants").ClassValue;
     };
   };
 } | {}, {
@@ -4340,11 +4357,15 @@ export declare const modalStyles: import("tailwind-variants").TVReturnType<{
   header: string;
   body: string;
   footer: string;
+  /** Wraps body and footer when `onSubmit` is set; `contents` keeps the dialog layout. */
+  form: string;
 }, import("tailwind-variants").TVReturnTypeLike<unknown, {
   content: string;
   header: string;
   body: string;
   footer: string;
+  /** Wraps body and footer when `onSubmit` is set; `contents` keeps the dialog layout. */
+  form: string;
 }>>;
 declare module '@glyphui/tokens' {
   interface GlyphComponentRegistry {
@@ -4371,8 +4392,11 @@ interface NavigationMenuLinkProps extends Omit<ComponentProps<typeof NavigationM
   /** Rendered through the provider's `linkComponent`, so it uses your router. */
   href?: string;
 }
-/** A top-level link (no panel). Set `active` for the current page. */
-export declare function NavigationMenuLink({ href, className, children, ...props }: NavigationMenuLinkProps): import("react").JSX.Element;
+/**
+ * A top-level link (no panel). Marked active automatically from the provider's `router`;
+ * set `active` to override.
+ */
+export declare function NavigationMenuLink({ href, active: activeProp, className, children, ...props }: NavigationMenuLinkProps): import("react").JSX.Element;
 interface NavigationMenuCardProps {
   href: string;
   title: ReactNode;
@@ -4390,11 +4414,11 @@ export declare const navigationMenuStyles: import("tailwind-variants").TVReturnT
       root?: import("tailwind-variants").ClassValue;
       card?: import("tailwind-variants").ClassValue;
       link?: import("tailwind-variants").ClassValue;
+      content?: import("tailwind-variants").ClassValue;
+      list?: import("tailwind-variants").ClassValue;
       item?: import("tailwind-variants").ClassValue;
       viewport?: import("tailwind-variants").ClassValue;
       trigger?: import("tailwind-variants").ClassValue;
-      content?: import("tailwind-variants").ClassValue;
-      list?: import("tailwind-variants").ClassValue;
       chevron?: import("tailwind-variants").ClassValue;
       viewportWrapper?: import("tailwind-variants").ClassValue;
       cardIcon?: import("tailwind-variants").ClassValue;
@@ -4409,11 +4433,11 @@ export declare const navigationMenuStyles: import("tailwind-variants").TVReturnT
       root?: import("tailwind-variants").ClassValue;
       card?: import("tailwind-variants").ClassValue;
       link?: import("tailwind-variants").ClassValue;
+      content?: import("tailwind-variants").ClassValue;
+      list?: import("tailwind-variants").ClassValue;
       item?: import("tailwind-variants").ClassValue;
       viewport?: import("tailwind-variants").ClassValue;
       trigger?: import("tailwind-variants").ClassValue;
-      content?: import("tailwind-variants").ClassValue;
-      list?: import("tailwind-variants").ClassValue;
       chevron?: import("tailwind-variants").ClassValue;
       viewportWrapper?: import("tailwind-variants").ClassValue;
       cardIcon?: import("tailwind-variants").ClassValue;
@@ -4443,11 +4467,11 @@ export declare const navigationMenuStyles: import("tailwind-variants").TVReturnT
       root?: import("tailwind-variants").ClassValue;
       card?: import("tailwind-variants").ClassValue;
       link?: import("tailwind-variants").ClassValue;
+      content?: import("tailwind-variants").ClassValue;
+      list?: import("tailwind-variants").ClassValue;
       item?: import("tailwind-variants").ClassValue;
       viewport?: import("tailwind-variants").ClassValue;
       trigger?: import("tailwind-variants").ClassValue;
-      content?: import("tailwind-variants").ClassValue;
-      list?: import("tailwind-variants").ClassValue;
       chevron?: import("tailwind-variants").ClassValue;
       viewportWrapper?: import("tailwind-variants").ClassValue;
       cardIcon?: import("tailwind-variants").ClassValue;
@@ -5322,9 +5346,9 @@ export declare const scrollAreaStyles: import("tailwind-variants").TVReturnType<
   [key: string]: {
     [key: string]: import("tailwind-variants").ClassValue | {
       root?: import("tailwind-variants").ClassValue;
-      viewport?: import("tailwind-variants").ClassValue;
       thumb?: import("tailwind-variants").ClassValue;
       scrollbar?: import("tailwind-variants").ClassValue;
+      viewport?: import("tailwind-variants").ClassValue;
       corner?: import("tailwind-variants").ClassValue;
     };
   };
@@ -5332,9 +5356,9 @@ export declare const scrollAreaStyles: import("tailwind-variants").TVReturnType<
   [x: string]: {
     [x: string]: import("tailwind-variants").ClassValue | {
       root?: import("tailwind-variants").ClassValue;
-      viewport?: import("tailwind-variants").ClassValue;
       thumb?: import("tailwind-variants").ClassValue;
       scrollbar?: import("tailwind-variants").ClassValue;
+      viewport?: import("tailwind-variants").ClassValue;
       corner?: import("tailwind-variants").ClassValue;
     };
   };
@@ -5348,9 +5372,9 @@ export declare const scrollAreaStyles: import("tailwind-variants").TVReturnType<
   [key: string]: {
     [key: string]: import("tailwind-variants").ClassValue | {
       root?: import("tailwind-variants").ClassValue;
-      viewport?: import("tailwind-variants").ClassValue;
       thumb?: import("tailwind-variants").ClassValue;
       scrollbar?: import("tailwind-variants").ClassValue;
+      viewport?: import("tailwind-variants").ClassValue;
       corner?: import("tailwind-variants").ClassValue;
     };
   };
@@ -5575,7 +5599,9 @@ interface SliderProps<V extends SliderValue> {
   name?: string;
   id?: string;
   className?: string;
+  /** Accessible name. Inside a `Field`, the field's label is used when this is not set. */
   'aria-label'?: string;
+  'aria-labelledby'?: string;
   'aria-describedby'?: string;
   'aria-invalid'?: boolean;
   /** Accessible names for range thumbs. Default: "Minimum", "Maximum". */
@@ -6646,7 +6672,10 @@ export declare function useAppShell(): AppShellContextValue;
 interface NavLink {
   label: ReactNode;
   href: string;
+  /** Marks the current page. Computed from the provider's `router` when not set. */
   active?: boolean;
+  /** With automatic matching, only the exact path is active (not its children). */
+  end?: boolean;
 }
 interface NavbarProps extends Omit<ComponentProps<'header'>, 'children'> {
   brand: ReactNode;
@@ -6691,12 +6720,15 @@ interface SidebarItemProps {
   icon?: ReactNode;
   /** Count or short status shown at the end. */
   badge?: ReactNode;
+  /** Marks the current page. Computed from the provider's `router` when not set. */
   active?: boolean;
+  /** With automatic matching, only the exact path is active (not its children). */
+  end?: boolean;
   onClick?: (event: MouseEvent<HTMLElement>) => void;
   className?: string;
   children: ReactNode;
 }
-export declare function SidebarItem({ href, icon, badge, active, onClick, className, children }: SidebarItemProps): import("react").JSX.Element;
+export declare function SidebarItem({ href, icon, badge, active: activeProp, end, onClick, className, children }: SidebarItemProps): import("react").JSX.Element;
 export declare function SidebarFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 /** Collapses the sidebar on desktop; opens the navigation drawer on mobile. */
 export declare function SidebarTrigger(props: Partial<IconButtonProps>): import("react").JSX.Element | null;
@@ -6741,7 +6773,6 @@ export declare function Async<T>({ result, children, isEmpty, loading, empty, er
 export declare function useAsync<T>(fn: () => Promise<T>, deps: DependencyList): AsyncResult<T>;
 //#endregion
 //#region src/provider/color-mode.d.ts
-type ColorModePreference = ColorMode$1 | 'system';
 interface ColorModeContextValue {
   /** What the user chose. */
   mode: ColorModePreference;
@@ -6749,12 +6780,6 @@ interface ColorModeContextValue {
   resolvedMode: ColorMode$1;
   setMode: (mode: ColorModePreference) => void;
 }
-interface ColorModeOptions {
-  /** Used when nothing is stored yet. */
-  defaultMode?: ColorModePreference;
-  /** localStorage key. Set to `null` to disable persistence. */
-  storageKey?: string | null;
-}
 export declare function ColorModeProvider({ children, defaultMode, storageKey }: ColorModeOptions & {
   children: ReactNode;
 }): import("react").JSX.Element;
@@ -6764,33 +6789,9 @@ export declare function useColorMode(): ColorModeContextValue;
  * Inline script that sets `data-mode` on `<html>` before first paint, so a dark-mode
  * visitor never sees a light flash. Put it in `<head>`.
  */
-export declare function getColorModeScript({ defaultMode, storageKey }?: ColorModeOptions): string;
 /** `<script>` element version of `getColorModeScript` for SSR frameworks. */
 export declare function ColorModeScript(props: ColorModeOptions): import("react").JSX.Element;
 //#endregion
-//#region src/provider/glyph-context.d.ts
-/** Props Glyph passes to your router's link component. */
-interface LinkComponentProps {
-  href: string;
-  className?: string;
-  children?: ReactNode;
-  onClick?: MouseEventHandler<HTMLAnchorElement>;
-  'aria-current'?: 'page' | undefined;
-}
-/**
- * Any component that renders a link from these props. Plain `'a'` by default.
- * React Router: `({ href, ...props }) => <Link to={href} {...props} />`
- */
-type LinkComponent = ElementType<LinkComponentProps>;
-interface GlyphContextValue {
-  theme: Theme$1;
-  linkComponent: LinkComponent;
-}
-/** The active theme and app-level settings. Must be used under `GlyphProvider`. */
-export declare function useGlyph(): GlyphContextValue;
-/** The router-aware link component configured on `GlyphProvider`. */
-export declare function useLinkComponent(): LinkComponent;
-//#endregion
 //#region src/provider/glyph-provider.d.ts
 interface GlyphProviderProps {
   children: ReactNode;
@@ -6800,7 +6801,13 @@ interface GlyphProviderProps {
   defaultMode?: ColorModePreference;
   /** localStorage key for the user's color mode. `null` disables persistence. */
   storageKey?: string | null;
-  /** Your router's link, used by Navbar, Sidebar and other navigation components. */
+  /**
+   * Your router: its link component, plus an optional `useIsActive` hook that marks the
+   * current page in Sidebar, Navbar and NavigationMenu. React Router:
+   * `import { reactRouter } from '@glyphui/ui/react-router'`.
+   */
+  router?: GlyphRouter;
+  /** Your router's link only. Prefer `router`, which also handles active items. */
   linkComponent?: LinkComponent;
   /**
    * Mounts a themed `<Toaster />` so `toast()` works anywhere. `true` for defaults, or pass
@@ -6809,7 +6816,7 @@ interface GlyphProviderProps {
   toaster?: boolean | ToasterProps;
 }
 /** Provides the theme, color mode, tooltips, `useConfirm()` and (optionally) toasts. Render once at the root. */
-export declare function GlyphProvider({ children, theme, defaultMode, storageKey, linkComponent, toaster }: GlyphProviderProps): import("react").JSX.Element;
+export declare function GlyphProvider({ children, theme, defaultMode, storageKey, router, linkComponent, toaster }: GlyphProviderProps): import("react").JSX.Element;
 //#endregion
 //#region src/provider/theme-scope.d.ts
 interface ThemeScopeProps extends ComponentProps<'div'> {
@@ -6846,4 +6853,4 @@ type PresetName = keyof typeof presets;
 /** Joins class names and resolves Tailwind conflicts (last one wins). */
 export declare function cn(...inputs: ClassValue[]): string;
 //#endregion
-export { type AccordionProps, type AccordionVariants, type AlertDialogActionProps, type AlertDialogContentProps, type AlertProps, type AlertVariants, type AppShellContextValue, type AppShellProps, type AspectRatioProps, type AsyncProps, type AsyncResult, type AsyncStatus, type AvatarProps, type AvatarVariants, type BadgeProps, type BadgeVariants, type BannerProps, type BannerVariants, type BlockquoteProps, type BreadcrumbItemData, type BreadcrumbLinkProps, type BreadcrumbProps, Button, type ButtonProps, type ButtonVariants, type CalendarProps, type CardProps, type CardTitleProps, type CardVariants, type CarouselApi, type CarouselOptions, type CarouselPlugin, type CarouselProps, type CarouselVariants, type ClassValue, type CodeBlockProps, type CodeBlockVariants, type ColorMode, type ColorModeContextValue, type ColorModeOptions, type ColorModePreference, type ColorToken, type ComboboxOption, type ComboboxProps, type ComboboxVariants, type CommandItemProps, type CommandMenuProps, type ComponentOverrides, type ConfirmFn, type ConfirmOptions, type ContainerProps, type ContextMenuItemProps, type ContextMenuSubTriggerProps, type ContextMenuVariants, type CopyButtonProps, type DatePickerProps, type DatePickerVariants, type DateRange, type DateRangePickerProps, type DateRangePreset, type DescriptionItemProps, type DescriptionListProps, type DescriptionListVariants, type DialogContentProps, type DialogVariants, type DropdownMenuItemProps, type DropdownMenuSubTriggerProps, type DropdownMenuVariants, type ErrorStateProps, type EyebrowProps, type EyebrowVariants, Field, type FieldContextValue, type FieldProps, type FieldVariants, type FileItem, type FileRejection, type FileRejectionReason, type FileUploadProps, type GlyphContextValue, type GlyphProviderProps, type GridCols, type GridProps, type HeadingProps, type HeadingVariants, IconButton, type IconButtonProps, type InputOTPProps, type InputOTPSlotProps, type InputOTPVariants, type InputProps, type InputVariants, type LinkComponent, type LinkComponentProps, type LinkProps, type LinkVariants, type LoadingStateProps, type Matcher, type ModalProps, type NavLink, type NavbarProps, type NavigationMenuCardProps, type NavigationMenuLinkProps, type NavigationMenuProps, type NumberInputProps, type NumberInputVariants, type PageHeaderProps, type PaginationItem, type PaginationProps, type PaginationVariants, type PasswordInputProps, type PasswordStrength, type PopoverContentProps, type PresetName, type ProgressCircleProps, type ProgressCircleVariants, type ProgressProps, type ProgressVariants, type ProseProps, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS, type RadioGroupItemProps, type RadioGroupProps, type RadioGroupVariants, type RadiusToken, type ResizableHandleProps, type ResizablePanelGroupProps, type ResizablePanelProps, type ResizableVariants, type ScrollAreaProps, type SectionProps, type SegmentedControlProps, type SegmentedOption, type SelectItemProps, type SelectProps, type ShadowToken, type SheetContentProps, type SheetVariants, type SidebarItemProps, type SidebarSectionProps, type SliderMark, type SliderProps, type SliderValue, type SliderVariants, type SlotClasses, type SpinnerProps, type SpinnerVariants, type StackProps, type StatCardProps, type StatCardVariants, type StateProps, type StepStatus, type StepperProps, type StepperStep, type StepperVariants, type SwitchProps, type TabsProps, type TagInputProps, type TagInputVariants, type TextProps, type TextToken, type TextVariants, type Theme, type ThemeInput, type ThemeScopeProps, type TimelineItemData, type TimelineItemProps, type TimelineProps, type TimelineVariants, type ToasterProps, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, type ToggleVariants, type Tone, type TooltipProps, type TreeNode, type TreeViewProps, type TreeViewVariants, type VariantProps, buttonStyles, defineTheme, fieldStyles, themeToCss, toast, tokenVar, tv };
+export { type AccordionProps, type AccordionVariants, type AlertDialogActionProps, type AlertDialogContentProps, type AlertProps, type AlertVariants, type AppShellContextValue, type AppShellProps, type AspectRatioProps, type AsyncProps, type AsyncResult, type AsyncStatus, type AvatarProps, type AvatarVariants, type BadgeProps, type BadgeVariants, type BannerProps, type BannerVariants, type BlockquoteProps, type BreadcrumbItemData, type BreadcrumbLinkProps, type BreadcrumbProps, Button, type ButtonProps, type ButtonVariants, type CalendarProps, type CardProps, type CardTitleProps, type CardVariants, type CarouselApi, type CarouselOptions, type CarouselPlugin, type CarouselProps, type CarouselVariants, type ClassValue, type CodeBlockProps, type CodeBlockVariants, type ColorMode, type ColorModeContextValue, type ColorModeOptions, type ColorModePreference, type ColorToken, type ComboboxOption, type ComboboxProps, type ComboboxVariants, type CommandItemProps, type CommandMenuProps, type ComponentOverrides, type ConfirmFn, type ConfirmOptions, type ContainerProps, type ContextMenuItemProps, type ContextMenuSubTriggerProps, type ContextMenuVariants, type CopyButtonProps, type DatePickerProps, type DatePickerVariants, type DateRange, type DateRangePickerProps, type DateRangePreset, type DescriptionItemProps, type DescriptionListProps, type DescriptionListVariants, type DialogContentProps, type DialogVariants, type DropdownMenuItemProps, type DropdownMenuSubTriggerProps, type DropdownMenuVariants, type ErrorStateProps, type EyebrowProps, type EyebrowVariants, Field, type FieldContextValue, type FieldProps, type FieldVariants, type FileItem, type FileRejection, type FileRejectionReason, type FileUploadProps, type GlyphContextValue, type GlyphProviderProps, type GlyphRouter, type GridCols, type GridProps, type HeadingProps, type HeadingVariants, IconButton, type IconButtonProps, type InputOTPProps, type InputOTPSlotProps, type InputOTPVariants, type InputProps, type InputVariants, type IsActiveOptions, type LinkComponent, type LinkComponentProps, type LinkProps, type LinkVariants, type LoadingStateProps, type Matcher, type ModalProps, type NavLink, type NavbarProps, type NavigationMenuCardProps, type NavigationMenuLinkProps, type NavigationMenuProps, type NumberInputProps, type NumberInputVariants, type PageHeaderProps, type PaginationItem, type PaginationProps, type PaginationVariants, type PasswordInputProps, type PasswordStrength, type PopoverContentProps, type PresetName, type ProgressCircleProps, type ProgressCircleVariants, type ProgressProps, type ProgressVariants, type ProseProps, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS, type RadioGroupItemProps, type RadioGroupProps, type RadioGroupVariants, type RadiusToken, type ResizableHandleProps, type ResizablePanelGroupProps, type ResizablePanelProps, type ResizableVariants, type ScrollAreaProps, type SectionProps, type SegmentedControlProps, type SegmentedOption, type SelectItemProps, type SelectProps, type ShadowToken, type SheetContentProps, type SheetVariants, type SidebarItemProps, type SidebarSectionProps, type SliderMark, type SliderProps, type SliderValue, type SliderVariants, type SlotClasses, type SpinnerProps, type SpinnerVariants, type StackProps, type StatCardProps, type StatCardVariants, type StateProps, type StepStatus, type StepperProps, type StepperStep, type StepperVariants, type SwitchProps, type TabsProps, type TagInputProps, type TagInputVariants, type TextProps, type TextToken, type TextVariants, type Theme, type ThemeInput, type ThemeScopeProps, type TimelineItemData, type TimelineItemProps, type TimelineProps, type TimelineVariants, type ToasterProps, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, type ToggleVariants, type Tone, type TooltipProps, type TreeNode, type TreeViewProps, type TreeViewVariants, type UseIsActive, type VariantProps, buttonStyles, defineTheme, fieldStyles, getColorModeScript, themeToCss, toast, tokenVar, tv, useGlyph, useIsActive, useLinkComponent };