@gouno/ui 0.3.2

package/dist/fonts/inter-LICENSE

@@ -0,0 +1,93 @@
+Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter) Inter-Italic[opsz,wght].ttf: Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/dist/fonts/jetbrains-mono-LICENSE

@@ -0,0 +1,93 @@
+Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono) JetBrainsMono-Italic[wght].ttf: Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

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

@@ -0,0 +1,22 @@
+import { type ReactNode } from "react";
+export interface AppShellProps {
+    brand: ReactNode;
+    navigation: (close: () => void) => ReactNode;
+    toolbar?: ReactNode;
+    breadcrumbs?: ReactNode;
+    account?: ReactNode;
+    footer?: ReactNode;
+    children: ReactNode;
+    navigationLabel?: string;
+}
+/**
+ * Application-level chrome for Gouno product surfaces. Routing, permissions,
+ * authentication and product state remain owned by the consuming application.
+ */
+export declare function AppShell({ brand, navigation, toolbar, breadcrumbs, account, footer, children, navigationLabel, }: AppShellProps): import("react").JSX.Element;
+export interface NavigationGroupProps {
+    label?: string;
+    children: ReactNode;
+}
+export declare function NavigationGroup({ label, children }: NavigationGroupProps): import("react").JSX.Element;
+export declare const navigationItemClass = "flex min-h-10 min-w-0 items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0 aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground";

package/dist/gouno/app-shell.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+import { Menu } from "lucide-react";
+import { IconButton } from "../core/icon-button.js";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, } from "../components/primitives/sheet.js";
+/**
+ * Application-level chrome for Gouno product surfaces. Routing, permissions,
+ * authentication and product state remain owned by the consuming application.
+ */
+export function AppShell({ brand, navigation, toolbar, breadcrumbs, account, footer, children, navigationLabel = "应用导航", }) {
+    const [open, setOpen] = useState(false);
+    const navigationTrigger = useRef(null);
+    const instanceId = useId().replaceAll(":", "");
+    const mainId = `app-shell-main-${instanceId}`;
+    return (_jsxs("div", { "data-slot": "app-shell", className: "min-h-dvh bg-canvas text-foreground", children: [_jsx("a", { href: `#${mainId}`, className: "sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-50 focus:rounded-md focus:bg-popover focus:p-3", children: "\u8DF3\u81F3\u4E3B\u8981\u5185\u5BB9" }), _jsxs("header", { className: "sticky top-0 z-30 flex h-16 items-center gap-4 border-b bg-background px-4 lg:px-6", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3 lg:w-[264px]", children: [_jsx(IconButton, { ref: navigationTrigger, className: "lg:hidden", label: navigationLabel, icon: _jsx(Menu, {}), onClick: () => setOpen(true) }), _jsx("div", { className: "min-w-0 truncate text-base font-semibold tracking-tight text-primary", children: brand })] }), _jsx("div", { className: "hidden min-w-0 flex-1 text-sm text-muted-foreground md:block", children: breadcrumbs }), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [toolbar, account] })] }), _jsxs("div", { className: "grid min-h-[calc(100dvh-64px)] lg:grid-cols-[288px_minmax(0,1fr)]", children: [_jsxs("aside", { className: "sticky top-16 hidden h-[calc(100dvh-64px)] flex-col border-r bg-sidebar px-3 py-5 lg:flex", children: [_jsx("nav", { "aria-label": navigationLabel, className: "min-h-0 flex-1 overflow-y-auto", children: navigation(() => { }) }), footer ? _jsx("div", { className: "mt-4 border-t pt-4", children: footer }) : null] }), _jsx("main", { id: mainId, tabIndex: -1, className: "min-w-0 px-4 py-6 outline-none md:px-6 xl:px-8", children: children })] }), _jsx(Sheet, { open: open, onOpenChange: setOpen, children: _jsxs(SheetContent, { side: "left", className: "flex w-[320px] max-w-[calc(100vw-1rem)] flex-col bg-sidebar", "aria-describedby": undefined, onCloseAutoFocus: (event) => {
+                        event.preventDefault();
+                        navigationTrigger.current?.focus();
+                    }, children: [_jsx(SheetHeader, { children: _jsx(SheetTitle, { children: brand }) }), _jsx("nav", { "aria-label": navigationLabel, className: "flex-1 overflow-auto px-3", children: navigation(() => setOpen(false)) }), footer ? _jsx("div", { className: "p-4", children: footer }) : null] }) })] }));
+}
+const navigationGroupClass = "mb-6 flex flex-col gap-1";
+export function NavigationGroup({ label, children }) {
+    if (!label) {
+        return (_jsx("div", { "data-slot": "navigation-group", className: navigationGroupClass, children: children }));
+    }
+    return (_jsxs("section", { "data-slot": "navigation-group", className: navigationGroupClass, children: [_jsx("h2", { className: "px-3 pb-2 text-xs font-medium text-muted-foreground", children: label }), children] }));
+}
+export const navigationItemClass = "flex min-h-10 min-w-0 items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0 aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground";

