@alneas/appkit-react 0.1.0 → 0.2.0

package/dist/tools/components/header/header.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"header.cjs","names":["Sheet","SheetTrigger","cn","buttonVariants","Menu","SheetContent","SheetHeader","SheetTitle","React","Button","_Fragment","ThemeSwitcherGroup","LanguageSwitcher","SpacingThemeSwitcher","ColorThemeSwitcher","ThemeModeSwitcher","DropdownMenu","DropdownMenuTrigger","Avatar","AvatarImage","AvatarFallback","DropdownMenuContent","DropdownMenuGroup","DropdownMenuLabel","DropdownMenuSeparator","DropdownMenuItem","SidebarTrigger","require_runtime","require_ui_lib_utils","require_ui_components_ui_button_variants","require_ui_components_ui_button_components","require_ui_components_ui_avatar","require_ui_components_ui_dropdown_menu","require_ui_components_ui_sheet","require_ui_components_theme_theme_switcher","require_tools_components_i18n_LanguageSwitcher","require_tools_components_sidebar_sidebar","react_jsx_runtime","react","lucide_react","MobileMenu","isMenuLeft","menuItems","item","index","showThemeToggle","showColorToggle","showSpaceToggle","showLanguageToggle","Header","props","menuPosition","className","logo","title","navItems","user","userMenuItems","onLogout","actions"],"sources":["../../../../src/tools/components/header/header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Menu } from 'lucide-react';\nimport { Button, buttonVariants } from '../ui/button';\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '../ui';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../ui/dropdown-menu';\nimport { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';\nimport {\n  ThemeSwitcherGroup,\n  ThemeModeSwitcher,\n  ColorThemeSwitcher,\n  SpacingThemeSwitcher,\n} from \"../theme\";\nimport { LanguageSwitcher } from \"../i18n/LanguageSwitcher\";\nimport { cn } from \"../../lib/utils\";\nimport { SidebarTrigger } from \"../sidebar/sidebar\";\nimport type { Locale } from '../../paraglide/runtime.js';\n\n/**\n * ヘッダーのプロップス\n */\nexport interface HeaderProps extends React.HTMLAttributes<HTMLElement> {\n  /** ロゴ要素 */\n  logo?: React.ReactNode;\n  /** タイトル */\n  title?: string;\n  /** メニュー位置 */\n  menuPosition?: 'left' | 'right';\n  /** メニューアイテム */\n  menuItems?: { label: string; onClick?: () => void; href?: string; icon?: React.ReactNode }[];\n  /** ナビゲーションアイテム */\n  navItems?: { label: string; onClick?: () => void; href?: string; active?: boolean }[];\n  /** ユーザー情報 */\n  user?: {\n    name: string;\n    email?: string;\n    image?: string;\n    initials?: string;\n  };\n  /** ユーザーメニューアイテム */\n  userMenuItems?: { label: string; onClick?: () => void; href?: string; icon?: React.ReactNode }[];\n  /** ログアウトコールバック */\n  onLogout?: () => void;\n  /** ダーク/ライトモード切替ボタン表示 */\n  showThemeToggle?: boolean;\n  /** カラーテーマ切替ボタン表示 */\n  showColorToggle?: boolean;\n  /** スペーシング切替ボタン表示 */\n  showSpaceToggle?: boolean;\n  /** 言語切替ボタン表示 */\n  showLanguageToggle?: boolean;\n  /** 言語変更時のコールバック */\n  onLanguageChange?: (lang: Locale) => void;\n  /** 現在の言語 */\n  currentLanguage?: Locale;\n  /** 追加アクション */\n  actions?: React.ReactNode;\n}\n\ntype MenuItem = NonNullable<HeaderProps['menuItems']>[number];\n\nconst MobileMenu: React.FC<{\n  menuItems: MenuItem[];\n  isMenuLeft: boolean;\n  showThemeToggle: boolean;\n  showColorToggle: boolean;\n  showSpaceToggle: boolean;\n  showLanguageToggle: boolean;\n}> = ({\n  menuItems,\n  isMenuLeft,\n  showThemeToggle,\n  showColorToggle,\n  showSpaceToggle,\n  showLanguageToggle,\n}) => (\n  <Sheet>\n    <SheetTrigger className={cn(buttonVariants({ variant: 'ghost', size: 'icon' }), 'shrink-0')}>\n      <Menu className='h-5 w-5' />\n      <span className='sr-only'>Toggle menu</span>\n    </SheetTrigger>\n    <SheetContent side={isMenuLeft ? 'left' : 'right'}>\n      <SheetHeader>\n        <SheetTitle>Menu</SheetTitle>\n      </SheetHeader>\n      <div className='grid gap-4 py-4'>\n        {menuItems.map((item, index) => (\n          <React.Fragment key={index}>\n            {item.href ? (\n              <a\n                href={item.href}\n                className={cn(buttonVariants({ variant: 'ghost' }), 'justify-start')}\n                onClick={item.onClick}\n              >\n                {item.icon && <span className='mr-2'>{item.icon}</span>}\n                {item.label}\n              </a>\n            ) : (\n              <Button variant='ghost' className='justify-start' onClick={item.onClick}>\n                {item.icon && <span className='mr-2'>{item.icon}</span>}\n                {item.label}\n              </Button>\n            )}\n          </React.Fragment>\n        ))}\n        {(showThemeToggle || showColorToggle || showSpaceToggle) && (\n          <>\n            <div className='h-px bg-border my-2' />\n            <div className='px-2'>\n              <ThemeSwitcherGroup\n                showThemeMode={showThemeToggle}\n                showColorTheme={showColorToggle}\n                showSpacingTheme={showSpaceToggle}\n                modeVariant='icon-group'\n                colorVariant='icon-group'\n                spacingVariant='icon-group'\n              />\n            </div>\n          </>\n        )}\n        {showLanguageToggle && (\n          <div className='px-2'>\n            <LanguageSwitcher />\n          </div>\n        )}\n      </div>\n    </SheetContent>\n  </Sheet>\n);\n\n/**\n * ヘッダーコンポーネント\n *\n * ロゴ、ナビゲーション、テーマ切り替え、ユーザーメニューを含む\n * レスポンシブなヘッダーコンポーネント。\n *\n * @example\n * ```tsx\n * import { Header } from '@alneas/appkit-react/tools/header';\n *\n * <Header\n *   logo={<img src=\"/logo.svg\" alt=\"Logo\" />}\n *   title=\"My App\"\n *   navItems={[\n *     { label: 'ホーム', href: '/', active: true },\n *     { label: '設定', href: '/settings' },\n *   ]}\n *   user={{ name: '山田太郎', email: 'yamada@example.com' }}\n *   onLogout={() => handleLogout()}\n * />\n * ```\n */\nexport function Header({\n  className,\n  logo,\n  title,\n  menuPosition = 'right',\n  menuItems = [],\n  navItems = [],\n  user,\n  userMenuItems = [],\n  onLogout,\n  showThemeToggle = true,\n  showColorToggle = true,\n  showSpaceToggle = true,\n  showLanguageToggle = true,\n  onLanguageChange,\n  currentLanguage,\n  actions,\n  ...props\n}: HeaderProps) {\n  // If logo is on the left (default/implied), menu icon should be on the right by default?\n  // Requirement 4: \"menu icon in left or right end(choosable. in right if logo is in left)\"\n  // If logo is provided, it usually sits on the left. So menuPosition default 'right' makes sense.\n  // If menuPosition is 'left', we should probably ensure logo isn't conflicting or logo is hidden?\n  // Let's assume user handles logic or we prioritize menuPosition.\n  // However, \"in right if logo is in left\" implies conditional default.\n  // We already defaulted menuPosition to 'right' in props.\n\n  // Determine effective menu position.\n  // If logo is present and menuPosition is undefined, it defaults to right.\n\n  const isMenuLeft = menuPosition === 'left';\n\n  return (\n    <header\n      className={cn(\n        'sticky top-0 z-40 w-full border-b bg-primary text-primary-foreground shadow-sm',\n        className,\n      )}\n      {...props}\n    >\n      <div className='flex h-16 items-center justify-between px-4 gap-4 overflow-hidden'>\n        <div className='flex items-center gap-4 min-w-0 flex-shrink-0 relative z-10 bg-primary pr-4'>\n          {/* Left Section */}\n          {isMenuLeft && menuItems.length > 0 && (\n            <div className='flex-shrink-0'>\n              <MobileMenu\n                menuItems={menuItems}\n                isMenuLeft={isMenuLeft}\n                showThemeToggle={showThemeToggle}\n                showColorToggle={showColorToggle}\n                showSpaceToggle={showSpaceToggle}\n                showLanguageToggle={showLanguageToggle}\n              />\n            </div>\n          )}\n\n          {logo && (\n            <div className='flex items-center gap-2 min-w-0'>\n              {logo}\n              {title && (\n                <span className='text-lg font-bold hidden md:inline-block truncate'>{title}</span>\n              )}\n            </div>\n          )}\n          {/* Title without logo if applicable */}\n          {!logo && title && (\n            <div className='flex items-center gap-2 min-w-0'>\n              <span className='text-lg font-bold truncate'>{title}</span>\n            </div>\n          )}\n\n          {/* Center/Nav Section - hidden on mobile */}\n          <nav className='flex items-center gap-6 text-sm font-medium hidden md:flex'>\n            {navItems.map((item, index) => (\n              <a\n                key={index}\n                href={item.href}\n                onClick={item.onClick}\n                className={cn(\n                  'transition-colors hover:text-primary-foreground/80',\n                  item.active\n                    ? 'text-primary-foreground font-bold underline underline-offset-4'\n                    : 'text-primary-foreground/60',\n                )}\n              >\n                {item.label}\n              </a>\n            ))}\n          </nav>\n        </div>\n\n        {/* Right Section - flex-row-reverse ensures essential items stay at right edge */}\n        <div className='ml-auto flex items-center justify-end gap-2 min-w-0 flex-shrink'>\n          {/* Switchers - shrink before title */}\n          <div className='flex items-center gap-2 min-w-0 flex-shrink overflow-hidden justify-end'>\n            {showSpaceToggle && <SpacingThemeSwitcher variant='toggle' withBackground />}\n            {showColorToggle && <ColorThemeSwitcher variant='toggle' withBackground />}\n            {showThemeToggle && <ThemeModeSwitcher variant='toggle' withBackground />}\n            {showLanguageToggle && (\n              <LanguageSwitcher\n                onLanguageChange={onLanguageChange}\n                currentLanguage={currentLanguage}\n              />\n            )}\n          </div>\n\n          {/* Essential actions - always visible */}\n          <div className='flex items-center gap-2 flex-none relative z-20 bg-primary pl-2'>\n            {/* User Profile */}\n            {user && (\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  aria-label='ユーザーメニュー'\n                  className={cn(\n                    buttonVariants({ variant: 'ghost' }),\n                    'relative h-8 w-8 rounded-full p-0 flex items-center justify-center',\n                  )}\n                >\n                  <Avatar className='h-8 w-8'>\n                    <AvatarImage src={user.image} alt={user.name} />\n                    <AvatarFallback>\n                      {user.initials || user.name.slice(0, 2).toUpperCase()}\n                    </AvatarFallback>\n                  </Avatar>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent className='w-56' align='end'>\n                  <DropdownMenuGroup>\n                  <DropdownMenuLabel className='font-normal'>\n                    <div className='flex flex-col space-y-1'>\n                      <p className='text-sm font-medium leading-none'>{user.name}</p>\n                      <p className='text-xs leading-none text-muted-foreground'>{user.email}</p>\n                    </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  {userMenuItems.map((item, index) => (\n                    <DropdownMenuItem key={index} onClick={item.onClick}>\n                      {item.href ? (\n                        <a href={item.href} className='w-full h-full flex items-center'>\n                          {item.label}\n                        </a>\n                      ) : (\n                        item.label\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                  {onLogout && (\n                    <>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem onClick={onLogout}>Log out</DropdownMenuItem>\n                    </>\n                  )}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            )}\n\n            {actions}\n\n            {/* Mobile Menu Trigger (Right side) */}\n            {!isMenuLeft && menuItems.length > 0 && (\n              <MobileMenu\n                menuItems={menuItems}\n                isMenuLeft={isMenuLeft}\n                showThemeToggle={showThemeToggle}\n                showColorToggle={showColorToggle}\n                showSpaceToggle={showSpaceToggle}\n                showLanguageToggle={showLanguageToggle}\n              />\n            )}\n\n            {/* Mobile Sidebar Trigger (rightmost when no menu icon) */}\n            <SidebarTrigger className='md:hidden' />\n          </div>\n        </div>\n      </div>\n    </header>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"header.cjs","names":["Sheet","SheetTrigger","cn","buttonVariants","Menu","SheetContent","SheetHeader","SheetTitle","React","Button","_Fragment","ThemeSwitcherGroup","LanguageSwitcher","SpacingThemeSwitcher","ColorThemeSwitcher","ThemeModeSwitcher","DropdownMenu","DropdownMenuTrigger","Avatar","AvatarImage","AvatarFallback","DropdownMenuContent","DropdownMenuGroup","DropdownMenuLabel","DropdownMenuSeparator","DropdownMenuItem","SidebarTrigger","require_runtime","require_ui_lib_utils","require_ui_components_ui_button_variants","require_ui_components_ui_button_components","require_ui_components_ui_avatar","require_ui_components_ui_dropdown_menu","require_ui_components_ui_sheet","require_ui_components_theme_theme_switcher","require_tools_components_i18n_LanguageSwitcher","require_tools_components_sidebar_sidebar","react_jsx_runtime","react","lucide_react","MobileMenu","isMenuLeft","menuItems","item","index","showThemeToggle","showColorToggle","showSpaceToggle","showLanguageToggle","Header","props","menuPosition","className","logo","title","navItems","user","userMenuItems","onLogout","actions"],"sources":["../../../../src/tools/components/header/header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Menu } from 'lucide-react';\nimport { Button, buttonVariants } from '../ui/button';\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '../ui';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../ui/dropdown-menu';\nimport { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';\nimport {\n  ThemeSwitcherGroup,\n  ThemeModeSwitcher,\n  ColorThemeSwitcher,\n  SpacingThemeSwitcher,\n} from \"../theme\";\nimport { LanguageSwitcher } from \"../i18n/LanguageSwitcher\";\nimport { cn } from \"../../lib/utils\";\nimport { SidebarTrigger } from \"../sidebar/sidebar\";\nimport type { Locale } from '../../paraglide/runtime.js';\n\n/**\n * Host inputs and presentation settings for Header.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see Header\n */\nexport interface HeaderProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Optional logo content shown beside title.\n   */\n  logo?: React.ReactNode;\n  /**\n   * Application title; hidden below md when logo is present.\n   */\n  title?: string;\n  /**\n   * Sheet-menu placement; defaults to right.\n   */\n  menuPosition?: 'left' | 'right';\n  /**\n   * Sheet-menu entries; empty/omitted means no sheet trigger. href entries use anchors, otherwise Buttons.\n   */\n  menuItems?: { /**\n   * Visible text for the navigation/menu entry.\n   */\n  label: string; /**\n   * Host action invoked when this entry is clicked; the host owns any navigation or asynchronous work.\n   * @returns No value; complete the host callback action.\n   */\n  onClick?: () => void; /**\n   * Optional anchor destination; no router integration or authorization checks are installed.\n   */\n  href?: string; /**\n   * Optional leading sheet-menu icon; user-menu icon fields are currently ignored.\n   */\n  icon?: React.ReactNode }[];\n  /**\n   * Desktop-only navigation anchors; the host supplies href/onClick and active state.\n   */\n  navItems?: { /**\n   * Visible text for the navigation/menu entry.\n   */\n  label: string; /**\n   * Host action invoked when this entry is clicked; the host owns any navigation or asynchronous work.\n   * @returns No value; complete the host callback action.\n   */\n  onClick?: () => void; /**\n   * Optional anchor destination; no router integration or authorization checks are installed.\n   */\n  href?: string; /**\n   * Adds desktop navigation active styling when true; omitted/false uses inactive styling.\n   */\n  active?: boolean }[];\n  /**\n   * Host-supplied profile display data; omitted hides the avatar menu. It is not validated as authenticated identity.\n   */\n  user?: {\n    /**\n     * User display name; also supplies the two-character uppercase avatar fallback.\n     */\n    name: string;\n    /**\n     * Optional user email shown in the avatar menu.\n     */\n    email?: string;\n    /**\n     * Optional avatar image URL; missing/failing images use the fallback.\n     */\n    image?: string;\n    /**\n     * Optional avatar fallback text; falsy values use the first two name characters.\n     */\n    initials?: string;\n  };\n  /**\n   * Avatar dropdown entries; href creates an anchor and onClick is attached to the menu item. Accepted icon fields are currently ignored.\n   */\n  userMenuItems?: { /**\n   * Visible text for the navigation/menu entry.\n   */\n  label: string; /**\n   * Host action invoked when this entry is clicked; the host owns any navigation or asynchronous work.\n   * @returns No value; complete the host callback action.\n   */\n  onClick?: () => void; /**\n   * Optional anchor destination; no router integration or authorization checks are installed.\n   */\n  href?: string; /**\n   * Optional leading sheet-menu icon; user-menu icon fields are currently ignored.\n   */\n  icon?: React.ReactNode }[];\n  /**\n   * Called from the optional logout menu item; the host performs logout and invalidates its own session/cache.\n   * @returns No value; complete the host callback action.\n   */\n  onLogout?: () => void;\n  /**\n   * Shows the main and sheet theme-mode controls; defaults to true.\n   */\n  showThemeToggle?: boolean;\n  /**\n   * Shows the main and sheet palette controls; defaults to true.\n   */\n  showColorToggle?: boolean;\n  /**\n   * Shows the main and sheet spacing controls; defaults to true.\n   */\n  showSpaceToggle?: boolean;\n  /**\n   * Shows the main and sheet locale toggles; defaults to true.\n   */\n  showLanguageToggle?: boolean;\n  /**\n   * Controlled locale callback forwarded only to the main header toggle; the sheet toggle uses global runtime behavior.\n   * @param lang - Host callback input described above.\n   * @returns No value; complete the host callback action.\n   */\n  onLanguageChange?: (lang: Locale) => void;\n  /**\n   * Locale override forwarded only to the main header toggle; omitted reads runtime state.\n   */\n  currentLanguage?: Locale;\n  /**\n   * Additional action content displayed in the right action group.\n   */\n  actions?: React.ReactNode;\n}\n\ntype MenuItem = NonNullable<HeaderProps['menuItems']>[number];\n\nconst MobileMenu: React.FC<{\n  menuItems: MenuItem[];\n  isMenuLeft: boolean;\n  showThemeToggle: boolean;\n  showColorToggle: boolean;\n  showSpaceToggle: boolean;\n  showLanguageToggle: boolean;\n}> = ({\n  menuItems,\n  isMenuLeft,\n  showThemeToggle,\n  showColorToggle,\n  showSpaceToggle,\n  showLanguageToggle,\n}) => (\n  <Sheet>\n    <SheetTrigger className={cn(buttonVariants({ variant: 'ghost', size: 'icon' }), 'shrink-0')}>\n      <Menu className='h-5 w-5' />\n      <span className='sr-only'>Toggle menu</span>\n    </SheetTrigger>\n    <SheetContent side={isMenuLeft ? 'left' : 'right'}>\n      <SheetHeader>\n        <SheetTitle>Menu</SheetTitle>\n      </SheetHeader>\n      <div className='grid gap-4 py-4'>\n        {menuItems.map((item, index) => (\n          <React.Fragment key={index}>\n            {item.href ? (\n              <a\n                href={item.href}\n                className={cn(buttonVariants({ variant: 'ghost' }), 'justify-start')}\n                onClick={item.onClick}\n              >\n                {item.icon && <span className='mr-2'>{item.icon}</span>}\n                {item.label}\n              </a>\n            ) : (\n              <Button variant='ghost' className='justify-start' onClick={item.onClick}>\n                {item.icon && <span className='mr-2'>{item.icon}</span>}\n                {item.label}\n              </Button>\n            )}\n          </React.Fragment>\n        ))}\n        {(showThemeToggle || showColorToggle || showSpaceToggle) && (\n          <>\n            <div className='h-px bg-border my-2' />\n            <div className='px-2'>\n              <ThemeSwitcherGroup\n                showThemeMode={showThemeToggle}\n                showColorTheme={showColorToggle}\n                showSpacingTheme={showSpaceToggle}\n                modeVariant='icon-group'\n                colorVariant='icon-group'\n                spacingVariant='icon-group'\n              />\n            </div>\n          </>\n        )}\n        {showLanguageToggle && (\n          <div className='px-2'>\n            <LanguageSwitcher />\n          </div>\n        )}\n      </div>\n    </SheetContent>\n  </Sheet>\n);\n\n/**\n * Renders a sticky application header with navigation, theme/locale controls and an optional user menu.\n * @param props - Header configuration and native header attributes; className customizes styling, and children are replaced by the built-in layout. Wrapper defaults: menuPosition='right', menuItems=[], navItems=[], userMenuItems=[], showThemeToggle=true, showColorToggle=true, showSpaceToggle=true, showLanguageToggle=true.\n * @returns The rendered Header composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS. SidebarProvider is required because the header always renders SidebarTrigger, even when hidden by desktop CSS. ThemeProvider supplies working theme controls; locale updates follow LanguageSwitcher. The host owns routing, identity data and logout effects; user is display data, not proof of an authenticated session. Header children are replaced by its built-in layout. navItems are desktop-only anchors; menuItems populate the sheet menu. The sheet language switcher does not receive currentLanguage/onLanguageChange, so those props control only the main header switcher. userMenuItems.icon is accepted but not rendered.\n * @example\n * ```tsx\n * import { ThemeProvider } from '@alneas/appkit-react/ui/theme';\n * import { SidebarProvider } from '@alneas/appkit-react/tools/sidebar';\n * import { Header } from '@alneas/appkit-react/tools/header';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ThemeProvider><SidebarProvider><Header title=\"Project\" navItems={[{ label: \"Home\", href: \"/\", active: true }]} menuItems={[{ label: \"Help\", href: \"/help\" }]} /></SidebarProvider></ThemeProvider>);\n * }\n * ```\n */\nexport function Header({\n  className,\n  logo,\n  title,\n  menuPosition = 'right',\n  menuItems = [],\n  navItems = [],\n  user,\n  userMenuItems = [],\n  onLogout,\n  showThemeToggle = true,\n  showColorToggle = true,\n  showSpaceToggle = true,\n  showLanguageToggle = true,\n  onLanguageChange,\n  currentLanguage,\n  actions,\n  ...props\n}: HeaderProps) {\n  // If logo is on the left (default/implied), menu icon should be on the right by default?\n  // Requirement 4: \"menu icon in left or right end(choosable. in right if logo is in left)\"\n  // If logo is provided, it usually sits on the left. So menuPosition default 'right' makes sense.\n  // If menuPosition is 'left', we should probably ensure logo isn't conflicting or logo is hidden?\n  // Let's assume user handles logic or we prioritize menuPosition.\n  // However, \"in right if logo is in left\" implies conditional default.\n  // We already defaulted menuPosition to 'right' in props.\n\n  // Determine effective menu position.\n  // If logo is present and menuPosition is undefined, it defaults to right.\n\n  const isMenuLeft = menuPosition === 'left';\n\n  return (\n    <header\n      className={cn(\n        'sticky top-0 z-40 w-full border-b bg-primary text-primary-foreground shadow-sm',\n        className,\n      )}\n      {...props}\n    >\n      <div className='flex h-16 items-center justify-between px-4 gap-4 overflow-hidden'>\n        <div className='flex items-center gap-4 min-w-0 flex-shrink-0 relative z-10 bg-primary pr-4'>\n          {/* Left Section */}\n          {isMenuLeft && menuItems.length > 0 && (\n            <div className='flex-shrink-0'>\n              <MobileMenu\n                menuItems={menuItems}\n                isMenuLeft={isMenuLeft}\n                showThemeToggle={showThemeToggle}\n                showColorToggle={showColorToggle}\n                showSpaceToggle={showSpaceToggle}\n                showLanguageToggle={showLanguageToggle}\n              />\n            </div>\n          )}\n\n          {logo && (\n            <div className='flex items-center gap-2 min-w-0'>\n              {logo}\n              {title && (\n                <span className='text-lg font-bold hidden md:inline-block truncate'>{title}</span>\n              )}\n            </div>\n          )}\n          {/* Title without logo if applicable */}\n          {!logo && title && (\n            <div className='flex items-center gap-2 min-w-0'>\n              <span className='text-lg font-bold truncate'>{title}</span>\n            </div>\n          )}\n\n          {/* Center/Nav Section - hidden on mobile */}\n          <nav className='flex items-center gap-6 text-sm font-medium hidden md:flex'>\n            {navItems.map((item, index) => (\n              <a\n                key={index}\n                href={item.href}\n                onClick={item.onClick}\n                className={cn(\n                  'transition-colors hover:text-primary-foreground/80',\n                  item.active\n                    ? 'text-primary-foreground font-bold underline underline-offset-4'\n                    : 'text-primary-foreground/60',\n                )}\n              >\n                {item.label}\n              </a>\n            ))}\n          </nav>\n        </div>\n\n        {/* Right Section - flex-row-reverse ensures essential items stay at right edge */}\n        <div className='ml-auto flex items-center justify-end gap-2 min-w-0 flex-shrink'>\n          {/* Switchers - shrink before title */}\n          <div className='flex items-center gap-2 min-w-0 flex-shrink overflow-hidden justify-end'>\n            {showSpaceToggle && <SpacingThemeSwitcher variant='toggle' withBackground />}\n            {showColorToggle && <ColorThemeSwitcher variant='toggle' withBackground />}\n            {showThemeToggle && <ThemeModeSwitcher variant='toggle' withBackground />}\n            {showLanguageToggle && (\n              <LanguageSwitcher\n                onLanguageChange={onLanguageChange}\n                currentLanguage={currentLanguage}\n              />\n            )}\n          </div>\n\n          {/* Essential actions - always visible */}\n          <div className='flex items-center gap-2 flex-none relative z-20 bg-primary pl-2'>\n            {/* User Profile */}\n            {user && (\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  aria-label={`${user.initials || user.name.slice(0, 2).toUpperCase()} ${user.name} ユーザーメニュー`}\n                  className={cn(\n                    buttonVariants({ variant: 'ghost' }),\n                    'relative h-8 w-8 rounded-full p-0 flex items-center justify-center',\n                  )}\n                >\n                  <Avatar className='h-8 w-8'>\n                    <AvatarImage src={user.image} alt={user.name} />\n                    <AvatarFallback>\n                      {user.initials || user.name.slice(0, 2).toUpperCase()}\n                    </AvatarFallback>\n                  </Avatar>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent className='w-56' align='end'>\n                  <DropdownMenuGroup>\n                  <DropdownMenuLabel className='font-normal'>\n                    <div className='flex flex-col space-y-1'>\n                      <p className='text-sm font-medium leading-none'>{user.name}</p>\n                      <p className='text-xs leading-none text-muted-foreground'>{user.email}</p>\n                    </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  {userMenuItems.map((item, index) => (\n                    <DropdownMenuItem key={index} onClick={item.onClick}>\n                      {item.href ? (\n                        <a href={item.href} className='w-full h-full flex items-center'>\n                          {item.label}\n                        </a>\n                      ) : (\n                        item.label\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                  {onLogout && (\n                    <>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem onClick={onLogout}>Log out</DropdownMenuItem>\n                    </>\n                  )}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            )}\n\n            {actions}\n\n            {/* Mobile Menu Trigger (Right side) */}\n            {!isMenuLeft && menuItems.length > 0 && (\n              <MobileMenu\n                menuItems={menuItems}\n                isMenuLeft={isMenuLeft}\n                showThemeToggle={showThemeToggle}\n                showColorToggle={showColorToggle}\n                showSpaceToggle={showSpaceToggle}\n                showLanguageToggle={showLanguageToggle}\n              />\n            )}\n\n            {/* Mobile Sidebar Trigger (rightmost when no menu icon) */}\n            <SidebarTrigger className='md:hidden' />\n          </div>\n        </div>\n      </div>\n    </header>\n  );\n}\n"],"mappings":"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"}

