@hgdc/ui 0.24.0 → 0.25.0

package/dist/account-menu.d.ts

@@ -20,7 +20,7 @@ export type AccountUser = {
     image?: string | null;
 };
 /**
- * Le menu du compte, en bas de la barre latérale : profil, sécurité, thème, raccourcis, autres
+ * Le menu du compte, en bas de la barre latérale : profil, sécurité, choix du thème en trois icônes, raccourcis, autres
  * produits HGDC, déconnexion. `row` : avatar, nom et adresse (l'avatar seul en rail) ; `avatar` :
  * l'avatar seul, pour une barre du haut. Le produit passe les actions ; le thème passe par
  * `ThemeProvider`.

package/dist/account-menu.js

@@ -1,26 +1,22 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ComputerIcon from "@hugeicons/core-free-icons/ComputerIcon";
 import DashboardSquare01Icon from "@hugeicons/core-free-icons/DashboardSquare01Icon";
 import KeyboardIcon from "@hugeicons/core-free-icons/KeyboardIcon";
 import Logout01Icon from "@hugeicons/core-free-icons/Logout01Icon";
-import Moon02Icon from "@hugeicons/core-free-icons/Moon02Icon";
 import SecurityLockIcon from "@hugeicons/core-free-icons/SecurityLockIcon";
-import Sun03Icon from "@hugeicons/core-free-icons/Sun03Icon";
 import Tick02Icon from "@hugeicons/core-free-icons/Tick02Icon";
 import UserIcon from "@hugeicons/core-free-icons/UserIcon";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { Menu as MenuPrimitive } from "@base-ui/react/menu";
 import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./dropdown-menu.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, } from "./dropdown-menu.js";
 import { initials } from "./initials.js";
 import { MENU_LINK_ITEM } from "./org-switcher.js";
 import { ProductBadge } from "./product-badge.js";
 import { productMenuEntries } from "./products.js";
 import { useLeaveOnClick, useProductRailShown } from "./shell-placement.js";
-import { useTheme } from "./theme.js";
-const THEMES = ["light", "dark", "system"];
+import { ThemeSwitch } from "./theme-switch.js";
 /**
- * Le menu du compte, en bas de la barre latérale : profil, sécurité, thème, raccourcis, autres
+ * Le menu du compte, en bas de la barre latérale : profil, sécurité, choix du thème en trois icônes, raccourcis, autres
  * produits HGDC, déconnexion. `row` : avatar, nom et adresse (l'avatar seul en rail) ; `avatar` :
  * l'avatar seul, pour une barre du haut. Le produit passe les actions ; le thème passe par
  * `ThemeProvider`.
@@ -31,15 +27,10 @@ const THEMES = ["light", "dark", "system"];
  * liste ; `products={[]}` la retire.
  */
 export function AccountMenu({ user, onProfile, onSecurity, onShortcuts, onSignOut, products: productsProp, product: currentProduct, accountHref, children, variant = "row", }) {
-    const { theme, setTheme } = useTheme();
     const products = productsProp ?? productMenuEntries({ current: currentProduct, accountHref });
     const railShown = useProductRailShown();
     const leaveOnClick = useLeaveOnClick();
-    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: variant === "row" ? (_jsx("button", { type: "button", "aria-label": `Compte de ${user.name}`, className: "flex w-full min-w-0 items-center gap-2.5 rounded-xl p-1.5 text-left outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 aria-expanded:bg-muted lg:hover:bg-shell-hover lg:aria-expanded:bg-shell-hover lg:rail:justify-center" })) : (_jsx("button", { type: "button", "aria-label": `Compte de ${user.name}`, className: "touch-target grid size-9 place-items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring/50" })), children: [_jsxs(Avatar, { children: [user.image ? _jsx(AvatarImage, { src: user.image, alt: "" }) : null, _jsx(AvatarFallback, { className: "text-xs font-semibold uppercase", children: initials(user.name, user.email) })] }), variant === "row" ? (_jsxs("span", { className: "min-w-0 flex-1 lg:rail:hidden", children: [_jsx("span", { className: "block truncate text-sm font-medium", children: user.name }), _jsx("span", { className: "block truncate text-xs text-muted-foreground lg:text-shell-muted", children: user.email })] })) : null] }), _jsxs(DropdownMenuContent, { align: variant === "row" ? "start" : "end", side: variant === "row" ? "top" : "bottom", className: "w-64", children: [_jsx(DropdownMenuGroup, { children: _jsxs(DropdownMenuLabel, { children: [_jsx("span", { className: "block truncate text-foreground", children: user.name }), _jsx("span", { className: "block truncate", children: user.email })] }) }), _jsx(DropdownMenuSeparator, {}), onProfile ? (_jsxs(DropdownMenuItem, { onClick: onProfile, children: [_jsx(HugeiconsIcon, { icon: UserIcon, "aria-hidden": true }), "Profil"] })) : null, onSecurity ? (_jsxs(DropdownMenuItem, { onClick: onSecurity, children: [_jsx(HugeiconsIcon, { icon: SecurityLockIcon, "aria-hidden": true }), "S\u00E9curit\u00E9"] })) : null, children, _jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { children: [_jsx(HugeiconsIcon, { icon: theme === "dark" ? Moon02Icon : theme === "light" ? Sun03Icon : ComputerIcon, "aria-hidden": true }), "Th\u00E8me"] }), _jsx(DropdownMenuSubContent, { children: _jsxs(DropdownMenuRadioGroup, { value: theme, onValueChange: (value) => {
-                                        const next = THEMES.find((t) => t === value);
-                                        if (next)
-                                            setTheme(next);
-                                    }, children: [_jsx(DropdownMenuRadioItem, { value: "light", children: "Clair" }), _jsx(DropdownMenuRadioItem, { value: "dark", children: "Sombre" }), _jsx(DropdownMenuRadioItem, { value: "system", children: "Syst\u00E8me" })] }) })] }), onShortcuts ? (_jsxs(DropdownMenuItem, { onClick: onShortcuts, children: [_jsx(HugeiconsIcon, { icon: KeyboardIcon, "aria-hidden": true }), "Raccourcis clavier", _jsx(DropdownMenuShortcut, { children: "?" })] })) : null, products.length ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, { className: railShown ? "lg:hidden" : undefined }), _jsxs(DropdownMenuGroup, { className: railShown ? "lg:hidden" : undefined, children: [_jsx(DropdownMenuLabel, { children: "Produits" }), products.map((product) => product.current ? (_jsxs(DropdownMenuItem, { disabled: true, className: "data-disabled:opacity-100", children: [_jsx(ProductMenuIcon, { product: product }), _jsx("span", { className: "flex-1", children: product.name }), _jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Produit ouvert" })] }, product.name)) : (_jsxs(MenuPrimitive.LinkItem, { href: product.href, onClick: leaveOnClick, className: MENU_LINK_ITEM, children: [_jsx(ProductMenuIcon, { product: product }), _jsx("span", { className: "flex-1", children: product.name }), product.hint ? (_jsx("span", { className: "text-xs font-normal text-muted-foreground", children: product.hint })) : null] }, product.name)))] })] })) : null, _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: onSignOut, children: [_jsx(HugeiconsIcon, { icon: Logout01Icon, "aria-hidden": true }), "Se d\u00E9connecter"] })] })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: variant === "row" ? (_jsx("button", { type: "button", "aria-label": `Compte de ${user.name}`, className: "flex w-full min-w-0 items-center gap-2.5 rounded-xl p-1.5 text-left outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 aria-expanded:bg-muted lg:hover:bg-shell-hover lg:aria-expanded:bg-shell-hover lg:rail:justify-center" })) : (_jsx("button", { type: "button", "aria-label": `Compte de ${user.name}`, className: "touch-target grid size-9 place-items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring/50" })), children: [_jsxs(Avatar, { children: [user.image ? _jsx(AvatarImage, { src: user.image, alt: "" }) : null, _jsx(AvatarFallback, { className: "text-xs font-semibold uppercase", children: initials(user.name, user.email) })] }), variant === "row" ? (_jsxs("span", { className: "min-w-0 flex-1 lg:rail:hidden", children: [_jsx("span", { className: "block truncate text-sm font-medium", children: user.name }), _jsx("span", { className: "block truncate text-xs text-muted-foreground lg:text-shell-muted", children: user.email })] })) : null] }), _jsxs(DropdownMenuContent, { align: variant === "row" ? "start" : "end", side: variant === "row" ? "top" : "bottom", className: "w-64", children: [_jsx(DropdownMenuGroup, { children: _jsxs(DropdownMenuLabel, { children: [_jsx("span", { className: "block truncate text-foreground", children: user.name }), _jsx("span", { className: "block truncate", children: user.email })] }) }), _jsx(DropdownMenuSeparator, {}), onProfile ? (_jsxs(DropdownMenuItem, { onClick: onProfile, children: [_jsx(HugeiconsIcon, { icon: UserIcon, "aria-hidden": true }), "Profil"] })) : null, onSecurity ? (_jsxs(DropdownMenuItem, { onClick: onSecurity, children: [_jsx(HugeiconsIcon, { icon: SecurityLockIcon, "aria-hidden": true }), "S\u00E9curit\u00E9"] })) : null, children, _jsx(ThemeSwitch, {}), onShortcuts ? (_jsxs(DropdownMenuItem, { onClick: onShortcuts, children: [_jsx(HugeiconsIcon, { icon: KeyboardIcon, "aria-hidden": true }), "Raccourcis clavier", _jsx(DropdownMenuShortcut, { children: "?" })] })) : null, products.length ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, { className: railShown ? "lg:hidden" : undefined }), _jsxs(DropdownMenuGroup, { className: railShown ? "lg:hidden" : undefined, children: [_jsx(DropdownMenuLabel, { children: "Produits" }), products.map((product) => product.current ? (_jsxs(DropdownMenuItem, { disabled: true, className: "data-disabled:opacity-100", children: [_jsx(ProductMenuIcon, { product: product }), _jsx("span", { className: "flex-1", children: product.name }), _jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Produit ouvert" })] }, product.name)) : (_jsxs(MenuPrimitive.LinkItem, { href: product.href, onClick: leaveOnClick, className: MENU_LINK_ITEM, children: [_jsx(ProductMenuIcon, { product: product }), _jsx("span", { className: "flex-1", children: product.name }), product.hint ? (_jsx("span", { className: "text-xs font-normal text-muted-foreground", children: product.hint })) : null] }, product.name)))] })] })) : null, _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: onSignOut, children: [_jsx(HugeiconsIcon, { icon: Logout01Icon, "aria-hidden": true }), "Se d\u00E9connecter"] })] })] }));
 }
 function ProductMenuIcon({ product }) {
     if (product.badge)

package/dist/theme-switch.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Le choix du thème en trois icônes dans une pilule (Système, Clair, Sombre), à poser dans un
+ * menu : chaque choix est une entrée du menu, qui ne se ferme pas. Flèches gauche et droite
+ * passent d'un choix à l'autre et l'appliquent ; le thème vient de `ThemeProvider`.
+ */
+export declare function ThemeSwitch({ className }: {
+    className?: string;
+}): React.JSX.Element;

package/dist/theme-switch.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ComputerIcon from "@hugeicons/core-free-icons/ComputerIcon";
+import Moon02Icon from "@hugeicons/core-free-icons/Moon02Icon";
+import Sun03Icon from "@hugeicons/core-free-icons/Sun03Icon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { useRef } from "react";
+import { cn } from "./cn.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+import { useTheme } from "./theme.js";
+const CHOICES = [
+    { value: "system", label: "Système", icon: ComputerIcon },
+    { value: "light", label: "Clair", icon: Sun03Icon },
+    { value: "dark", label: "Sombre", icon: Moon02Icon },
+];
+/**
+ * Le choix du thème en trois icônes dans une pilule (Système, Clair, Sombre), à poser dans un
+ * menu : chaque choix est une entrée du menu, qui ne se ferme pas. Flèches gauche et droite
+ * passent d'un choix à l'autre et l'appliquent ; le thème vient de `ThemeProvider`.
+ */
+export function ThemeSwitch({ className }) {
+    const { theme, setTheme } = useTheme();
+    const group = useRef(null);
+    function onKeyDown(event) {
+        const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+        if (step === 0)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const index = CHOICES.findIndex((choice) => choice.value === theme);
+        const next = CHOICES[(index + step + CHOICES.length) % CHOICES.length];
+        if (!next)
+            return;
+        setTheme(next.value);
+        group.current?.querySelector(`[data-theme-choice="${next.value}"]`)?.focus();
+    }
+    const current = CHOICES.find((choice) => choice.value === theme);
+    return (_jsxs("div", { className: cn("flex items-center gap-2.5 px-3 py-[3px] text-sm font-medium max-lg:min-h-11 coarse:min-h-11", className), children: [_jsx(HugeiconsIcon, { icon: current?.icon ?? ComputerIcon, "aria-hidden": true, className: "size-4 shrink-0" }), _jsx("span", { className: "flex-1", children: "Th\u00E8me" }), _jsx("div", { ref: group, role: "radiogroup", "aria-label": "Th\u00E8me", tabIndex: -1, onKeyDown: onKeyDown, className: "flex w-fit items-center gap-0.5 rounded-full border border-border p-0.5", children: CHOICES.map(({ value, label, icon }) => {
+                    const active = theme === value;
+                    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(MenuPrimitive.Item, { closeOnClick: false, role: "radio", "aria-checked": active, "aria-label": label, "data-theme-choice": value, onClick: () => setTheme(value), className: cn("touch-target grid size-6 cursor-default place-items-center rounded-full outline-none", "transition-colors duration-(--duration-fast) ease-out focus-visible:ring-2 focus-visible:ring-ring/50", active ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground") }), children: _jsx(HugeiconsIcon, { icon: icon, "aria-hidden": true, className: "size-3.5" }) }), _jsx(TooltipContent, { children: label })] }, value));
+                }) })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hgdc/ui",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "description": "Interface de la H Collection : jetons de la DA, thèmes, polices et composants.",
   "license": "UNLICENSED",
   "homepage": "https://github.com/hugogebel-boop/hgdc-kit/tree/main/packages/ui#readme",