package/dist/gouno/index.d.ts

@@ -0,0 +1,4 @@
+/** Canonical Gouno product-family application structure. */
+export { AppShell, NavigationGroup, navigationItemClass, type AppShellProps, type NavigationGroupProps, } from "./app-shell.js";
+export { PageContainer, type PageContainerProps } from "./page-container.js";
+export { PageHeader, type PageHeaderProps } from "./page-header.js";

package/dist/gouno/index.js

@@ -0,0 +1,4 @@
+/** Canonical Gouno product-family application structure. */
+export { AppShell, NavigationGroup, navigationItemClass, } from "./app-shell.js";
+export { PageContainer } from "./page-container.js";
+export { PageHeader } from "./page-header.js";

package/dist/gouno/page-container.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from "react";
+export type PageContainerProps = HTMLAttributes<HTMLDivElement>;
+/** Standard content-width and vertical-rhythm container for Gouno product pages. */
+export declare function PageContainer({ className, ...props }: PageContainerProps): import("react").JSX.Element;

package/dist/gouno/page-container.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+/** Standard content-width and vertical-rhythm container for Gouno product pages. */
+export function PageContainer({ className, ...props }) {
+    return (_jsx("div", { ...props, "data-slot": "page-container", className: cn("mx-auto flex w-full min-w-0 max-w-[1440px] flex-col gap-6", className) }));
+}

package/dist/gouno/page-header.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+export interface PageHeaderProps {
+    title: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+}
+export declare function PageHeader({ title, description, actions, className, }: PageHeaderProps): import("react").JSX.Element;

package/dist/gouno/page-header.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Heading, Text } from "../core/typography.js";
+import { cn } from "../lib/utils.js";
+export function PageHeader({ title, description, actions, className, }) {
+    return (_jsxs("header", { "data-slot": "page-header", className: cn("flex flex-col gap-4 md:flex-row md:items-start md:justify-between", className), children: [_jsxs("div", { className: "min-w-0", children: [_jsx(Heading, { level: 1, className: "text-2xl leading-tight tracking-tight", children: title }), description ? (_jsx(Text, { tone: "muted", size: "sm", className: "mt-2 max-w-3xl leading-relaxed", children: description })) : null] }), actions ? (_jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions })) : null] }));
+}

package/dist/hooks/use-overlay-body.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from "react";
+/** A detached portal retains form state without keeping a closed focus scope mounted. */
+export declare function useOverlayBody(children: ReactNode, open: boolean, destroyOnClose: boolean): {
+    body: import("react").JSX.Element;
+    portal: import("react").ReactPortal | null;
+};