package/dist/tools/components/header/header.d.cts

@@ -1,80 +1,143 @@
 import { Locale } from '../../paraglide/runtime.cjs';
 import * as React from 'react';
 /**
- * ヘッダーのプロップス
+ * Host inputs and presentation settings for Header.
+ * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.
+ * @see Header
  */
 export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
-    /** ロゴ要素 */
+    /**
+     * Optional logo content shown beside title.
+     */
     logo?: React.ReactNode;
-    /** タイトル */
+    /**
+     * Application title; hidden below md when logo is present.
+     */
     title?: string;
-    /** メニュー位置 */
+    /**
+     * Sheet-menu placement; defaults to right.
+     */
     menuPosition?: 'left' | 'right';
-    /** メニューアイテム */
+    /**
+     * Sheet-menu entries; empty/omitted means no sheet trigger. href entries use anchors, otherwise Buttons.
+     */
     menuItems?: {
-        label: string;
-        onClick?: () => void;
-        href?: string;
+        label: string; /**
+         * Host action invoked when this entry is clicked; the host owns any navigation or asynchronous work.
+         * @returns No value; complete the host callback action.
+         */
+        onClick?: () => void; /**
+         * Optional anchor destination; no router integration or authorization checks are installed.
+         */
+        href?: string; /**
+         * Optional leading sheet-menu icon; user-menu icon fields are currently ignored.
+         */
         icon?: React.ReactNode;
     }[];
