@stigmer/react 0.0.99 → 0.0.100

package/user/UserMenu.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronsUpDown, LogOut, Settings, SunMoon, User, } from "lucide-react";
+import { cn } from "@stigmer/theme";
+import { Menu, MenuContent, MenuGroup, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuTrigger, } from "../internal/menu";
+/**
+ * User menu dropdown for sidebar navigation.
+ *
+ * Displays the current user (avatar + name/email) or a "Local mode"
+ * indicator when unauthenticated, with optional color scheme switching,
+ * settings navigation, app-specific extra items, and sign out.
+ *
+ * Designed for sidebar placement — the trigger uses `sidebar-*` design
+ * tokens. The portaled dropdown uses standard `popover-*` / main-area
+ * tokens per theme-token-guidelines (DD-005).
+ *
+ * Framework-agnostic: all actions are expressed as callback props
+ * (DD-004). The consumer bridges to their routing, auth, and theme
+ * systems.
+ *
+ * @example
+ * ```tsx
+ * <UserMenu
+ *   user={{ name: "Jane", email: "jane@acme.com" }}
+ *   colorMode="dark"
+ *   onColorModeChange={(mode) => setTheme(mode)}
+ *   onSettingsClick={() => router.push("/settings")}
+ *   onSignOut={() => logout()}
+ * />
+ * ```
+ */
+export function UserMenu({ user, colorMode, onColorModeChange, onSettingsClick, onSignOut, extraItems, className, }) {
+    const showColorScheme = colorMode != null && onColorModeChange != null;
+    const showSettings = onSettingsClick != null;
+    const showSignOut = onSignOut != null;
+    const hasContentBeforeSignOut = showSettings || showColorScheme || extraItems;
+    const displayName = user?.name ?? user?.email;
+    const triggerLabel = user ? "User menu" : "Settings";
+    return (_jsxs(Menu, { children: [_jsxs(MenuTrigger, { "aria-label": triggerLabel, className: cn("hover:bg-sidebar-accent flex w-full cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 transition-colors focus:outline-none", className), children: [_jsx(UserAvatar, { name: displayName }), user ? (_jsxs("div", { className: "flex min-w-0 flex-1 flex-col text-left", children: [user.name && (_jsx("span", { className: "truncate text-sm font-medium", children: user.name })), _jsx("span", { className: "text-sidebar-muted-foreground truncate text-xs", children: user.email })] })) : (_jsx("span", { className: "text-sidebar-muted-foreground truncate text-sm", children: "Local mode" })), _jsx(ChevronsUpDown, { className: "text-sidebar-muted-foreground ml-auto size-3.5 shrink-0" })] }), _jsxs(MenuContent, { align: "start", side: "top", sideOffset: 8, children: [showSettings && (_jsxs(MenuItem, { onClick: onSettingsClick, children: [_jsx(Settings, { className: "size-4" }), "Settings"] })), showSettings && showColorScheme && _jsx(MenuSeparator, {}), showColorScheme && (_jsx(ColorSchemeSection, { colorMode: colorMode, onColorModeChange: onColorModeChange })), extraItems && (_jsxs(_Fragment, { children: [(showSettings || showColorScheme) && _jsx(MenuSeparator, {}), extraItems] })), showSignOut && (_jsxs(_Fragment, { children: [hasContentBeforeSignOut && _jsx(MenuSeparator, {}), _jsxs(MenuItem, { onClick: onSignOut, children: [_jsx(LogOut, { className: "size-4" }), "Sign out"] })] }))] })] }));
+}
+// ---------------------------------------------------------------------------
+// Internal sub-components
+// ---------------------------------------------------------------------------
+function ColorSchemeSection({ colorMode, onColorModeChange, }) {
+    return (_jsxs(MenuGroup, { "aria-label": "Color scheme", children: [_jsxs(MenuLabel, { children: [_jsx(SunMoon, { className: "mr-1 inline size-3 align-[-2px]" }), "Color Scheme"] }), _jsxs(MenuRadioGroup, { value: colorMode, onValueChange: (val) => onColorModeChange(val), children: [_jsx(MenuRadioItem, { value: "light", children: "Light" }), _jsx(MenuRadioItem, { value: "dark", children: "Dark" }), _jsx(MenuRadioItem, { value: "system", children: "System" })] })] }));
+}
+function UserAvatar({ name }) {
+    const initial = name ? name.charAt(0).toUpperCase() : null;
+    return (_jsx("div", { className: cn("bg-sidebar-accent text-sidebar-accent-foreground border-sidebar-border", "flex size-6 shrink-0 items-center justify-center rounded-full border"), children: initial ? (_jsx("span", { className: "text-xs font-medium", children: initial })) : (_jsx(User, { className: "size-3.5" })) }));
+}
+//# sourceMappingURL=UserMenu.js.map

package/user/UserMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserMenu.js","sourceRoot":"","sources":["../../src/user/UserMenu.tsx"],"names":[],"mappings":"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"}

package/user/index.d.ts

@@ -0,0 +1,3 @@
+export { UserMenu } from "./UserMenu";
+export type { UserMenuProps } from "./UserMenu";
+//# sourceMappingURL=index.d.ts.map

package/user/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/user/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/user/index.js

@@ -0,0 +1,2 @@
+export { UserMenu } from "./UserMenu";
+//# sourceMappingURL=index.js.map

package/user/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/user/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}