package/dist/hooks/use-overlay-body.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+/** A detached portal retains form state without keeping a closed focus scope mounted. */
+export function useOverlayBody(children, open, destroyOnClose) {
+    const [host] = useState(() => typeof document === "undefined" ? null : document.createElement("div"));
+    const [visited, setVisited] = useState(open);
+    useEffect(() => { if (open)
+        setVisited(true); }, [open]);
+    const attach = useCallback((node) => {
+        if (node && host)
+            node.appendChild(host);
+    }, [host]);
+    return {
+        body: _jsx("div", { ref: attach }),
+        portal: host && (open || (visited && !destroyOnClose)) ? createPortal(children, host) : null,
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./core/index.js";
+export * from "./patterns/index.js";
+export * from "./gouno/index.js";
+export * from "./theme/index.js";
+export { cn } from "./lib/utils.js";

package/dist/index.js

@@ -0,0 +1,5 @@
+export * from "./core/index.js";
+export * from "./patterns/index.js";
+export * from "./gouno/index.js";
+export * from "./theme/index.js";
+export { cn } from "./lib/utils.js";

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/patterns/bulk-action-bar.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface BulkActionBarProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role"> {
+    selectionLabel: ReactNode;
+    onCancel: () => void;
+    cancelLabel?: ReactNode;
+    children?: ReactNode;
+}
+export declare function BulkActionBar({ selectionLabel, onCancel, cancelLabel, children, className, "aria-label": ariaLabel, ...props }: BulkActionBarProps): import("react").JSX.Element;

package/dist/patterns/bulk-action-bar.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../core/button.js";
+import { Text } from "../core/typography.js";
+import { cn } from "../lib/utils.js";
+export function BulkActionBar({ selectionLabel, onCancel, cancelLabel = "取消", children, className, "aria-label": ariaLabel = "批量操作", ...props }) {
+    return (_jsxs("div", { ...props, role: "toolbar", "aria-label": ariaLabel, "data-slot": "bulk-action-bar", className: cn("sticky bottom-4 z-20 flex flex-col gap-3 rounded-lg border border-primary/30 bg-card p-4 sm:flex-row sm:items-center", className), children: [_jsx(Text, { size: "sm", className: "font-medium sm:mr-auto", children: selectionLabel }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", "data-slot": "bulk-action-bar-actions", children: [children, _jsx(Button, { size: "small", variant: "text", onClick: onCancel, children: cancelLabel })] })] }));
+}

package/dist/patterns/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Canonical reusable compound interaction patterns admitted through
+ * docs/product-driven-development.md evidence review.
+ */
+export { BulkActionBar, type BulkActionBarProps } from "./bulk-action-bar.js";

package/dist/patterns/index.js

@@ -0,0 +1,5 @@
+/**
+ * Canonical reusable compound interaction patterns admitted through
+ * docs/product-driven-development.md evidence review.
+ */
+export { BulkActionBar } from "./bulk-action-bar.js";

package/dist/theme/index.d.ts

@@ -0,0 +1,2 @@
+export { ThemeProvider, useTheme, resolveMode, readMode, brandNames, type ThemeProviderProps, type ThemeMode, type Brand, type Density, } from "./provider.js";
+export { ThemeToggle, type ThemeToggleProps } from "./theme-toggle.js";

package/dist/theme/index.js

@@ -0,0 +1,2 @@
+export { ThemeProvider, useTheme, resolveMode, readMode, brandNames, } from "./provider.js";
+export { ThemeToggle } from "./theme-toggle.js";

package/dist/theme/provider.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from "react";
+export type ThemeMode = "light" | "dark" | "system";
+export type Brand = "blog" | "blog-admin" | "gosso-admin";
+export type Density = "comfortable" | "compact";
+export declare const brandNames: Record<Brand, string>;
+export declare function resolveMode(mode: ThemeMode, systemDark: boolean): "light" | "dark";
+export declare function readMode(key: string): ThemeMode;
+interface ThemeContextValue {
+    mode: ThemeMode;
+    resolvedMode: "light" | "dark";
+    brand: Brand;
+    setMode: (mode: ThemeMode) => void;
+}
+export declare const useTheme: () => ThemeContextValue;
+export interface ThemeProviderProps {
+    children: ReactNode;
+    brand: Brand;
+    storageKey: string;
+    density?: Density;
+}
+export declare function ThemeProvider({ children, brand, storageKey, density, }: ThemeProviderProps): import("react").JSX.Element;
+export {};

package/dist/theme/provider.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useState, } from "react";
+export const brandNames = {
+    blog: "Blog",
+    "blog-admin": "Blog Admin",
+    "gosso-admin": "Gosso Admin",
+};
+export function resolveMode(mode, systemDark) {
+    return mode === "system" ? (systemDark ? "dark" : "light") : mode;
+}
+export function readMode(key) {
+    try {
+        const value = localStorage.getItem(key);
+        return value === "light" || value === "dark" ? value : "system";
+    }
+    catch {
+        return "system";
+    }
+}
+const ThemeContext = createContext({
+    mode: "system",
+    resolvedMode: "light",
+    brand: "blog",
+    setMode: () => { },
+});
+export const useTheme = () => useContext(ThemeContext);
+export function ThemeProvider({ children, brand, storageKey, density = "comfortable", }) {
+    const [mode, updateMode] = useState(() => readMode(storageKey));
+    const [systemDark, setSystemDark] = useState(() => typeof matchMedia === "function" &&
+        matchMedia("(prefers-color-scheme: dark)").matches);
+    const resolvedMode = resolveMode(mode, systemDark);
+    useEffect(() => {
+        if (typeof window.matchMedia !== "function")
+            return;
+        const query = window.matchMedia("(prefers-color-scheme: dark)");
+        const update = () => setSystemDark(query.matches);
+        const storage = (event) => {
+            if (event.key === storageKey || event.key === null)
+                updateMode(readMode(storageKey));
+        };
+        update();
+        query.addEventListener("change", update);
+        window.addEventListener("storage", storage);
+        return () => {
+            query.removeEventListener("change", update);
+            window.removeEventListener("storage", storage);
+        };
+    }, [storageKey]);
+    useLayoutEffect(() => {
+        const root = document.documentElement;
+        root.dataset.theme = resolvedMode;
+        root.dataset.density = density;
+        root.style.colorScheme = resolvedMode;
+        document
+            .querySelector('meta[name="theme-color"]')
+            ?.setAttribute("content", resolvedMode === "dark" ? "#11151b" : "#ffffff");
+    }, [resolvedMode, density]);
+    useLayoutEffect(() => {
+        document.documentElement.dataset.brand = brand;
+    }, [brand]);
+    const value = useMemo(() => ({
+        mode,
+        resolvedMode,
+        brand,
+        setMode: (next) => {
+            updateMode(next);
+            try {
+                localStorage.setItem(storageKey, next);
+            }
+            catch {
+                /* In-memory preference still works. */
+            }
+        },
+    }), [mode, resolvedMode, brand, storageKey]);
+    return (_jsx(ThemeContext.Provider, { value: value, children: children }));
+}

package/dist/theme/theme-toggle.d.ts

@@ -0,0 +1,6 @@
+import { type ThemeMode } from "./provider.js";
+export interface ThemeToggleProps {
+    label?: string;
+    labels?: Record<ThemeMode, string>;
+}
+export declare function ThemeToggle({ label, labels, }: ThemeToggleProps): import("react").JSX.Element;

package/dist/theme/theme-toggle.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Monitor, Moon, Sun } from "lucide-react";
+import { IconButton } from "../core/icon-button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from "../components/primitives/dropdown-menu.js";
+import { useTheme } from "./provider.js";
+export function ThemeToggle({ label = "主题", labels = { light: "浅色", dark: "深色", system: "跟随系统" }, }) {
+    const { mode, resolvedMode, setMode } = useTheme();
+    const Icon = mode === "system" ? Monitor : resolvedMode === "dark" ? Moon : Sun;
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(IconButton, { label: label, icon: _jsx(Icon, {}), "aria-pressed": resolvedMode === "dark" }) }), _jsx(DropdownMenuContent, { align: "end", children: _jsx(DropdownMenuGroup, { children: _jsx(DropdownMenuRadioGroup, { value: mode, onValueChange: (next) => setMode(next), children: ["light", "dark", "system"].map((value) => (_jsx(DropdownMenuRadioItem, { value: value, children: labels[value] }, value))) }) }) })] }));
+}