-    /** ナビゲーションアイテム */
+    /**
+     * Desktop-only navigation anchors; the host supplies href/onClick and active state.
+     */
     navItems?: {
-        label: string;
-        onClick?: () => void;
-        href?: string;
+        label: string; /**
+         * Host action invoked when this entry is clicked; the host owns any navigation or asynchronous work.
+         * @returns No value; complete the host callback action.
+         */
+        onClick?: () => void; /**
+         * Optional anchor destination; no router integration or authorization checks are installed.
+         */
+        href?: string; /**
+         * Adds desktop navigation active styling when true; omitted/false uses inactive styling.
+         */
         active?: boolean;
     }[];
-    /** ユーザー情報 */
+    /**
+     * Host-supplied profile display data; omitted hides the avatar menu. It is not validated as authenticated identity.
+     */
     user?: {
+        /**
+         * User display name; also supplies the two-character uppercase avatar fallback.
+         */
         name: string;
+        /**
+         * Optional user email shown in the avatar menu.
+         */
         email?: string;
+        /**
+         * Optional avatar image URL; missing/failing images use the fallback.
+         */
         image?: string;
+        /**
+         * Optional avatar fallback text; falsy values use the first two name characters.
+         */
         initials?: string;
     };
-    /** ユーザーメニューアイテム */
+    /**
+     * Avatar dropdown entries; href creates an anchor and onClick is attached to the menu item. Accepted icon fields are currently ignored.
+     */
     userMenuItems?: {
-        label: string;
-        onClick?: () => void;
-        href?: string;
+        label: string; /**
+         * Host action invoked when this entry is clicked; the host owns any navigation or asynchronous work.
+         * @returns No value; complete the host callback action.
+         */
+        onClick?: () => void; /**
+         * Optional anchor destination; no router integration or authorization checks are installed.
+         */
+        href?: string; /**
+         * Optional leading sheet-menu icon; user-menu icon fields are currently ignored.
+         */
         icon?: React.ReactNode;
     }[];
