@pstrikez/fluent-winui-theme 0.0.0-stage → 0.1.1

package/dist/lib/color.d.ts

@@ -0,0 +1,9 @@
+export declare const alphaColor: (hex: string, opacity: number) => string;
+export declare const blendHex: (hex: string, alpha: number, backdrop: string) => string;
+/**
+ * The nearest tone of `hex` that reads as text on `surface`. Hue is held fixed
+ * because it carries the upstream's identity; value moves first because it costs
+ * the least recognition, and saturation gives way only where value alone cannot
+ * reach the floor.
+ */
+export declare const readableTone: (hex: string, surface: string) => string;

package/dist/lib/legacy-css-color.d.ts

@@ -0,0 +1 @@
+export declare const toLegacyCssColor: (source: string) => string;

package/dist/lib/reduced-motion.d.ts

@@ -0,0 +1 @@
+export declare const prefersReducedMotion: () => boolean;

package/dist/lib/use-media-query.d.ts

@@ -0,0 +1,2 @@
+export declare const DARK_SCHEME_QUERY = "(prefers-color-scheme: dark)";
+export declare const useMediaQuery: (query: string) => boolean;

package/dist/shell/app-shell.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+export interface AppShellLabels {
+    /** The skip link that jumps past the navigation. */
+    skipToContent: string;
+    /** The header button that opens the navigation drawer. */
+    openNavigation: string;
+    /** Accessible name of the navigation drawer. */
+    navigation: string;
+}
+export interface AppShellProps {
+    /**
+     * Renders the navigation pane, usually a `NavigationPane`. It is rendered
+     * twice: docked, and in the narrow-layout drawer, where `onNavigate` is set so
+     * the pane can close the drawer and show its close button.
+     */
+    navigation: (props: {
+        onNavigate?: () => void;
+    }) => ReactNode;
+    /** Content of the narrow-layout header bar after the menu button, e.g. the logo. */
+    narrowHeader?: ReactNode;
+    /** Trailing content of the narrow-layout header bar, e.g. a language picker. */
+    narrowHeaderActions?: ReactNode;
+    labels: AppShellLabels;
+    /** Names the current page. A change plays the page transition; keep it stable across query-string rewrites. */
+    pageKey: string;
+    /** A workspace page fills the viewport height instead of growing with its content. */
+    workspace?: boolean;
+    children: ReactNode;
+}
+export declare function AppShell({ children, labels, narrowHeader, narrowHeaderActions, navigation, pageKey, workspace }: AppShellProps): import("react").JSX.Element;

package/dist/shell/gradient-background.css.d.ts

@@ -0,0 +1 @@
+export declare const gradientBackgroundCss = "\n  .fwt-gradient-background {\n    background-image:\n      radial-gradient(circle at 50% 0%, #ffffff 0%, #f7fbff 36%, transparent 64%),\n      linear-gradient(180deg, #f6f8fb 0%, #eef2f6 100%);\n    height: 100dvh;\n    overflow: hidden;\n  }\n  @media (prefers-color-scheme: dark) {\n    .fwt-gradient-background {\n      background-image:\n        radial-gradient(circle at 50% 0%, #2d2d2d 0%, #242424 38%, transparent 68%),\n        linear-gradient(180deg, #202020 0%, #1c1c1c 100%);\n    }\n  }\n";

package/dist/shell/gradient-background.d.ts

@@ -0,0 +1,2 @@
+import type { PropsWithChildren } from 'react';
+export declare function GradientBackground({ children }: PropsWithChildren): import("react").JSX.Element;

package/dist/shell/navigation-pane.d.ts