-    /** ログアウトコールバック */
+    /**
+     * Called from the optional logout menu item; the host performs logout and invalidates its own session/cache.
+     * @returns No value; complete the host callback action.
+     */
     onLogout?: () => void;
-    /** ダーク/ライトモード切替ボタン表示 */
+    /**
+     * Shows the main and sheet theme-mode controls; defaults to true.
+     */
     showThemeToggle?: boolean;
-    /** カラーテーマ切替ボタン表示 */
+    /**
+     * Shows the main and sheet palette controls; defaults to true.
+     */
     showColorToggle?: boolean;
-    /** スペーシング切替ボタン表示 */
+    /**
+     * Shows the main and sheet spacing controls; defaults to true.
+     */
     showSpaceToggle?: boolean;
-    /** 言語切替ボタン表示 */
+    /**
+     * Shows the main and sheet locale toggles; defaults to true.
+     */
     showLanguageToggle?: boolean;
-    /** 言語変更時のコールバック */
+    /**
+     * Controlled locale callback forwarded only to the main header toggle; the sheet toggle uses global runtime behavior.
+     * @param lang - Host callback input described above.
+     * @returns No value; complete the host callback action.
+     */
     onLanguageChange?: (lang: Locale) => void;
-    /** 現在の言語 */
+    /**
+     * Locale override forwarded only to the main header toggle; omitted reads runtime state.
+     */
     currentLanguage?: Locale;
-    /** 追加アクション */
+    /**
+     * Additional action content displayed in the right action group.
+     */
     actions?: React.ReactNode;
 }
 /**
- * ヘッダーコンポーネント
- *
- * ロゴ、ナビゲーション、テーマ切り替え、ユーザーメニューを含む
- * レスポンシブなヘッダーコンポーネント。
- *
+ * Renders a sticky application header with navigation, theme/locale controls and an optional user menu.
+ * @param props - Header configuration and native header attributes; className customizes styling, and children are replaced by the built-in layout. Wrapper defaults: menuPosition='right', menuItems=[], navItems=[], userMenuItems=[], showThemeToggle=true, showColorToggle=true, showSpaceToggle=true, showLanguageToggle=true.
+ * @returns The rendered Header composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS. SidebarProvider is required because the header always renders SidebarTrigger, even when hidden by desktop CSS. ThemeProvider supplies working theme controls; locale updates follow LanguageSwitcher. The host owns routing, identity data and logout effects; user is display data, not proof of an authenticated session. Header children are replaced by its built-in layout. navItems are desktop-only anchors; menuItems populate the sheet menu. The sheet language switcher does not receive currentLanguage/onLanguageChange, so those props control only the main header switcher. userMenuItems.icon is accepted but not rendered.
  * @example
  * ```tsx
+ * import { ThemeProvider } from '@alneas/appkit-react/ui/theme';
+ * import { SidebarProvider } from '@alneas/appkit-react/tools/sidebar';
  * import { Header } from '@alneas/appkit-react/tools/header';
+ * import '@alneas/appkit-react/styles';
  *
- * <Header
- *   logo={<img src="/logo.svg" alt="Logo" />}
- *   title="My App"
- *   navItems={[
- *     { label: 'ホーム', href: '/', active: true },
- *     { label: '設定', href: '/settings' },
- *   ]}
- *   user={{ name: '山田太郎', email: 'yamada@example.com' }}
- *   onLogout={() => handleLogout()}
- * />
+ * export function Example() {
+ *   return (<ThemeProvider><SidebarProvider><Header title="Project" navItems={[{ label: "Home", href: "/", active: true }]} menuItems={[{ label: "Help", href: "/help" }]} /></SidebarProvider></ThemeProvider>);
+ * }
  * ```
  */
 export declare function Header({ className, logo, title, menuPosition, menuItems, navItems, user, userMenuItems, onLogout, showThemeToggle, showColorToggle, showSpaceToggle, showLanguageToggle, onLanguageChange, currentLanguage, actions, ...props }: HeaderProps): React.JSX.Element;

package/dist/tools/components/header/header.d.ts

@@ -1,80 +1,143 @@
 import { Locale } from '../../paraglide/runtime.js';
 import * as React from 'react';
 /**
- * ヘッダーのプロップス
+ * Host inputs and presentation settings for Header.
+ * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.
+ * @see Header
  */
 export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
-    /** ロゴ要素 */
+    /**
+     * Optional logo content shown beside title.
+     */
     logo?: React.ReactNode;
-    /** タイトル */
+    /**
+     * Application title; hidden below md when logo is present.
+     */
     title?: string;
-    /** メニュー位置 */
+    /**
+     * Sheet-menu placement; defaults to right.
+     */
     menuPosition?: 'left' | 'right';
-    /** メニューアイテム */
+    /**
+     * Sheet-menu entries; empty/omitted means no sheet trigger. href entries use anchors, otherwise Buttons.
+     */
     menuItems?: {
-        label: string;
-        onClick?: () => void;
-        href?: string;
+        label: string; /**
+         * Host action invoked when this entry is clicked; the host owns any navigation or asynchronous work.
+         * @returns No value; complete the host callback action.
+         */
+        onClick?: () => void; /**
+         * Optional anchor destination; no router integration or authorization checks are installed.
+         */
+        href?: string; /**
+         * Optional leading sheet-menu icon; user-menu icon fields are currently ignored.
+         */
         icon?: React.ReactNode;
     }[];
-    /** ナビゲーションアイテム */
+    /**
+     * Desktop-only navigation anchors; the host supplies href/onClick and active state.
+     */
     navItems?: {
-        label: string;
-        onClick?: () => void;
-        href?: string;
+        label: string; /**
+         * Host action invoked when this entry is clicked; the host owns any navigation or asynchronous work.
+         * @returns No value; complete the host callback action.
+         */
+        onClick?: () => void; /**
+         * Optional anchor destination; no router integration or authorization checks are installed.
+         */
+        href?: string; /**
+         * Adds desktop navigation active styling when true; omitted/false uses inactive styling.
+         */
         active?: boolean;
     }[];
-    /** ユーザー情報 */
+    /**
+     * Host-supplied profile display data; omitted hides the avatar menu. It is not validated as authenticated identity.
+     */
     user?: {
+        /**
+         * User display name; also supplies the two-character uppercase avatar fallback.
+         */
         name: string;
+        /**
+         * Optional user email shown in the avatar menu.
+         */
         email?: string;
+        /**
+         * Optional avatar image URL; missing/failing images use the fallback.
+         */
         image?: string;
+        /**
+         * Optional avatar fallback text; falsy values use the first two name characters.
+         */
         initials?: string;
     };
-    /** ユーザーメニューアイテム */
+    /**
+     * Avatar dropdown entries; href creates an anchor and onClick is attached to the menu item. Accepted icon fields are currently ignored.
+     */
     userMenuItems?: {
-        label: string;
-        onClick?: () => void;
-        href?: string;
+        label: string; /**
+         * Host action invoked when this entry is clicked; the host owns any navigation or asynchronous work.
+         * @returns No value; complete the host callback action.
+         */
+        onClick?: () => void; /**
+         * Optional anchor destination; no router integration or authorization checks are installed.
+         */
+        href?: string; /**
+         * Optional leading sheet-menu icon; user-menu icon fields are currently ignored.
+         */
         icon?: React.ReactNode;
     }[];
-    /** ログアウトコールバック */
+    /**
+     * Called from the optional logout menu item; the host performs logout and invalidates its own session/cache.
+     * @returns No value; complete the host callback action.
+     */
     onLogout?: () => void;
-    /** ダーク/ライトモード切替ボタン表示 */
+    /**
+     * Shows the main and sheet theme-mode controls; defaults to true.
+     */
     showThemeToggle?: boolean;
-    /** カラーテーマ切替ボタン表示 */
+    /**
+     * Shows the main and sheet palette controls; defaults to true.
+     */
     showColorToggle?: boolean;
-    /** スペーシング切替ボタン表示 */
+    /**
+     * Shows the main and sheet spacing controls; defaults to true.
+     */
     showSpaceToggle?: boolean;
-    /** 言語切替ボタン表示 */
+    /**
+     * Shows the main and sheet locale toggles; defaults to true.
+     */
     showLanguageToggle?: boolean;
-    /** 言語変更時のコールバック */
+    /**
+     * Controlled locale callback forwarded only to the main header toggle; the sheet toggle uses global runtime behavior.
+     * @param lang - Host callback input described above.
+     * @returns No value; complete the host callback action.
+     */
     onLanguageChange?: (lang: Locale) => void;
-    /** 現在の言語 */
+    /**
+     * Locale override forwarded only to the main header toggle; omitted reads runtime state.
+     */
     currentLanguage?: Locale;
-    /** 追加アクション */
+    /**
+     * Additional action content displayed in the right action group.
+     */
     actions?: React.ReactNode;
 }
 /**
- * ヘッダーコンポーネント
- *
- * ロゴ、ナビゲーション、テーマ切り替え、ユーザーメニューを含む
- * レスポンシブなヘッダーコンポーネント。
- *
+ * Renders a sticky application header with navigation, theme/locale controls and an optional user menu.
+ * @param props - Header configuration and native header attributes; className customizes styling, and children are replaced by the built-in layout. Wrapper defaults: menuPosition='right', menuItems=[], navItems=[], userMenuItems=[], showThemeToggle=true, showColorToggle=true, showSpaceToggle=true, showLanguageToggle=true.
+ * @returns The rendered Header composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS. SidebarProvider is required because the header always renders SidebarTrigger, even when hidden by desktop CSS. ThemeProvider supplies working theme controls; locale updates follow LanguageSwitcher. The host owns routing, identity data and logout effects; user is display data, not proof of an authenticated session. Header children are replaced by its built-in layout. navItems are desktop-only anchors; menuItems populate the sheet menu. The sheet language switcher does not receive currentLanguage/onLanguageChange, so those props control only the main header switcher. userMenuItems.icon is accepted but not rendered.
  * @example
  * ```tsx
+ * import { ThemeProvider } from '@alneas/appkit-react/ui/theme';
+ * import { SidebarProvider } from '@alneas/appkit-react/tools/sidebar';
  * import { Header } from '@alneas/appkit-react/tools/header';
+ * import '@alneas/appkit-react/styles';
  *
- * <Header
- *   logo={<img src="/logo.svg" alt="Logo" />}
- *   title="My App"
- *   navItems={[
- *     { label: 'ホーム', href: '/', active: true },
- *     { label: '設定', href: '/settings' },
- *   ]}
- *   user={{ name: '山田太郎', email: 'yamada@example.com' }}
- *   onLogout={() => handleLogout()}
- * />
+ * export function Example() {
+ *   return (<ThemeProvider><SidebarProvider><Header title="Project" navItems={[{ label: "Home", href: "/", active: true }]} menuItems={[{ label: "Help", href: "/help" }]} /></SidebarProvider></ThemeProvider>);
+ * }
  * ```
  */
 export declare function Header({ className, logo, title, menuPosition, menuItems, navItems, user, userMenuItems, onLogout, showThemeToggle, showColorToggle, showSpaceToggle, showLanguageToggle, onLanguageChange, currentLanguage, actions, ...props }: HeaderProps): React.JSX.Element;

package/dist/tools/components/header/header.js