@@ -0,0 +1,42 @@
+import type { NavItemProps } from '@fluentui/react-components';
+import type { ReactNode } from 'react';
+export interface NavigationPaneItem {
+    /** Identifies the item for selection. Usually the route it leads to. */
+    value: string;
+    label: ReactNode;
+    icon?: NavItemProps['icon'];
+    /**
+     * A route to link to. Followed through `WinuiRouterProvider` when one is
+     * mounted, otherwise by the browser. Omit it for an action such as signing
+     * out, and handle `onSelect` instead.
+     */
+    href?: string;
+    onSelect?: () => void;
+}
+export interface NavigationPaneGroup {
+    /** Section header. Omit for an unlabelled first group. */
+    label?: ReactNode;
+    items: NavigationPaneItem[];
+}
+export interface NavigationPaneProps {
+    /** Accessible name of the navigation landmark. */
+    label: string;
+    /** Leading header content, e.g. the product logo. */
+    header?: ReactNode;
+    /** Trailing header content shown when docked (not in the drawer), e.g. a language picker. */
+    headerActions?: ReactNode;
+    groups: NavigationPaneGroup[];
+    /** Items pinned to the bottom of the pane, e.g. the account and sign-out. */
+    footerItems?: NavigationPaneItem[];
+    selectedValue: string;
+    /** The item a navigation in flight is heading to. */
+    pendingValue?: string;
+    /**
+     * Set when the pane sits in the narrow-layout drawer: called after an in-view
+     * navigation so the drawer can close, and it shows a close button.
+     */
+    onNavigate?: () => void;
+    /** Accessible name of the drawer's close button. */
+    closeLabel?: string;
+}
+export declare function NavigationPane({ closeLabel, footerItems, groups, header, headerActions, label, onNavigate, pendingValue, selectedValue, }: NavigationPaneProps): import("react").JSX.Element;

package/dist/shell/navigation-progress.css.d.ts

@@ -0,0 +1 @@
+export declare const navigationProgressCss: string;

package/dist/shell/navigation-progress.d.ts

@@ -0,0 +1,3 @@
+export declare function NavigationProgress({ active }: {
+    active: boolean;
+}): import("react").JSX.Element;

package/dist/shell/page-frames.d.ts

@@ -0,0 +1,24 @@
+import type { AnimationEventHandler, ReactNode } from 'react';
+export interface PageFrame {
+    /** Stable while the page stays, new on a page change. */
+    id: number;
+    node: ReactNode;
+    leaving: boolean;
+    /**
+     * Belongs on the element that carries the transition classes: the leaving
+     * frame is dropped when its own leave animation ends, so its lifetime is the
+     * animation's rather than a second statement of the animation's length.
+     */
+    onAnimationEnd: AnimationEventHandler<HTMLElement>;
+}
+/**
+ * The frames to draw: the current page, and the page it replaced for as long as
+ * that one takes to leave. Render each with `pageFrameClassName(frame)`.
+ *
+ * The leaving frame keeps the id it already had, so React matches it to the DOM
+ * already on screen; held under a new id it would mount afresh, snap back to its
+ * initial state and lose its scroll position before it fades.
+ */
+export declare const usePageFrames: (page: ReactNode, pageKey: string) => PageFrame[];
+/** The transition class a frame carries: leaving, entering, or none for the first page. */
+export declare const pageFrameClassName: (frame: PageFrame) => string;

package/dist/theme-mode.d.ts

@@ -0,0 +1,17 @@
+import type { Theme } from '@fluentui/react-components';
+export type ThemeMode = 'system' | 'light' | 'dark';
+export type ResolvedThemeMode = 'light' | 'dark';
+export declare const THEME_MODE_ATTRIBUTE = "data-fwt-theme";
+/** The scheme the stylesheets resolve to for a mode, given the system preference. */
+export declare const resolveThemeMode: (mode: ThemeMode, prefersDark: boolean) => ResolvedThemeMode;
+/** Stamps `mode` on `root` so the stylesheets follow it; `system` removes the override. */
+export declare const applyThemeMode: (mode: ThemeMode, root?: HTMLElement) => void;
+/**
+ * Applies `mode` to the document and returns the matching Fluent theme for
+ * `FluentProvider`. The token stylesheet and the Fluent theme must agree, so the
+ * provider's theme is derived from the same resolved scheme the CSS uses.
+ */
+export declare const useWinuiTheme: (mode?: ThemeMode) => {
+    theme: Theme;
+    resolved: ResolvedThemeMode;
+};