@@ -132,7 +132,7 @@ function A({ className: n, logo: p, title: m, menuPosition: h = "right", menuIte
 					className: "flex items-center gap-2 flex-none relative z-20 bg-primary pl-2",
 					children: [
 						x && /* @__PURE__ */ E(o, { children: [/* @__PURE__ */ T(f, {
-							"aria-label": "ユーザーメニュー",
+							"aria-label": `${x.initials || x.name.slice(0, 2).toUpperCase()} ${x.name} ユーザーメニュー`,
 							className: e(t({ variant: "ghost" }), "relative h-8 w-8 rounded-full p-0 flex items-center justify-center"),
 							children: /* @__PURE__ */ E(r, {
 								className: "h-8 w-8",

package/dist/tools/components/header/header.js.map

@@ -1 +1 @@
-{"version":3,"file":"header.js","names":["React","_Fragment","React$1","MobileMenu","Sheet","SheetTrigger","cn","buttonVariants","Menu","SheetContent","isMenuLeft","SheetHeader","SheetTitle","menuItems","item","Button","index","showThemeToggle","showColorToggle","showSpaceToggle","Fragment","ThemeSwitcherGroup","showLanguageToggle","LanguageSwitcher","Header","props","menuPosition","className","logo","title","navItems","SpacingThemeSwitcher","ColorThemeSwitcher","ThemeModeSwitcher","user","DropdownMenu","DropdownMenuTrigger","Avatar","AvatarImage","AvatarFallback","DropdownMenuContent","DropdownMenuGroup","DropdownMenuLabel","DropdownMenuSeparator","userMenuItems","DropdownMenuItem","onLogout","actions","SidebarTrigger"],"sources":["../../../../src/tools/components/header/header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Menu } from 'lucide-react';\nimport { Button, buttonVariants } from '../ui/button';\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '../ui';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../ui/dropdown-menu';\nimport { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';\nimport {\n  ThemeSwitcherGroup,\n  ThemeModeSwitcher,\n  ColorThemeSwitcher,\n  SpacingThemeSwitcher,\n} from \"../theme\";\nimport { LanguageSwitcher } from \"../i18n/LanguageSwitcher\";\nimport { cn } from \"../../lib/utils\";\nimport { SidebarTrigger } from \"../sidebar/sidebar\";\nimport type { Locale } from '../../paraglide/runtime.js';\n\n/**\n * ヘッダーのプロップス\n */\nexport interface HeaderProps extends React.HTMLAttributes<HTMLElement> {\n  /** ロゴ要素 */\n  logo?: React.ReactNode;\n  /** タイトル */\n  title?: string;\n  /** メニュー位置 */\n  menuPosition?: 'left' | 'right';\n  /** メニューアイテム */\n  menuItems?: { label: string; onClick?: () => void; href?: string; icon?: React.ReactNode }[];\n  /** ナビゲーションアイテム */\n  navItems?: { label: string; onClick?: () => void; href?: string; active?: boolean }[];\n  /** ユーザー情報 */\n  user?: {\n    name: string;\n    email?: string;\n    image?: string;\n    initials?: string;\n  };\n  /** ユーザーメニューアイテム */\n  userMenuItems?: { label: string; onClick?: () => void; href?: string; icon?: React.ReactNode }[];\n  /** ログアウトコールバック */\n  onLogout?: () => void;\n  /** ダーク/ライトモード切替ボタン表示 */\n  showThemeToggle?: boolean;\n  /** カラーテーマ切替ボタン表示 */\n  showColorToggle?: boolean;\n  /** スペーシング切替ボタン表示 */\n  showSpaceToggle?: boolean;\n  /** 言語切替ボタン表示 */\n  showLanguageToggle?: boolean;\n  /** 言語変更時のコールバック */\n  onLanguageChange?: (lang: Locale) => void;\n  /** 現在の言語 */\n  currentLanguage?: Locale;\n  /** 追加アクション */\n  actions?: React.ReactNode;\n}\n\ntype MenuItem = NonNullable<HeaderProps['menuItems']>[number];\n\nconst MobileMenu: React.FC<{\n  menuItems: MenuItem[];\n  isMenuLeft: boolean;\n  showThemeToggle: boolean;\n  showColorToggle: boolean;\n  showSpaceToggle: boolean;\n  showLanguageToggle: boolean;\n}> = ({\n  menuItems,\n  isMenuLeft,\n  showThemeToggle,\n  showColorToggle,\n  showSpaceToggle,\n  showLanguageToggle,\n}) => (\n  <Sheet>\n    <SheetTrigger className={cn(buttonVariants({ variant: 'ghost', size: 'icon' }), 'shrink-0')}>\n      <Menu className='h-5 w-5' />\n      <span className='sr-only'>Toggle menu</span>\n    </SheetTrigger>\n    <SheetContent side={isMenuLeft ? 'left' : 'right'}>\n      <SheetHeader>\n        <SheetTitle>Menu</SheetTitle>\n      </SheetHeader>\n      <div className='grid gap-4 py-4'>\n        {menuItems.map((item, index) => (\n          <React.Fragment key={index}>\n            {item.href ? (\n              <a\n                href={item.href}\n                className={cn(buttonVariants({ variant: 'ghost' }), 'justify-start')}\n                onClick={item.onClick}\n              >\n                {item.icon && <span className='mr-2'>{item.icon}</span>}\n                {item.label}\n              </a>\n            ) : (\n              <Button variant='ghost' className='justify-start' onClick={item.onClick}>\n                {item.icon && <span className='mr-2'>{item.icon}</span>}\n                {item.label}\n              </Button>\n            )}\n          </React.Fragment>\n        ))}\n        {(showThemeToggle || showColorToggle || showSpaceToggle) && (\n          <>\n            <div className='h-px bg-border my-2' />\n            <div className='px-2'>\n              <ThemeSwitcherGroup\n                showThemeMode={showThemeToggle}\n                showColorTheme={showColorToggle}\n                showSpacingTheme={showSpaceToggle}\n                modeVariant='icon-group'\n                colorVariant='icon-group'\n                spacingVariant='icon-group'\n              />\n            </div>\n          </>\n        )}\n        {showLanguageToggle && (\n          <div className='px-2'>\n            <LanguageSwitcher />\n          </div>\n        )}\n      </div>\n    </SheetContent>\n  </Sheet>\n);\n\n/**\n * ヘッダーコンポーネント\n *\n * ロゴ、ナビゲーション、テーマ切り替え、ユーザーメニューを含む\n * レスポンシブなヘッダーコンポーネント。\n *\n * @example\n * ```tsx\n * import { Header } from '@alneas/appkit-react/tools/header';\n *\n * <Header\n *   logo={<img src=\"/logo.svg\" alt=\"Logo\" />}\n *   title=\"My App\"\n *   navItems={[\n *     { label: 'ホーム', href: '/', active: true },\n *     { label: '設定', href: '/settings' },\n *   ]}\n *   user={{ name: '山田太郎', email: 'yamada@example.com' }}\n *   onLogout={() => handleLogout()}\n * />\n * ```\n */\nexport function Header({\n  className,\n  logo,\n  title,\n  menuPosition = 'right',\n  menuItems = [],\n  navItems = [],\n  user,\n  userMenuItems = [],\n  onLogout,\n  showThemeToggle = true,\n  showColorToggle = true,\n  showSpaceToggle = true,\n  showLanguageToggle = true,\n  onLanguageChange,\n  currentLanguage,\n  actions,\n  ...props\n}: HeaderProps) {\n  // If logo is on the left (default/implied), menu icon should be on the right by default?\n  // Requirement 4: \"menu icon in left or right end(choosable. in right if logo is in left)\"\n  // If logo is provided, it usually sits on the left. So menuPosition default 'right' makes sense.\n  // If menuPosition is 'left', we should probably ensure logo isn't conflicting or logo is hidden?\n  // Let's assume user handles logic or we prioritize menuPosition.\n  // However, \"in right if logo is in left\" implies conditional default.\n  // We already defaulted menuPosition to 'right' in props.\n\n  // Determine effective menu position.\n  // If logo is present and menuPosition is undefined, it defaults to right.\n\n  const isMenuLeft = menuPosition === 'left';\n\n  return (\n    <header\n      className={cn(\n        'sticky top-0 z-40 w-full border-b bg-primary text-primary-foreground shadow-sm',\n        className,\n      )}\n      {...props}\n    >\n      <div className='flex h-16 items-center justify-between px-4 gap-4 overflow-hidden'>\n        <div className='flex items-center gap-4 min-w-0 flex-shrink-0 relative z-10 bg-primary pr-4'>\n          {/* Left Section */}\n          {isMenuLeft && menuItems.length > 0 && (\n            <div className='flex-shrink-0'>\n              <MobileMenu\n                menuItems={menuItems}\n                isMenuLeft={isMenuLeft}\n                showThemeToggle={showThemeToggle}\n                showColorToggle={showColorToggle}\n                showSpaceToggle={showSpaceToggle}\n                showLanguageToggle={showLanguageToggle}\n              />\n            </div>\n          )}\n\n          {logo && (\n            <div className='flex items-center gap-2 min-w-0'>\n              {logo}\n              {title && (\n                <span className='text-lg font-bold hidden md:inline-block truncate'>{title}</span>\n              )}\n            </div>\n          )}\n          {/* Title without logo if applicable */}\n          {!logo && title && (\n            <div className='flex items-center gap-2 min-w-0'>\n              <span className='text-lg font-bold truncate'>{title}</span>\n            </div>\n          )}\n\n          {/* Center/Nav Section - hidden on mobile */}\n          <nav className='flex items-center gap-6 text-sm font-medium hidden md:flex'>\n            {navItems.map((item, index) => (\n              <a\n                key={index}\n                href={item.href}\n                onClick={item.onClick}\n                className={cn(\n                  'transition-colors hover:text-primary-foreground/80',\n                  item.active\n                    ? 'text-primary-foreground font-bold underline underline-offset-4'\n                    : 'text-primary-foreground/60',\n                )}\n              >\n                {item.label}\n              </a>\n            ))}\n          </nav>\n        </div>\n\n        {/* Right Section - flex-row-reverse ensures essential items stay at right edge */}\n        <div className='ml-auto flex items-center justify-end gap-2 min-w-0 flex-shrink'>\n          {/* Switchers - shrink before title */}\n          <div className='flex items-center gap-2 min-w-0 flex-shrink overflow-hidden justify-end'>\n            {showSpaceToggle && <SpacingThemeSwitcher variant='toggle' withBackground />}\n            {showColorToggle && <ColorThemeSwitcher variant='toggle' withBackground />}\n            {showThemeToggle && <ThemeModeSwitcher variant='toggle' withBackground />}\n            {showLanguageToggle && (\n              <LanguageSwitcher\n                onLanguageChange={onLanguageChange}\n                currentLanguage={currentLanguage}\n              />\n            )}\n          </div>\n\n          {/* Essential actions - always visible */}\n          <div className='flex items-center gap-2 flex-none relative z-20 bg-primary pl-2'>\n            {/* User Profile */}\n            {user && (\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  aria-label='ユーザーメニュー'\n                  className={cn(\n                    buttonVariants({ variant: 'ghost' }),\n                    'relative h-8 w-8 rounded-full p-0 flex items-center justify-center',\n                  )}\n                >\n                  <Avatar className='h-8 w-8'>\n                    <AvatarImage src={user.image} alt={user.name} />\n                    <AvatarFallback>\n                      {user.initials || user.name.slice(0, 2).toUpperCase()}\n                    </AvatarFallback>\n                  </Avatar>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent className='w-56' align='end'>\n                  <DropdownMenuGroup>\n                  <DropdownMenuLabel className='font-normal'>\n                    <div className='flex flex-col space-y-1'>\n                      <p className='text-sm font-medium leading-none'>{user.name}</p>\n                      <p className='text-xs leading-none text-muted-foreground'>{user.email}</p>\n                    </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  {userMenuItems.map((item, index) => (\n                    <DropdownMenuItem key={index} onClick={item.onClick}>\n                      {item.href ? (\n                        <a href={item.href} className='w-full h-full flex items-center'>\n                          {item.label}\n                        </a>\n                      ) : (\n                        item.label\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                  {onLogout && (\n                    <>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem onClick={onLogout}>Log out</DropdownMenuItem>\n                    </>\n                  )}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            )}\n\n            {actions}\n\n            {/* Mobile Menu Trigger (Right side) */}\n            {!isMenuLeft && menuItems.length > 0 && (\n              <MobileMenu\n                menuItems={menuItems}\n                isMenuLeft={isMenuLeft}\n                showThemeToggle={showThemeToggle}\n                showColorToggle={showColorToggle}\n                showSpaceToggle={showSpaceToggle}\n                showLanguageToggle={showLanguageToggle}\n              />\n            )}\n\n            {/* Mobile Sidebar Trigger (rightmost when no menu icon) */}\n            <SidebarTrigger className='md:hidden' />\n          </div>\n        </div>\n      </div>\n    </header>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"header.js","names":["React","_Fragment","React$1","MobileMenu","Sheet","SheetTrigger","cn","buttonVariants","Menu","SheetContent","isMenuLeft","SheetHeader","SheetTitle","menuItems","item","Button","index","showThemeToggle","showColorToggle","showSpaceToggle","Fragment","ThemeSwitcherGroup","showLanguageToggle","LanguageSwitcher","Header","props","menuPosition","className","logo","title","navItems","SpacingThemeSwitcher","ColorThemeSwitcher","ThemeModeSwitcher","user","DropdownMenu","DropdownMenuTrigger","Avatar","AvatarImage","AvatarFallback","DropdownMenuContent","DropdownMenuGroup","DropdownMenuLabel","DropdownMenuSeparator","userMenuItems","DropdownMenuItem","onLogout","actions","SidebarTrigger"],"sources":["../../../../src/tools/components/header/header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Menu } from 'lucide-react';\nimport { Button, buttonVariants } from '../ui/button';\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '../ui';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../ui/dropdown-menu';\nimport { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';\nimport {\n  ThemeSwitcherGroup,\n  ThemeModeSwitcher,\n  ColorThemeSwitcher,\n  SpacingThemeSwitcher,\n} from \"../theme\";\nimport { LanguageSwitcher } from \"../i18n/LanguageSwitcher\";\nimport { cn } from \"../../lib/utils\";\nimport { SidebarTrigger } from \"../sidebar/sidebar\";\nimport type { Locale } from '../../paraglide/runtime.js';\n\n/**\n * Host inputs and presentation settings for Header.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see Header\n */\nexport interface HeaderProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Optional logo content shown beside title.\n   */\n  logo?: React.ReactNode;\n  /**\n   * Application title; hidden below md when logo is present.\n   */\n  title?: string;\n  /**\n   * Sheet-menu placement; defaults to right.\n   */\n  menuPosition?: 'left' | 'right';\n  /**\n   * Sheet-menu entries; empty/omitted means no sheet trigger. href entries use anchors, otherwise Buttons.\n   */\n  menuItems?: { /**\n   * Visible text for the navigation/menu entry.\n   */\n  label: string; /**\n   * Host action invoked when this entry is clicked; the host owns any navigation or asynchronous work.\n   * @returns No value; complete the host callback action.\n   */\n  onClick?: () => void; /**\n   * Optional anchor destination; no router integration or authorization checks are installed.\n   */\n  href?: string; /**\n   * Optional leading sheet-menu icon; user-menu icon fields are currently ignored.\n   */\n  icon?: React.ReactNode }[];\n  /**\n   * Desktop-only navigation anchors; the host supplies href/onClick and active state.\n   */\n  navItems?: { /**\n   * Visible text for the navigation/menu entry.\n   */\n  label: string; /**\n   * Host action invoked when this entry is clicked; the host owns any navigation or asynchronous work.\n   * @returns No value; complete the host callback action.\n   */\n  onClick?: () => void; /**\n   * Optional anchor destination; no router integration or authorization checks are installed.\n   */\n  href?: string; /**\n   * Adds desktop navigation active styling when true; omitted/false uses inactive styling.\n   */\n  active?: boolean }[];\n  /**\n   * Host-supplied profile display data; omitted hides the avatar menu. It is not validated as authenticated identity.\n   */\n  user?: {\n    /**\n     * User display name; also supplies the two-character uppercase avatar fallback.\n     */\n    name: string;\n    /**\n     * Optional user email shown in the avatar menu.\n     */\n    email?: string;\n    /**\n     * Optional avatar image URL; missing/failing images use the fallback.\n     */\n    image?: string;\n    /**\n     * Optional avatar fallback text; falsy values use the first two name characters.\n     */\n    initials?: string;\n  };\n  /**\n   * Avatar dropdown entries; href creates an anchor and onClick is attached to the menu item. Accepted icon fields are currently ignored.\n   */\n  userMenuItems?: { /**\n   * Visible text for the navigation/menu entry.\n   */\n  label: string; /**\n   * Host action invoked when this entry is clicked; the host owns any navigation or asynchronous work.\n   * @returns No value; complete the host callback action.\n   */\n  onClick?: () => void; /**\n   * Optional anchor destination; no router integration or authorization checks are installed.\n   */\n  href?: string; /**\n   * Optional leading sheet-menu icon; user-menu icon fields are currently ignored.\n   */\n  icon?: React.ReactNode }[];\n  /**\n   * Called from the optional logout menu item; the host performs logout and invalidates its own session/cache.\n   * @returns No value; complete the host callback action.\n   */\n  onLogout?: () => void;\n  /**\n   * Shows the main and sheet theme-mode controls; defaults to true.\n   */\n  showThemeToggle?: boolean;\n  /**\n   * Shows the main and sheet palette controls; defaults to true.\n   */\n  showColorToggle?: boolean;\n  /**\n   * Shows the main and sheet spacing controls; defaults to true.\n   */\n  showSpaceToggle?: boolean;\n  /**\n   * Shows the main and sheet locale toggles; defaults to true.\n   */\n  showLanguageToggle?: boolean;\n  /**\n   * Controlled locale callback forwarded only to the main header toggle; the sheet toggle uses global runtime behavior.\n   * @param lang - Host callback input described above.\n   * @returns No value; complete the host callback action.\n   */\n  onLanguageChange?: (lang: Locale) => void;\n  /**\n   * Locale override forwarded only to the main header toggle; omitted reads runtime state.\n   */\n  currentLanguage?: Locale;\n  /**\n   * Additional action content displayed in the right action group.\n   */\n  actions?: React.ReactNode;\n}\n\ntype MenuItem = NonNullable<HeaderProps['menuItems']>[number];\n\nconst MobileMenu: React.FC<{\n  menuItems: MenuItem[];\n  isMenuLeft: boolean;\n  showThemeToggle: boolean;\n  showColorToggle: boolean;\n  showSpaceToggle: boolean;\n  showLanguageToggle: boolean;\n}> = ({\n  menuItems,\n  isMenuLeft,\n  showThemeToggle,\n  showColorToggle,\n  showSpaceToggle,\n  showLanguageToggle,\n}) => (\n  <Sheet>\n    <SheetTrigger className={cn(buttonVariants({ variant: 'ghost', size: 'icon' }), 'shrink-0')}>\n      <Menu className='h-5 w-5' />\n      <span className='sr-only'>Toggle menu</span>\n    </SheetTrigger>\n    <SheetContent side={isMenuLeft ? 'left' : 'right'}>\n      <SheetHeader>\n        <SheetTitle>Menu</SheetTitle>\n      </SheetHeader>\n      <div className='grid gap-4 py-4'>\n        {menuItems.map((item, index) => (\n          <React.Fragment key={index}>\n            {item.href ? (\n              <a\n                href={item.href}\n                className={cn(buttonVariants({ variant: 'ghost' }), 'justify-start')}\n                onClick={item.onClick}\n              >\n                {item.icon && <span className='mr-2'>{item.icon}</span>}\n                {item.label}\n              </a>\n            ) : (\n              <Button variant='ghost' className='justify-start' onClick={item.onClick}>\n                {item.icon && <span className='mr-2'>{item.icon}</span>}\n                {item.label}\n              </Button>\n            )}\n          </React.Fragment>\n        ))}\n        {(showThemeToggle || showColorToggle || showSpaceToggle) && (\n          <>\n            <div className='h-px bg-border my-2' />\n            <div className='px-2'>\n              <ThemeSwitcherGroup\n                showThemeMode={showThemeToggle}\n                showColorTheme={showColorToggle}\n                showSpacingTheme={showSpaceToggle}\n                modeVariant='icon-group'\n                colorVariant='icon-group'\n                spacingVariant='icon-group'\n              />\n            </div>\n          </>\n        )}\n        {showLanguageToggle && (\n          <div className='px-2'>\n            <LanguageSwitcher />\n          </div>\n        )}\n      </div>\n    </SheetContent>\n  </Sheet>\n);\n\n/**\n * Renders a sticky application header with navigation, theme/locale controls and an optional user menu.\n * @param props - Header configuration and native header attributes; className customizes styling, and children are replaced by the built-in layout. Wrapper defaults: menuPosition='right', menuItems=[], navItems=[], userMenuItems=[], showThemeToggle=true, showColorToggle=true, showSpaceToggle=true, showLanguageToggle=true.\n * @returns The rendered Header composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS. SidebarProvider is required because the header always renders SidebarTrigger, even when hidden by desktop CSS. ThemeProvider supplies working theme controls; locale updates follow LanguageSwitcher. The host owns routing, identity data and logout effects; user is display data, not proof of an authenticated session. Header children are replaced by its built-in layout. navItems are desktop-only anchors; menuItems populate the sheet menu. The sheet language switcher does not receive currentLanguage/onLanguageChange, so those props control only the main header switcher. userMenuItems.icon is accepted but not rendered.\n * @example\n * ```tsx\n * import { ThemeProvider } from '@alneas/appkit-react/ui/theme';\n * import { SidebarProvider } from '@alneas/appkit-react/tools/sidebar';\n * import { Header } from '@alneas/appkit-react/tools/header';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<ThemeProvider><SidebarProvider><Header title=\"Project\" navItems={[{ label: \"Home\", href: \"/\", active: true }]} menuItems={[{ label: \"Help\", href: \"/help\" }]} /></SidebarProvider></ThemeProvider>);\n * }\n * ```\n */\nexport function Header({\n  className,\n  logo,\n  title,\n  menuPosition = 'right',\n  menuItems = [],\n  navItems = [],\n  user,\n  userMenuItems = [],\n  onLogout,\n  showThemeToggle = true,\n  showColorToggle = true,\n  showSpaceToggle = true,\n  showLanguageToggle = true,\n  onLanguageChange,\n  currentLanguage,\n  actions,\n  ...props\n}: HeaderProps) {\n  // If logo is on the left (default/implied), menu icon should be on the right by default?\n  // Requirement 4: \"menu icon in left or right end(choosable. in right if logo is in left)\"\n  // If logo is provided, it usually sits on the left. So menuPosition default 'right' makes sense.\n  // If menuPosition is 'left', we should probably ensure logo isn't conflicting or logo is hidden?\n  // Let's assume user handles logic or we prioritize menuPosition.\n  // However, \"in right if logo is in left\" implies conditional default.\n  // We already defaulted menuPosition to 'right' in props.\n\n  // Determine effective menu position.\n  // If logo is present and menuPosition is undefined, it defaults to right.\n\n  const isMenuLeft = menuPosition === 'left';\n\n  return (\n    <header\n      className={cn(\n        'sticky top-0 z-40 w-full border-b bg-primary text-primary-foreground shadow-sm',\n        className,\n      )}\n      {...props}\n    >\n      <div className='flex h-16 items-center justify-between px-4 gap-4 overflow-hidden'>\n        <div className='flex items-center gap-4 min-w-0 flex-shrink-0 relative z-10 bg-primary pr-4'>\n          {/* Left Section */}\n          {isMenuLeft && menuItems.length > 0 && (\n            <div className='flex-shrink-0'>\n              <MobileMenu\n                menuItems={menuItems}\n                isMenuLeft={isMenuLeft}\n                showThemeToggle={showThemeToggle}\n                showColorToggle={showColorToggle}\n                showSpaceToggle={showSpaceToggle}\n                showLanguageToggle={showLanguageToggle}\n              />\n            </div>\n          )}\n\n          {logo && (\n            <div className='flex items-center gap-2 min-w-0'>\n              {logo}\n              {title && (\n                <span className='text-lg font-bold hidden md:inline-block truncate'>{title}</span>\n              )}\n            </div>\n          )}\n          {/* Title without logo if applicable */}\n          {!logo && title && (\n            <div className='flex items-center gap-2 min-w-0'>\n              <span className='text-lg font-bold truncate'>{title}</span>\n            </div>\n          )}\n\n          {/* Center/Nav Section - hidden on mobile */}\n          <nav className='flex items-center gap-6 text-sm font-medium hidden md:flex'>\n            {navItems.map((item, index) => (\n              <a\n                key={index}\n                href={item.href}\n                onClick={item.onClick}\n                className={cn(\n                  'transition-colors hover:text-primary-foreground/80',\n                  item.active\n                    ? 'text-primary-foreground font-bold underline underline-offset-4'\n                    : 'text-primary-foreground/60',\n                )}\n              >\n                {item.label}\n              </a>\n            ))}\n          </nav>\n        </div>\n\n        {/* Right Section - flex-row-reverse ensures essential items stay at right edge */}\n        <div className='ml-auto flex items-center justify-end gap-2 min-w-0 flex-shrink'>\n          {/* Switchers - shrink before title */}\n          <div className='flex items-center gap-2 min-w-0 flex-shrink overflow-hidden justify-end'>\n            {showSpaceToggle && <SpacingThemeSwitcher variant='toggle' withBackground />}\n            {showColorToggle && <ColorThemeSwitcher variant='toggle' withBackground />}\n            {showThemeToggle && <ThemeModeSwitcher variant='toggle' withBackground />}\n            {showLanguageToggle && (\n              <LanguageSwitcher\n                onLanguageChange={onLanguageChange}\n                currentLanguage={currentLanguage}\n              />\n            )}\n          </div>\n\n          {/* Essential actions - always visible */}\n          <div className='flex items-center gap-2 flex-none relative z-20 bg-primary pl-2'>\n            {/* User Profile */}\n            {user && (\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  aria-label={`${user.initials || user.name.slice(0, 2).toUpperCase()} ${user.name} ユーザーメニュー`}\n                  className={cn(\n                    buttonVariants({ variant: 'ghost' }),\n                    'relative h-8 w-8 rounded-full p-0 flex items-center justify-center',\n                  )}\n                >\n                  <Avatar className='h-8 w-8'>\n                    <AvatarImage src={user.image} alt={user.name} />\n                    <AvatarFallback>\n                      {user.initials || user.name.slice(0, 2).toUpperCase()}\n                    </AvatarFallback>\n                  </Avatar>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent className='w-56' align='end'>\n                  <DropdownMenuGroup>\n                  <DropdownMenuLabel className='font-normal'>\n                    <div className='flex flex-col space-y-1'>\n                      <p className='text-sm font-medium leading-none'>{user.name}</p>\n                      <p className='text-xs leading-none text-muted-foreground'>{user.email}</p>\n                    </div>\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  {userMenuItems.map((item, index) => (\n                    <DropdownMenuItem key={index} onClick={item.onClick}>\n                      {item.href ? (\n                        <a href={item.href} className='w-full h-full flex items-center'>\n                          {item.label}\n                        </a>\n                      ) : (\n                        item.label\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                  {onLogout && (\n                    <>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem onClick={onLogout}>Log out</DropdownMenuItem>\n                    </>\n                  )}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            )}\n\n            {actions}\n\n            {/* Mobile Menu Trigger (Right side) */}\n            {!isMenuLeft && menuItems.length > 0 && (\n              <MobileMenu\n                menuItems={menuItems}\n                isMenuLeft={isMenuLeft}\n                showThemeToggle={showThemeToggle}\n                showColorToggle={showColorToggle}\n                showSpaceToggle={showSpaceToggle}\n                showLanguageToggle={showLanguageToggle}\n              />\n            )}\n\n            {/* Mobile Sidebar Trigger (rightmost when no menu icon) */}\n            <SidebarTrigger className='md:hidden' />\n          </div>\n        </div>\n      </div>\n    </header>\n  );\n}\n"],"mappings":"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"}

package/dist/tools/components/i18n/LanguageSwitcher.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LanguageSwitcher.cjs","names":["getLocale","Button","Globe","require_ui_components_ui_button_components","require_runtime","react_jsx_runtime","lucide_react","LanguageSwitcher","activeLang","currentLanguage","displayLang","newLang","onLanguageChange"],"sources":["../../../../src/tools/components/i18n/LanguageSwitcher.tsx"],"sourcesContent":["import { Button } from '../ui/button';\nimport { Globe } from 'lucide-react';\nimport { getLocale, setLocale, Locale } from '../../paraglide/runtime.js';\n\n/**\n * Props for LanguageSwitcher\n */\nexport interface LanguageSwitcherProps {\n  /**\n   * Optional callback when language changes.\n   * If provided, the internal state update is skipped (controlled mode).\n   * If not provided, it updates the global paraglide state.\n   */\n  onLanguageChange?: (lang: Locale) => void;\n\n  /**\n   * Current language (for controlled mode).\n   * Defaults to global paraglide state if not provided.\n   */\n  currentLanguage?: Locale;\n\n  /**\n   * Optional className for the button.\n   */\n  className?: string;\n}\n\n/**\n * 言語切り替えボタン\n *\n * Paraglide.js と連携して動作します。現在のen/ja/zhをそれぞれEnglish/日本語/中文で表示します。\n * 切替先は従来どおりjaからen、それ以外からjaです。\n * SSR also reads currentLanguage or the host runtime. Hosts must isolate request\n * locale state and initialize the same locale before hydration.\n * @example\n * ```tsx\n * import { LanguageSwitcher } from '@alneas/appkit-react/tools/i18n';\n * <LanguageSwitcher currentLanguage=\"zh\" onLanguageChange={locale => console.log(locale)} />;\n * ```\n */\nexport function LanguageSwitcher({\n  onLanguageChange,\n  currentLanguage,\n  className,\n}: LanguageSwitcherProps) {\n  const activeLang = currentLanguage ?? getLocale();\n  const displayLang = activeLang;\n\n  const toggleLanguage = () => {\n    const newLang: Locale = activeLang === 'ja' ? 'en' : 'ja';\n\n    if (onLanguageChange) {\n      onLanguageChange(newLang);\n    } else {\n      setLocale(newLang);\n    }\n  };\n\n  return (\n    <Button\n      variant='ghost'\n      size='sm'\n      className={className}\n      onClick={toggleLanguage}\n      title={displayLang === 'ja' ? 'Switch to English' : '日本語に切り替え'}\n    >\n      <Globe className='w-4 h-4 mr-2' />\n      {displayLang === 'ja' ? '日本語' : displayLang === 'zh' ? '中文' : 'English'}\n    </Button>\n  );\n}\n"],"mappings":"A,yPAwCA,SAAgBO,EAAiB,CAC/B,mBACA,kBACA,aACwB,CACxB,IAAMC,EAAaC,GAAmBT,EAAAA,UAAU,EAC1CU,EAAcF,EAYpB,OACE,EAAAH,EAAA,KAAA,CAACJ,EAAAA,OAAD,CACE,QAAQ,QACR,KAAK,KACM,YACX,YAfyB,CAC3B,IAAMU,EAAkBH,IAAe,KAAO,KAAO,KAEjDI,EACFA,EAAiBD,CAAO,EAExBP,EAAA,UAAUO,CAAO,CAErB,EAQI,MAAOD,IAAgB,KAAO,oBAAsB,WALtD,SAAA,EAOE,EAAAL,EAAA,IAAA,CAACH,EAAAA,MAAD,CAAO,UAAU,cAAgB,CAAA,EAChCQ,IAAgB,KAAO,MAAQA,IAAgB,KAAO,KAAO,SACxD,C,EAEZ,C"}
+{"version":3,"file":"LanguageSwitcher.cjs","names":["getLocale","Button","Globe","require_ui_components_ui_button_components","require_runtime","react_jsx_runtime","lucide_react","LanguageSwitcher","activeLang","currentLanguage","displayLang","newLang","onLanguageChange"],"sources":["../../../../src/tools/components/i18n/LanguageSwitcher.tsx"],"sourcesContent":["import { Button } from '../ui/button';\nimport { Globe } from 'lucide-react';\nimport { getLocale, setLocale, Locale } from '../../paraglide/runtime.js';\n\n/**\n * Host inputs and presentation settings for LanguageSwitcher.\n * @see LanguageSwitcher\n */\nexport interface LanguageSwitcherProps {\n  /**\n   * Called with en when the current locale is ja, otherwise ja. When supplied, suppresses the built-in global setLocale call; the host must update controlled state.\n   * @param lang - Host callback input described above.\n   * @returns No value; complete the host callback action.\n   */\n  onLanguageChange?: (lang: Locale) => void;\n\n  /**\n   * Current locale; omitted reads getLocale from the configured Paraglide runtime.\n   */\n  currentLanguage?: Locale;\n\n  /**\n   * Additional classes on the language toggle button.\n   */\n  className?: string;\n}\n\n/**\n * Displays the current locale and toggles Japanese to English or any other locale to Japanese.\n * @param props - Optional controlled locale, change callback and button classes; see LanguageSwitcherProps.\n * @returns The rendered LanguageSwitcher composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Import Appkit CSS. currentLanguage overrides getLocale; onLanguageChange suppresses the built-in setLocale call, so the host must update controlled locale state. Without the callback the Paraglide runtime performs its configured locale update/navigation. Locale state during SSR is host-owned and must be isolated per request and initialized consistently before hydration. The label displays Japanese/Chinese/English, but the toggle does not cycle through Chinese.\n * @example\n * ```tsx\n * import { useState } from 'react';\n * import { LanguageSwitcher } from '@alneas/appkit-react/tools/i18n';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   const [locale, setLocale] = useState<\"en\" | \"ja\" | \"zh\">(\"en\");\n *   return (<LanguageSwitcher currentLanguage={locale} onLanguageChange={setLocale} />);\n * }\n * ```\n */\nexport function LanguageSwitcher({\n  onLanguageChange,\n  currentLanguage,\n  className,\n}: LanguageSwitcherProps) {\n  const activeLang = currentLanguage ?? getLocale();\n  const displayLang = activeLang;\n\n  const toggleLanguage = () => {\n    const newLang: Locale = activeLang === 'ja' ? 'en' : 'ja';\n\n    if (onLanguageChange) {\n      onLanguageChange(newLang);\n    } else {\n      setLocale(newLang);\n    }\n  };\n\n  return (\n    <Button\n      variant='ghost'\n      size='sm'\n      className={className}\n      onClick={toggleLanguage}\n      title={displayLang === 'ja' ? 'Switch to English' : '日本語に切り替え'}\n    >\n      <Globe className='w-4 h-4 mr-2' />\n      {displayLang === 'ja' ? '日本語' : displayLang === 'zh' ? '中文' : 'English'}\n    </Button>\n  );\n}\n"],"mappings":"A,yPA4CA,SAAgBO,EAAiB,CAC/B,mBACA,kBACA,aACwB,CACxB,IAAMC,EAAaC,GAAmBT,EAAAA,UAAU,EAC1CU,EAAcF,EAYpB,OACE,EAAAH,EAAA,KAAA,CAACJ,EAAAA,OAAD,CACE,QAAQ,QACR,KAAK,KACM,YACX,YAfyB,CAC3B,IAAMU,EAAkBH,IAAe,KAAO,KAAO,KAEjDI,EACFA,EAAiBD,CAAO,EAExBP,EAAA,UAAUO,CAAO,CAErB,EAQI,MAAOD,IAAgB,KAAO,oBAAsB,WALtD,SAAA,EAOE,EAAAL,EAAA,IAAA,CAACH,EAAAA,MAAD,CAAO,UAAU,cAAgB,CAAA,EAChCQ,IAAgB,KAAO,MAAQA,IAAgB,KAAO,KAAO,SACxD,C,EAEZ,C"}