@aiquants/menu-bar 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 AIQuants
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,337 @@
+# @aiquants/menu-bar
+
+A React menu bar component with authentication support and theming for modern web applications.
+
+## Key Features
+
+- **Menu Navigation**: Collapsible menu with smooth animations and hierarchical structure
+- **Dark/Light Theme**: Comprehensive theming support with scoped CSS
+- **Session Management**: Built-in session information display with user profiles
+- **Responsive Design**: Mobile-friendly with overlay support
+- **TypeScript Support**: Full TypeScript definitions included
+- **React Router Integration**: Built for React Router with generic link component support
+- **CSS Scoped**: All styles are scoped to prevent conflicts with host applications
+
+## Installation
+
+```bash
+npm install @aiquants/menu-bar
+```
+
+## Exports
+
+This package exports the following components and types:
+
+```tsx
+// Components
+export { MenuBar } from '@aiquants/menu-bar';
+export { SessionInfo, DefaultLink } from '@aiquants/menu-bar';
+
+// Types
+export type { IMenu, ISubmenu } from '@aiquants/menu-bar';
+export type { Theme } from '@aiquants/menu-bar';
+export type { SessionInfoProps, LinkProps } from '@aiquants/menu-bar';
+export type { GoogleUserProfile, UserPhoto } from '@aiquants/menu-bar';
+
+// CSS (import separately)
+import '@aiquants/menu-bar/css';
+```
+
+## Basic Usage
+
+```tsx
+import React, { useState } from 'react';
+import { MenuBar } from '@aiquants/menu-bar';
+import '@aiquants/menu-bar/css';
+
+function App() {
+  const [theme, setTheme] = useState('light');
+
+  const menuList = [
+    {
+      id: 1,
+      title: 'Dashboard',
+      href: '/dashboard',
+      submenu: []
+    },
+    {
+      id: 2,
+      title: 'Data',
+      submenu: [
+        { subid: 1, title: 'Reports', href: '/data/reports' },
+        { subid: 2, title: 'Analytics', href: '/data/analytics' }
+      ]
+    }
+  ];
+
+  const toggleTheme = () => {
+    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
+  };
+
+  const handleSignout = () => {
+    console.log('Signing out...');
+  };
+
+  return (
+    <div className="app">
+      <MenuBar
+        menuList={menuList}
+        theme={theme}
+        toggleTheme={toggleTheme}
+        onClickSignout={handleSignout}
+        menuHeader={<div>My App</div>}
+      />
+      {/* Your app content */}
+    </div>
+  );
+}
+```
+
+## Props
+
+### MenuBar Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `menuList` | `IMenu[]` | Yes | Array of menu items to display |
+| `theme` | `'light' \| 'dark'` | Yes | Theme mode for the menu bar |
+| `toggleTheme` | `() => void` | Yes | Function to toggle between light and dark themes |
+| `onClickSignout` | `() => void` | Yes | Callback function for sign out action |
+| `menuHeader` | `React.ReactNode` | No | Optional header content for the menu |
+| `isMenuhide` | `boolean` | No | Whether to hide the menu bar entirely |
+
+### IMenu Type
+
+```tsx
+interface IMenu {
+  id: number;
+  title: string;
+  href?: string;
+  submenu: ISubmenu[];
+}
+```
+
+### ISubmenu Type
+
+```tsx
+interface ISubmenu {
+  subid: number;
+  title?: string;
+  href: string;
+  mark?: string;
+  new?: boolean;
+}
+```
+
+### GoogleUserProfile Type
+
+```tsx
+interface GoogleUserProfile {
+  displayName: string;
+  photos: UserPhoto[];
+  id?: string;
+}
+
+interface UserPhoto {
+  value: string;
+}
+```
+
+### SessionInfoProps Type
+
+```tsx
+interface SessionInfoProps {
+  user: GoogleUserProfile | null;
+  onLogout?: () => void;
+  LinkComponent: React.ComponentType<LinkProps>;
+}
+
+interface LinkProps {
+  to: string;
+  className?: string;
+  children: React.ReactNode;
+}
+```
+
+## Theming
+
+The menu bar supports both light and dark themes. All styles are scoped with the `.aiquants-menu-bar` class to prevent conflicts with your application's styles.
+
+### Custom Styling
+
+You can override the default styles by targeting the scoped classes:
+
+```css
+.aiquants-menu-bar {
+  /* Custom menu bar styles */
+}
+
+.aiquants-menu-bar.theme-dark {
+  /* Dark theme overrides */
+}
+
+.aiquants-menu-bar.theme-light {
+  /* Light theme overrides */
+}
+```
+
+## Usage with React Router
+
+```tsx
+import React, { useState } from 'react';
+import { MenuBar } from '@aiquants/menu-bar';
+
+function App() {
+  const [theme, setTheme] = useState('light');
+
+  const menuList = [
+    {
+      id: 1,
+      title: 'Home',
+      href: '/',
+      submenu: []
+    },
+    {
+      id: 2,
+      title: 'Products',
+      submenu: [
+        { subid: 1, title: 'All Products', href: '/products' },
+        { subid: 2, title: 'Categories', href: '/products/categories' }
+      ]
+    }
+  ];
+
+  return (
+    <MenuBar
+      menuList={menuList}
+      theme={theme}
+      toggleTheme={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+      onClickSignout={() => console.log('Signout')}
+    />
+  );
+}
+```
+
+## Advanced Usage
+
+### With Menu Header
+
+```tsx
+import React from 'react';
+
+const menuHeader = (
+  <div className="flex items-center gap-2 p-4">
+    <img src="/logo.png" alt="Logo" className="w-8 h-8" />
+    <span className="font-bold">My Application</span>
+  </div>
+);
+
+<MenuBar
+  menuList={menuList}
+  menuHeader={menuHeader}
+  theme={theme}
+  toggleTheme={toggleTheme}
+  onClickSignout={handleSignout}
+/>
+```
+
+### Hiding the Menu
+
+```tsx
+import React from 'react';
+
+<MenuBar
+  menuList={menuList}
+  theme={theme}
+  toggleTheme={toggleTheme}
+  onClickSignout={handleSignout}
+  isMenuhide={shouldHideMenu}
+/>
+```
+
+## Components
+
+### MenuBar
+
+The main menu bar component that includes:
+
+- Menu toggle button with hamburger icon
+- Company logo and navigation menu
+- Theme toggle functionality
+- Responsive overlay for mobile devices
+- Sign out functionality
+
+### SessionInfo
+
+A standalone session information component that displays:
+
+- User avatar/profile picture
+- User display name
+- Logout functionality with customizable link component
+
+```tsx
+import { SessionInfo } from '@aiquants/menu-bar';
+
+<SessionInfo
+  user={{
+    displayName: "John Doe",
+    photos: [{ value: "https://example.com/avatar.jpg" }]
+  }}
+  onLogout={() => console.log('Logout')}
+  LinkComponent={({ to, children, ...props }) => (
+    <a href={to} {...props}>{children}</a>
+  )}
+/>
+```
+
+### Menu Features
+
+- **Hierarchical Menu Structure**: Support for main menu items with submenus
+- **Dynamic Navigation**: Menu items can have direct links or submenu collections
+- **Visual Indicators**: Support for special marks (lock icon, etc.) and "new" badges
+- **External Links**: Option to open links in new tabs
+
+## CSS Classes
+
+All CSS classes are scoped with `.aiquants-` prefix:
+
+- `.aiquants-menu-bar` - Main container
+- `.aiquants-menu-switch` - Menu toggle button
+- `.aiquants-menu-content` - Menu content area
+- `.aiquants-session-info` - Session information
+- `.aiquants-overlay-shadow` - Mobile overlay
+
+## Browser Support
+
+- Chrome/Edge 88+
+- Firefox 78+
+- Safari 14+
+- Node.js 18+
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build the package
+npm run build
+
+# Run type checking
+npm run typecheck
+
+# Clean build files
+npm run clean
+```
+
+## License
+
+MIT License - see [LICENSE](LICENSE) file for details.
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## Author
+
+fehde-k

package/dist/MenuBar.d.ts

@@ -0,0 +1,31 @@
+import { IMenu } from './contents/MenuList';
+import { Theme } from './types';
+
+/**
+ * @interface IMenuBarProps
+ * @description Props for the MenuBar component.
+ * @description MenuBar コンポーネントの Props。
+ * @property {IMenu[]} menuList - The list of menu items. メニュー項目のリスト。
+ * @property {React.ReactNode} [menuHeader] - The header content of the menu. メニューのヘッダーコンテンツ。
+ * @property {() => void} onClickSignout - Function to handle sign out. サインアウトを処理する関数。
+ * @property {boolean} [isMenuhide] - Whether to hide the menu. メニューを非表示にするかどうか。
+ * @property {Theme} theme - The current theme.
+ * @property {() => void} toggleTheme - Function to toggle the theme.
+ */
+interface IMenuBarProps {
+    menuList: IMenu[];
+    menuHeader?: React.ReactNode;
+    onClickSignout(): void;
+    isMenuhide?: boolean;
+    theme: Theme;
+    toggleTheme: () => void;
+}
+/**
+ * @function MenuBar
+ * @description A component that renders the main menu bar.
+ * @description メインメニューバーを描画するコンポーネント。
+ * @param {IMenuBarProps} props - The props for the component.
+ * @returns {React.JSX.Element} The rendered menu bar.
+ */
+export declare const MenuBar: (props: IMenuBarProps) => React.JSX.Element;
+export {};

package/dist/components/SessionInfo.d.ts

@@ -0,0 +1,37 @@
+import { GoogleUserProfile } from '../types/user';
+
+/**
+ * Link component props interface.
+ * リンクコンポーネントのプロパティ。
+ */
+export interface LinkProps {
+    /** Link destination URL */
+    to: string;
+    /** CSS class name */
+    className?: string;
+    /** Link content */
+    children: React.ReactNode;
+}
+/**
+ * Generic Link component that can be replaced with router-specific implementation.
+ * ルーター固有の実装で置き換え可能な汎用リンクコンポーネント。
+ */
+export declare const DefaultLink: ({ to, className, children }: LinkProps) => React.JSX.Element;
+/**
+ * SessionInfo component props interface.
+ * ユーザーセッション情報を表示するコンポーネントのプロパティ。
+ */
+export interface SessionInfoProps {
+    /** User profile information from Google OAuth */
+    user: GoogleUserProfile | null;
+    /** Custom Link component (optional, defaults to DefaultLink) */
+    LinkComponent?: React.ComponentType<LinkProps>;
+}
+/**
+ * SessionInfo component for displaying user session information.
+ * Displays user profile photo, navigation links, and user name when authenticated.
+ *
+ * ユーザーセッション情報を表示するコンポーネント。
+ * 認証時にプロフィール写真、ナビゲーションリンク、ユーザー名を表示する。
+ */
+export declare const SessionInfo: (props: SessionInfoProps) => React.JSX.Element;

package/dist/contents/MenuContent.d.ts

@@ -0,0 +1,32 @@
+import { IMenu } from './MenuList';
+import { Theme } from '../types';
+
+/**
+ * @interface IMenuContentProps
+ * @description Props for the MenuContent component.
+ * @description MenuContent コンポーネントの Props。
+ * @property {IMenu[]} menuList - The list of menu items. メニュー項目のリスト。
+ * @property {React.ReactNode} [menuHeader] - The header content of the menu. メニューのヘッダーコンテンツ。
+ * @property {boolean} open - Whether the menu is open. メニューが開いているかどうか。
+ * @property {() => void} onMenuSelected - Function to handle menu item selection. メニュー項目選択を処理する関数。
+ * @property {() => void} onClickSignout - Function to handle sign out. サインアウトを処理する関数。
+ * @property {Theme} theme - The current theme.
+ * @property {() => void} toggleTheme - Function to toggle the theme.
+ */
+interface IMenuContentProps {
+    menuList: IMenu[];
+    menuHeader?: React.ReactNode;
+    open: boolean;
+    onMenuSelected(): void;
+    onClickSignout(): void;
+    theme: Theme;
+    toggleTheme: () => void;
+}
+/**
+ * Renders the content of the menu bar.
+ * メニューバーのコンテンツを描画します。
+ * @param {IMenuContentProps} props - The properties for the MenuContent component.
+ * @returns {React.JSX.Element} The rendered menu content.
+ */
+export declare const MenuContent: (props: IMenuContentProps) => React.JSX.Element;
+export {};

package/dist/contents/MenuList.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @interface ISubmenu
+ * @description Interface for a submenu item.
+ * @description サブメニュー項目のインターフェース。
+ * @property {number} subid - The unique ID of the submenu item. サブメニュー項目の一意の ID。
+ * @property {string} [title] - The title of the submenu item. サブメニュー項目のタイトル。
+ * @property {string} href - The URL for the submenu item. サブメニュー項目の URL。
+ * @property {string} [mark] - The type of mark to display next to the item. 項目の横に表示するマークの種類。
+ * @property {boolean} [new] - Whether the item is a new link. 新しいリンクかどうか。
+ */
+export interface ISubmenu {
+    subid: number;
+    title?: string;
+    href: string;
+    mark?: string;
+    new?: boolean;
+}
+/**
+ * @interface IMenu
+ * @description Interface for a menu item.
+ * @description メニュー項目のインターフェース。
+ * @property {number} id - The unique ID of the menu item. メニュー項目の一意の ID。
+ * @property {string} title - The title of the menu item. メニュー項目のタイトル。
+ * @property {string} [href] - The URL for the menu item. メニュー項目の URL。
+ * @property {ISubmenu[]} submenu - The list of submenu items. サブメニュー項目のリスト。
+ */
+export interface IMenu {
+    id: number;
+    title: string;
+    href?: string;
+    submenu: ISubmenu[];
+}
+/**
+ * @interface IMenuListProps
+ * @description Props for the MenuList component.
+ * @description MenuList コンポーネントの Props。
+ * @property {IMenu[]} menuList - The list of menu items. メニュー項目のリスト。
+ * @property {() => void} [onMenuSelected] - Function to handle menu item selection. メニュー項目選択を処理する関数。
+ */
+interface IMenuListProps {
+    menuList: IMenu[];
+    onMenuSelected?(): void;
+}
+/**
+ * @function MenuList
+ * @description A component that renders the list of menu items.
+ * @description メニュー項目のリストを描画するコンポーネント。
+ * @param {IMenuListProps} props - The props for the component.
+ * @returns {React.JSX.Element} The rendered menu list.
+ */
+export declare const MenuList: (props: IMenuListProps) => React.JSX.Element;
+export {};

package/dist/contents/OverlayShadow.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @module OverlayShadow
+ * @description This module provides an overlay shadow component.
+ * @description このモジュールは、オーバーレイシャドウコンポーネントを提供します。
+ */
+/**
+ * @interface IOverlayProps
+ * @description Props for the OverlayShadow component.
+ * @description OverlayShadow コンポーネントの Props。
+ * @property {boolean} isOverlay - Whether the overlay is visible. オーバーレイが表示されているかどうか。
+ * @property {() => void} [onOverlayClick] - Function to handle overlay click. オーバーレイのクリックを処理する関数。
+ */
+interface IOverlayProps {
+    isOverlay: boolean;
+    onOverlayClick?(): void;
+}
+/**
+ * @function OverlayShadow
+ * @description A component that renders an overlay shadow.
+ * @description オーバーレイシャドウを描画するコンポーネント。
+ * @param {IOverlayProps} props - The props for the component.
+ * @returns {React.JSX.Element} The rendered overlay shadow.
+ */
+export declare const OverlayShadow: (props: IOverlayProps) => React.JSX.Element;
+export {};

package/dist/elements/MenuSwitch.d.ts

@@ -0,0 +1,10 @@
+import { Theme } from '../types';
+
+interface IMenuSwitchProps {
+    open: boolean;
+    onMenuOpen?: () => void;
+    onMenuClose?: () => void;
+    theme: Theme;
+}
+export declare const MenuSwitch: (props: IMenuSwitchProps) => React.JSX.Element;
+export {};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { MenuBar } from './MenuBar';
+export type { IMenu, ISubmenu } from './contents/MenuList';
+export type { Theme } from './types';
+export { SessionInfo, DefaultLink } from './components/SessionInfo';
+export type { SessionInfoProps, LinkProps } from './components/SessionInfo';
+export type { GoogleUserProfile, UserPhoto } from './types/user';

package/dist/index.es.js

@@ -0,0 +1,414 @@
+import ce, { useRef as N, useCallback as k, useEffect as V, useState as X, useMemo as ie } from "react";
+import { Link as B } from "react-router-dom";
+import { Link as ue, Lock as de, Download as fe, BarChart as me, Table as xe, FileText as z } from "lucide-react";
+var O = { exports: {} }, _ = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var U;
+function he() {
+  if (U) return _;
+  U = 1;
+  var s = Symbol.for("react.transitional.element"), a = Symbol.for("react.fragment");
+  function o(f, m, l) {
+    var c = null;
+    if (l !== void 0 && (c = "" + l), m.key !== void 0 && (c = "" + m.key), "key" in m) {
+      l = {};
+      for (var t in m)
+        t !== "key" && (l[t] = m[t]);
+    } else l = m;
+    return m = l.ref, {
+      $$typeof: s,
+      type: f,
+      key: c,
+      ref: m !== void 0 ? m : null,
+      props: l
+    };
+  }
+  return _.Fragment = a, _.jsx = o, _.jsxs = o, _;
+}
+var T = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var J;
+function pe() {
+  return J || (J = 1, process.env.NODE_ENV !== "production" && function() {
+    function s(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === oe ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case R:
+          return "Fragment";
+        case Z:
+          return "Profiler";
+        case E:
+          return "StrictMode";
+        case re:
+          return "Suspense";
+        case ne:
+          return "SuspenseList";
+        case se:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case S:
+            return "Portal";
+          case K:
+            return (e.displayName || "Context") + ".Provider";
+          case Q:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case ee:
+            var n = e.render;
+            return e = e.displayName, e || (e = n.displayName || n.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case te:
+            return n = e.displayName || null, n !== null ? n : s(e.type) || "Memo";
+          case q:
+            n = e._payload, e = e._init;
+            try {
+              return s(e(n));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function a(e) {
+      return "" + e;
+    }
+    function o(e) {
+      try {
+        a(e);
+        var n = !1;
+      } catch {
+        n = !0;
+      }
+      if (n) {
+        n = console;
+        var u = n.error, x = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return u.call(
+          n,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          x
+        ), a(e);
+      }
+    }
+    function f(e) {
+      if (e === R) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === q)
+        return "<...>";
+      try {
+        var n = s(e);
+        return n ? "<" + n + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function m() {
+      var e = C.A;
+      return e === null ? null : e.getOwner();
+    }
+    function l() {
+      return Error("react-stack-top-frame");
+    }
+    function c(e) {
+      if (I.call(e, "key")) {
+        var n = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (n && n.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function t(e, n) {
+      function u() {
+        Y || (Y = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          n
+        ));
+      }
+      u.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: u,
+        configurable: !0
+      });
+    }
+    function i() {
+      var e = s(this.type);
+      return $[e] || ($[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function p(e, n, u, x, j, v, P, L) {
+      return u = v.ref, e = {
+        $$typeof: y,
+        type: e,
+        key: n,
+        props: v,
+        _owner: j
+      }, (u !== void 0 ? u : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: i
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: P
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: L
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function d(e, n, u, x, j, v, P, L) {
+      var h = n.children;
+      if (h !== void 0)
+        if (x)
+          if (ae(h)) {
+            for (x = 0; x < h.length; x++)
+              g(h[x]);
+            Object.freeze && Object.freeze(h);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else g(h);
+      if (I.call(n, "key")) {
+        h = s(e);
+        var w = Object.keys(n).filter(function(le) {
+          return le !== "key";
+        });
+        x = 0 < w.length ? "{key: someKey, " + w.join(": ..., ") + ": ...}" : "{key: someKey}", W[h + x] || (w = 0 < w.length ? "{" + w.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          x,
+          h,
+          w,
+          h
+        ), W[h + x] = !0);
+      }
+      if (h = null, u !== void 0 && (o(u), h = "" + u), c(n) && (o(n.key), h = "" + n.key), "key" in n) {
+        u = {};
+        for (var M in n)
+          M !== "key" && (u[M] = n[M]);
+      } else u = n;
+      return h && t(
+        u,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), p(
+        e,
+        h,
+        v,
+        j,
+        m(),
+        u,
+        P,
+        L
+      );
+    }
+    function g(e) {
+      typeof e == "object" && e !== null && e.$$typeof === y && e._store && (e._store.validated = 1);
+    }
+    var b = ce, y = Symbol.for("react.transitional.element"), S = Symbol.for("react.portal"), R = Symbol.for("react.fragment"), E = Symbol.for("react.strict_mode"), Z = Symbol.for("react.profiler"), Q = Symbol.for("react.consumer"), K = Symbol.for("react.context"), ee = Symbol.for("react.forward_ref"), re = Symbol.for("react.suspense"), ne = Symbol.for("react.suspense_list"), te = Symbol.for("react.memo"), q = Symbol.for("react.lazy"), se = Symbol.for("react.activity"), oe = Symbol.for("react.client.reference"), C = b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, I = Object.prototype.hasOwnProperty, ae = Array.isArray, A = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    b = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var Y, $ = {}, D = b.react_stack_bottom_frame.bind(
+      b,
+      l
+    )(), F = A(f(l)), W = {};
+    T.Fragment = R, T.jsx = function(e, n, u, x, j) {
+      var v = 1e4 > C.recentlyCreatedOwnerStacks++;
+      return d(
+        e,
+        n,
+        u,
+        !1,
+        x,
+        j,
+        v ? Error("react-stack-top-frame") : D,
+        v ? A(f(e)) : F
+      );
+    }, T.jsxs = function(e, n, u, x, j) {
+      var v = 1e4 > C.recentlyCreatedOwnerStacks++;
+      return d(
+        e,
+        n,
+        u,
+        !0,
+        x,
+        j,
+        v ? Error("react-stack-top-frame") : D,
+        v ? A(f(e)) : F
+      );
+    };
+  }()), T;
+}
+var G;
+function be() {
+  return G || (G = 1, process.env.NODE_ENV === "production" ? O.exports = he() : O.exports = pe()), O.exports;
+}
+var r = be();
+const ve = (s) => {
+  const { open: a, onMenuOpen: o, onMenuClose: f, theme: m } = s, l = N(a), c = N(null), t = N(null), i = N(null), p = N(null), d = N(null), g = k(() => {
+    if (c.current && t.current && i.current && p.current && d.current) {
+      const E = m === "dark" ? "#fff" : "#000";
+      c.current.style.backgroundColor = E, c.current.style.width = "100%", c.current.style.height = "3px", c.current.style.transform = "", t.current.style.opacity = "1", t.current.style.backgroundColor = E, i.current.style.opacity = "1", i.current.style.backgroundColor = E, p.current.style.backgroundColor = E, p.current.style.width = "100%", p.current.style.height = "3px", p.current.style.transform = "", d.current.style.color = E, d.current.classList.remove("after:content-['close']"), d.current.classList.remove("after:ml-0.5"), d.current.classList.add("after:content-['menu']"), d.current.classList.add("after:-ml-0.5"), l.current = !0;
+    }
+  }, [m]), b = k(() => {
+    c.current && t.current && i.current && p.current && d.current && (c.current.style.backgroundColor = "#fff", c.current.style.width = "32px", c.current.style.height = "4px", c.current.style.transform = "translateY(9px) rotate(-45deg)", t.current.style.opacity = "0", i.current.style.opacity = "0", p.current.style.backgroundColor = "#fff", p.current.style.width = "32px", p.current.style.height = "4px", p.current.style.transform = "translateY(-9px) rotate(45deg)", d.current.style.color = "#fff", d.current.classList.remove("after:content-['menu']"), d.current.classList.remove("after:-ml-0.5"), d.current.classList.add("after:content-['close']"), d.current.classList.add("after:ml-0.5"), l.current = !1);
+  }, []), y = k(() => {
+    g(), f && f();
+  }, [g, f]), S = k(() => {
+    b(), o && o();
+  }, [b, o]), R = k(() => {
+    l.current ? S() : y();
+  }, [y, S]);
+  return V(() => {
+    a ? g() : b();
+  }, [a, g, b]), /* @__PURE__ */ r.jsxs("button", { type: "button", className: "fixed top-5 right-5 z-2147483648 inline-block h-[27px] w-[27px] cursor-pointer align-middle outline-hidden", onClick: R, children: [
+    /* @__PURE__ */ r.jsx("span", { className: "absolute top-0 left-0 box-border inline-block h-[3px] w-full select-none transition-all duration-500", ref: c }),
+    /* @__PURE__ */ r.jsx("span", { className: "absolute top-[6px] left-0 box-border inline-block h-[3px] w-full select-none transition-all duration-500", ref: t }),
+    /* @__PURE__ */ r.jsx("span", { className: "absolute top-[12px] left-0 box-border inline-block h-[3px] w-full select-none transition-all duration-500", ref: i }),
+    /* @__PURE__ */ r.jsx("span", { className: "absolute top-[18px] left-0 box-border inline-block h-[3px] w-full select-none transition-all duration-500", ref: p }),
+    /* @__PURE__ */ r.jsx("div", { className: "absolute w-full text-xs transition-all duration-500 after:mt-2 after:block", ref: d })
+  ] });
+}, H = new RegExp(/(^https?:\/\/)|(\.(html|htm)?$)/), ke = {
+  report: z,
+  slip: z,
+  table: xe,
+  chart: me,
+  download: fe,
+  lock: de,
+  href: ue
+}, ge = ({ mark: s, children: a }) => {
+  const o = s ? ke[s] : void 0;
+  return o ? /* @__PURE__ */ r.jsxs("div", { className: "flex flex-nowrap items-center", children: [
+    /* @__PURE__ */ r.jsx(o, { className: "h-4 w-4" }),
+    /* @__PURE__ */ r.jsx("div", { className: "aiquants-menu-link mx-1 hover:underline", children: a })
+  ] }) : /* @__PURE__ */ r.jsx("span", { className: "mx-1 text-sky-600 hover:underline dark:text-sky-400", children: a });
+}, je = ({ item: s, onMenuSelected: a }) => {
+  if (s.href === "separator")
+    return /* @__PURE__ */ r.jsx("hr", { className: "aiquants-menu-separator mx-2 my-1 h-px" });
+  const o = /* @__PURE__ */ r.jsx(ge, { mark: s.mark, children: s.title }), f = {
+    onClick: a
+  };
+  return s.new ? /* @__PURE__ */ r.jsx("a", { href: s.href, rel: "noopener noreferrer", target: "_blank", ...f, children: o }) : H.test(s.href) ? /* @__PURE__ */ r.jsx("a", { href: s.href, ...f, children: o }) : /* @__PURE__ */ r.jsx(B, { to: s.href, ...f, children: o });
+}, ye = (s) => {
+  const { menuList: a, onMenuSelected: o } = s, [f, m] = X(null), l = k((t) => {
+    m((i) => i === t ? null : t);
+  }, []), c = ie(() => /* @__PURE__ */ r.jsx(r.Fragment, { children: a.map((t) => /* @__PURE__ */ r.jsx("div", { children: t.href ? /* @__PURE__ */ r.jsx("div", { className: "aiquants-menu-list-item before:-mt-1 relative mb-1 ml-1 h-full rounded-l-2xl p-2 align-middle text-sm before:mr-2 before:inline-block before:h-4 before:w-4 before:rounded-full before:align-middle before:content-['']", children: H.test(t.href) ? /* @__PURE__ */ r.jsx("a", { href: t.href, onClick: o, children: /* @__PURE__ */ r.jsx("span", { className: "aiquants-menu-link hover:underline", children: t.title }) }) : /* @__PURE__ */ r.jsx(B, { to: t.href, onClick: o, children: /* @__PURE__ */ r.jsx("span", { className: "aiquants-menu-link hover:underline", children: t.title }) }) }) : /* @__PURE__ */ r.jsxs("details", { className: "menu-accordion-details", open: t.id === f, children: [
+    /* @__PURE__ */ r.jsx(
+      "summary",
+      {
+        className: "aiquants-menu-list-item menu-accordion-summary before:-mt-1 relative mb-1 ml-1 h-full list-none rounded-l-2xl p-2 align-middle text-sm outline-none before:mr-2 before:inline-block before:h-4 before:w-4 before:rounded-full before:align-middle before:content-['']",
+        onClick: (i) => {
+          i.preventDefault(), l(t.id);
+        },
+        onKeyDown: (i) => {
+          (i.key === "Enter" || i.key === " ") && (i.preventDefault(), l(t.id));
+        },
+        children: /* @__PURE__ */ r.jsx("span", { children: t.title })
+      }
+    ),
+    /* @__PURE__ */ r.jsx("div", { className: "aiquants-menu-submenu pointer-events-auto my-1 mr-1 ml-4 rounded p-2 shadow-md", children: t.submenu.map((i) => /* @__PURE__ */ r.jsx("div", { className: "menu-accordion-container block w-full whitespace-nowrap text-sm", children: /* @__PURE__ */ r.jsx(je, { item: i, onMenuSelected: o }) }, i.subid)) })
+  ] }) }, t.id)) }), [a, o, f, l]);
+  return /* @__PURE__ */ r.jsx("div", { className: "hidden-scrollbar h-0 grow overflow-y-scroll", children: c });
+}, Ee = (s) => {
+  const { menuList: a, menuHeader: o, open: f, onMenuSelected: m, onClickSignout: l, theme: c, toggleTheme: t } = s;
+  return /* @__PURE__ */ r.jsxs("div", { className: `aiquants-menu-content fixed top-0 right-0 z-2147483642 flex min-h-screen w-[250px] select-none flex-col transition-transform duration-500 ${f ? "aiquants-menu-translate-x-0" : "aiquants-menu-translate-x-250"}`, children: [
+    /* @__PURE__ */ r.jsx("div", { className: "flex h-[100px] flex-col", children: o }),
+    /* @__PURE__ */ r.jsx("div", { className: "flex grow flex-col", children: /* @__PURE__ */ r.jsx(ye, { menuList: a, onMenuSelected: m }) }),
+    /* @__PURE__ */ r.jsx("div", { className: "p-4", children: /* @__PURE__ */ r.jsxs("label", { className: "aiquants-theme-toggle", children: [
+      /* @__PURE__ */ r.jsx("input", { type: "checkbox", value: "", checked: c === "dark", onChange: t }),
+      /* @__PURE__ */ r.jsx("div", { className: "aiquants-theme-toggle-track", children: /* @__PURE__ */ r.jsx("div", { className: "aiquants-theme-toggle-thumb" }) }),
+      /* @__PURE__ */ r.jsxs("span", { className: "aiquants-theme-text aiquants-theme-toggle-text", children: [
+        c === "light" ? "Light" : "Dark",
+        " Mode"
+      ] })
+    ] }) }),
+    /* @__PURE__ */ r.jsx("div", { children: /* @__PURE__ */ r.jsx(
+      "button",
+      {
+        type: "button",
+        className: "aiquants-signout-button mx-2 my-5.5 rounded-lg px-5 py-2.5 font-medium text-sm text-white focus:outline-hidden focus:ring-4 focus:ring-blue-300",
+        onClick: l,
+        children: "サインアウト"
+      }
+    ) })
+  ] });
+}, we = (s) => {
+  const { isOverlay: a, onOverlayClick: o } = s;
+  return /* @__PURE__ */ r.jsx("button", { type: "button", className: `fixed inset-0 z-2147483640 cursor-default bg-black/50 transition-opacity duration-500 ${a ? "opacity-100" : "pointer-events-none opacity-0"}`, onClick: o });
+}, Se = (s) => {
+  const { menuList: a, menuHeader: o, onClickSignout: f, isMenuhide: m, theme: l, toggleTheme: c } = s, [t, i] = X(!1), p = k(() => {
+    i(!0);
+  }, []), d = k(() => {
+    i(!1);
+  }, []), g = k(() => {
+    i(!1);
+  }, []), b = k(
+    (y) => {
+      if (y.key === "Escape")
+        return d(), !1;
+    },
+    [d]
+  );
+  return V(() => (t ? window.addEventListener("keydown", b, { passive: !0 }) : window.removeEventListener("keydown", b), () => {
+    window.removeEventListener("keydown", b);
+  }), [t, b]), m ? /* @__PURE__ */ r.jsx(r.Fragment, {}) : /* @__PURE__ */ r.jsxs("div", { className: `aiquants-menu-bar ${l}`, children: [
+    /* @__PURE__ */ r.jsx(ve, { onMenuClose: d, onMenuOpen: p, open: !t, theme: l }),
+    /* @__PURE__ */ r.jsx(Ee, { menuList: a, menuHeader: o, onClickSignout: f, onMenuSelected: g, open: t, theme: l, toggleTheme: c }),
+    /* @__PURE__ */ r.jsx(we, { isOverlay: t, onOverlayClick: d })
+  ] });
+}, Ne = ({ to: s, className: a, children: o }) => /* @__PURE__ */ r.jsx("a", { href: s, className: a, children: o }), Oe = (s) => {
+  const { user: a, LinkComponent: o = Ne } = s;
+  return /* @__PURE__ */ r.jsx("div", { className: "max-h-20 max-w-52", children: /* @__PURE__ */ r.jsx("div", { className: "flex grow flex-col", children: a ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+    /* @__PURE__ */ r.jsxs("div", { className: "flex flex-row", children: [
+      /* @__PURE__ */ r.jsx("div", { className: "aiquants-session-photo m-1 h-14 w-14 p-0.5", children: /* @__PURE__ */ r.jsx("img", { className: "object-contain", src: a.photos[0].value, "aria-label": "profile photo" }) }),
+      /* @__PURE__ */ r.jsxs("div", { className: "mx-1 flex flex-col", children: [
+        /* @__PURE__ */ r.jsx(o, { className: "aiquants-session-link my-1 rounded-lg px-2 text-center text-xs", to: "/", children: "プロフィールを編集" }),
+        /* @__PURE__ */ r.jsx(o, { className: "aiquants-session-link rounded-lg px-2 text-center text-xs", to: "/", children: "プロフィール" }),
+        /* @__PURE__ */ r.jsx(o, { className: "aiquants-session-link my-1 rounded-lg px-2 text-center text-xs", to: "https://myaccount.google.com/", children: "Google Account" })
+      ] })
+    ] }),
+    /* @__PURE__ */ r.jsx("div", { className: "aiquants-session-info mb-1 min-h-[1em] w-full rounded-r-lg px-2 py-0.5 text-xs", children: a.displayName })
+  ] }) : /* @__PURE__ */ r.jsx(r.Fragment, { children: /* @__PURE__ */ r.jsx("div", { className: "aiquants-session-info mb-1 min-h-[1em] w-9/12 rounded-r-lg py-0.5 pl-1 text-xs", children: "ログインはこちら" }) }) }) });
+};
+export {
+  Ne as DefaultLink,
+  Se as MenuBar,
+  Oe as SessionInfo
+};

package/dist/index.umd.js

@@ -0,0 +1,22 @@
+(function(v,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("react"),require("react-router-dom"),require("lucide-react")):typeof define=="function"&&define.amd?define(["exports","react","react-router-dom","lucide-react"],l):(v=typeof globalThis<"u"?globalThis:v||self,l(v["@aiquants/menu-bar"]={},v.React,v.ReactRouterDOM,v["lucide-react"]))})(this,function(v,l,Y,E){"use strict";var S={exports:{}},T={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var D;function Z(){if(D)return T;D=1;var s=Symbol.for("react.transitional.element"),o=Symbol.for("react.fragment");function a(m,x,c){var i=null;if(c!==void 0&&(i=""+c),x.key!==void 0&&(i=""+x.key),"key"in x){c={};for(var r in x)r!=="key"&&(c[r]=x[r])}else c=x;return x=c.ref,{$$typeof:s,type:m,key:i,ref:x!==void 0?x:null,props:c}}return T.Fragment=o,T.jsx=a,T.jsxs=a,T}var _={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var F;function Q(){return F||(F=1,process.env.NODE_ENV!=="production"&&function(){function s(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===pe?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case C:return"Fragment";case ce:return"Profiler";case N:return"StrictMode";case de:return"Suspense";case me:return"SuspenseList";case he:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case O:return"Portal";case ue:return(e.displayName||"Context")+".Provider";case ie:return(e._context.displayName||"Context")+".Consumer";case fe:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case xe:return t=e.displayName||null,t!==null?t:s(e.type)||"Memo";case U:t=e._payload,e=e._init;try{return s(e(t))}catch{}}return null}function o(e){return""+e}function a(e){try{o(e);var t=!1}catch{t=!0}if(t){t=console;var f=t.error,h=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return f.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",h),o(e)}}function m(e){if(e===C)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===U)return"<...>";try{var t=s(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function x(){var e=A.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function i(e){if(J.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function r(e,t){function f(){G||(G=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}f.isReactWarning=!0,Object.defineProperty(e,"key",{get:f,configurable:!0})}function u(){var e=s(this.type);return V[e]||(V[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function b(e,t,f,h,g,y,M,L){return f=y.ref,e={$$typeof:w,type:e,key:t,props:y,_owner:g},(f!==void 0?f:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:u}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:M}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:L}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function d(e,t,f,h,g,y,M,L){var p=t.children;if(p!==void 0)if(h)if(be(p)){for(h=0;h<p.length;h++)j(p[h]);Object.freeze&&Object.freeze(p)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else j(p);if(J.call(t,"key")){p=s(e);var R=Object.keys(t).filter(function(ke){return ke!=="key"});h=0<R.length?"{key: someKey, "+R.join(": ..., ")+": ...}":"{key: someKey}",H[p+h]||(R=0<R.length?"{"+R.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,h,p,R,p),H[p+h]=!0)}if(p=null,f!==void 0&&(a(f),p=""+f),i(t)&&(a(t.key),p=""+t.key),"key"in t){f={};for(var I in t)I!=="key"&&(f[I]=t[I])}else f=t;return p&&r(f,typeof e=="function"?e.displayName||e.name||"Unknown":e),b(e,p,y,g,x(),f,M,L)}function j(e){typeof e=="object"&&e!==null&&e.$$typeof===w&&e._store&&(e._store.validated=1)}var k=l,w=Symbol.for("react.transitional.element"),O=Symbol.for("react.portal"),C=Symbol.for("react.fragment"),N=Symbol.for("react.strict_mode"),ce=Symbol.for("react.profiler"),ie=Symbol.for("react.consumer"),ue=Symbol.for("react.context"),fe=Symbol.for("react.forward_ref"),de=Symbol.for("react.suspense"),me=Symbol.for("react.suspense_list"),xe=Symbol.for("react.memo"),U=Symbol.for("react.lazy"),he=Symbol.for("react.activity"),pe=Symbol.for("react.client.reference"),A=k.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,J=Object.prototype.hasOwnProperty,be=Array.isArray,P=console.createTask?console.createTask:function(){return null};k={react_stack_bottom_frame:function(e){return e()}};var G,V={},B=k.react_stack_bottom_frame.bind(k,c)(),X=P(m(c)),H={};_.Fragment=C,_.jsx=function(e,t,f,h,g){var y=1e4>A.recentlyCreatedOwnerStacks++;return d(e,t,f,!1,h,g,y?Error("react-stack-top-frame"):B,y?P(m(e)):X)},_.jsxs=function(e,t,f,h,g){var y=1e4>A.recentlyCreatedOwnerStacks++;return d(e,t,f,!0,h,g,y?Error("react-stack-top-frame"):B,y?P(m(e)):X)}}()),_}var q;function K(){return q||(q=1,process.env.NODE_ENV==="production"?S.exports=Z():S.exports=Q()),S.exports}var n=K();const $=s=>{const{open:o,onMenuOpen:a,onMenuClose:m,theme:x}=s,c=l.useRef(o),i=l.useRef(null),r=l.useRef(null),u=l.useRef(null),b=l.useRef(null),d=l.useRef(null),j=l.useCallback(()=>{if(i.current&&r.current&&u.current&&b.current&&d.current){const N=x==="dark"?"#fff":"#000";i.current.style.backgroundColor=N,i.current.style.width="100%",i.current.style.height="3px",i.current.style.transform="",r.current.style.opacity="1",r.current.style.backgroundColor=N,u.current.style.opacity="1",u.current.style.backgroundColor=N,b.current.style.backgroundColor=N,b.current.style.width="100%",b.current.style.height="3px",b.current.style.transform="",d.current.style.color=N,d.current.classList.remove("after:content-['close']"),d.current.classList.remove("after:ml-0.5"),d.current.classList.add("after:content-['menu']"),d.current.classList.add("after:-ml-0.5"),c.current=!0}},[x]),k=l.useCallback(()=>{i.current&&r.current&&u.current&&b.current&&d.current&&(i.current.style.backgroundColor="#fff",i.current.style.width="32px",i.current.style.height="4px",i.current.style.transform="translateY(9px) rotate(-45deg)",r.current.style.opacity="0",u.current.style.opacity="0",b.current.style.backgroundColor="#fff",b.current.style.width="32px",b.current.style.height="4px",b.current.style.transform="translateY(-9px) rotate(45deg)",d.current.style.color="#fff",d.current.classList.remove("after:content-['menu']"),d.current.classList.remove("after:-ml-0.5"),d.current.classList.add("after:content-['close']"),d.current.classList.add("after:ml-0.5"),c.current=!1)},[]),w=l.useCallback(()=>{j(),m&&m()},[j,m]),O=l.useCallback(()=>{k(),a&&a()},[k,a]),C=l.useCallback(()=>{c.current?O():w()},[w,O]);return l.useEffect(()=>{o?j():k()},[o,j,k]),n.jsxs("button",{type:"button",className:"fixed top-5 right-5 z-2147483648 inline-block h-[27px] w-[27px] cursor-pointer align-middle outline-hidden",onClick:C,children:[n.jsx("span",{className:"absolute top-0 left-0 box-border inline-block h-[3px] w-full select-none transition-all duration-500",ref:i}),n.jsx("span",{className:"absolute top-[6px] left-0 box-border inline-block h-[3px] w-full select-none transition-all duration-500",ref:r}),n.jsx("span",{className:"absolute top-[12px] left-0 box-border inline-block h-[3px] w-full select-none transition-all duration-500",ref:u}),n.jsx("span",{className:"absolute top-[18px] left-0 box-border inline-block h-[3px] w-full select-none transition-all duration-500",ref:b}),n.jsx("div",{className:"absolute w-full text-xs transition-all duration-500 after:mt-2 after:block",ref:d})]})},W=new RegExp(/(^https?:\/\/)|(\.(html|htm)?$)/),ee={report:E.FileText,slip:E.FileText,table:E.Table,chart:E.BarChart,download:E.Download,lock:E.Lock,href:E.Link},ne=({mark:s,children:o})=>{const a=s?ee[s]:void 0;return a?n.jsxs("div",{className:"flex flex-nowrap items-center",children:[n.jsx(a,{className:"h-4 w-4"}),n.jsx("div",{className:"aiquants-menu-link mx-1 hover:underline",children:o})]}):n.jsx("span",{className:"mx-1 text-sky-600 hover:underline dark:text-sky-400",children:o})},te=({item:s,onMenuSelected:o})=>{if(s.href==="separator")return n.jsx("hr",{className:"aiquants-menu-separator mx-2 my-1 h-px"});const a=n.jsx(ne,{mark:s.mark,children:s.title}),m={onClick:o};return s.new?n.jsx("a",{href:s.href,rel:"noopener noreferrer",target:"_blank",...m,children:a}):W.test(s.href)?n.jsx("a",{href:s.href,...m,children:a}):n.jsx(Y.Link,{to:s.href,...m,children:a})},re=s=>{const{menuList:o,onMenuSelected:a}=s,[m,x]=l.useState(null),c=l.useCallback(r=>{x(u=>u===r?null:r)},[]),i=l.useMemo(()=>n.jsx(n.Fragment,{children:o.map(r=>n.jsx("div",{children:r.href?n.jsx("div",{className:"aiquants-menu-list-item before:-mt-1 relative mb-1 ml-1 h-full rounded-l-2xl p-2 align-middle text-sm before:mr-2 before:inline-block before:h-4 before:w-4 before:rounded-full before:align-middle before:content-['']",children:W.test(r.href)?n.jsx("a",{href:r.href,onClick:a,children:n.jsx("span",{className:"aiquants-menu-link hover:underline",children:r.title})}):n.jsx(Y.Link,{to:r.href,onClick:a,children:n.jsx("span",{className:"aiquants-menu-link hover:underline",children:r.title})})}):n.jsxs("details",{className:"menu-accordion-details",open:r.id===m,children:[n.jsx("summary",{className:"aiquants-menu-list-item menu-accordion-summary before:-mt-1 relative mb-1 ml-1 h-full list-none rounded-l-2xl p-2 align-middle text-sm outline-none before:mr-2 before:inline-block before:h-4 before:w-4 before:rounded-full before:align-middle before:content-['']",onClick:u=>{u.preventDefault(),c(r.id)},onKeyDown:u=>{(u.key==="Enter"||u.key===" ")&&(u.preventDefault(),c(r.id))},children:n.jsx("span",{children:r.title})}),n.jsx("div",{className:"aiquants-menu-submenu pointer-events-auto my-1 mr-1 ml-4 rounded p-2 shadow-md",children:r.submenu.map(u=>n.jsx("div",{className:"menu-accordion-container block w-full whitespace-nowrap text-sm",children:n.jsx(te,{item:u,onMenuSelected:a})},u.subid))})]})},r.id))}),[o,a,m,c]);return n.jsx("div",{className:"hidden-scrollbar h-0 grow overflow-y-scroll",children:i})},se=s=>{const{menuList:o,menuHeader:a,open:m,onMenuSelected:x,onClickSignout:c,theme:i,toggleTheme:r}=s;return n.jsxs("div",{className:`aiquants-menu-content fixed top-0 right-0 z-2147483642 flex min-h-screen w-[250px] select-none flex-col transition-transform duration-500 ${m?"aiquants-menu-translate-x-0":"aiquants-menu-translate-x-250"}`,children:[n.jsx("div",{className:"flex h-[100px] flex-col",children:a}),n.jsx("div",{className:"flex grow flex-col",children:n.jsx(re,{menuList:o,onMenuSelected:x})}),n.jsx("div",{className:"p-4",children:n.jsxs("label",{className:"aiquants-theme-toggle",children:[n.jsx("input",{type:"checkbox",value:"",checked:i==="dark",onChange:r}),n.jsx("div",{className:"aiquants-theme-toggle-track",children:n.jsx("div",{className:"aiquants-theme-toggle-thumb"})}),n.jsxs("span",{className:"aiquants-theme-text aiquants-theme-toggle-text",children:[i==="light"?"Light":"Dark"," Mode"]})]})}),n.jsx("div",{children:n.jsx("button",{type:"button",className:"aiquants-signout-button mx-2 my-5.5 rounded-lg px-5 py-2.5 font-medium text-sm text-white focus:outline-hidden focus:ring-4 focus:ring-blue-300",onClick:c,children:"サインアウト"})})]})},ae=s=>{const{isOverlay:o,onOverlayClick:a}=s;return n.jsx("button",{type:"button",className:`fixed inset-0 z-2147483640 cursor-default bg-black/50 transition-opacity duration-500 ${o?"opacity-100":"pointer-events-none opacity-0"}`,onClick:a})},oe=s=>{const{menuList:o,menuHeader:a,onClickSignout:m,isMenuhide:x,theme:c,toggleTheme:i}=s,[r,u]=l.useState(!1),b=l.useCallback(()=>{u(!0)},[]),d=l.useCallback(()=>{u(!1)},[]),j=l.useCallback(()=>{u(!1)},[]),k=l.useCallback(w=>{if(w.key==="Escape")return d(),!1},[d]);return l.useEffect(()=>(r?window.addEventListener("keydown",k,{passive:!0}):window.removeEventListener("keydown",k),()=>{window.removeEventListener("keydown",k)}),[r,k]),x?n.jsx(n.Fragment,{}):n.jsxs("div",{className:`aiquants-menu-bar ${c}`,children:[n.jsx($,{onMenuClose:d,onMenuOpen:b,open:!r,theme:c}),n.jsx(se,{menuList:o,menuHeader:a,onClickSignout:m,onMenuSelected:j,open:r,theme:c,toggleTheme:i}),n.jsx(ae,{isOverlay:r,onOverlayClick:d})]})},z=({to:s,className:o,children:a})=>n.jsx("a",{href:s,className:o,children:a}),le=s=>{const{user:o,LinkComponent:a=z}=s;return n.jsx("div",{className:"max-h-20 max-w-52",children:n.jsx("div",{className:"flex grow flex-col",children:o?n.jsxs(n.Fragment,{children:[n.jsxs("div",{className:"flex flex-row",children:[n.jsx("div",{className:"aiquants-session-photo m-1 h-14 w-14 p-0.5",children:n.jsx("img",{className:"object-contain",src:o.photos[0].value,"aria-label":"profile photo"})}),n.jsxs("div",{className:"mx-1 flex flex-col",children:[n.jsx(a,{className:"aiquants-session-link my-1 rounded-lg px-2 text-center text-xs",to:"/",children:"プロフィールを編集"}),n.jsx(a,{className:"aiquants-session-link rounded-lg px-2 text-center text-xs",to:"/",children:"プロフィール"}),n.jsx(a,{className:"aiquants-session-link my-1 rounded-lg px-2 text-center text-xs",to:"https://myaccount.google.com/",children:"Google Account"})]})]}),n.jsx("div",{className:"aiquants-session-info mb-1 min-h-[1em] w-full rounded-r-lg px-2 py-0.5 text-xs",children:o.displayName})]}):n.jsx(n.Fragment,{children:n.jsx("div",{className:"aiquants-session-info mb-1 min-h-[1em] w-9/12 rounded-r-lg py-0.5 pl-1 text-xs",children:"ログインはこちら"})})})})};v.DefaultLink=z,v.MenuBar=oe,v.SessionInfo=le,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})});

package/dist/menuBar.css

@@ -0,0 +1 @@
+.aiquants-menu-bar{font-size:1rem;line-height:1.5rem}.aiquants-menu-bar *{box-sizing:border-box}.aiquants-menu-bar a,.aiquants-menu-bar button{text-decoration:none;border:none;background:none;cursor:pointer}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .pointer-events-none{pointer-events:none}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .pointer-events-auto{pointer-events:auto}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .visible{visibility:visible}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .fixed{position:fixed}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .absolute{position:absolute}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .relative{position:relative}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .inset-0{inset:0}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .left-0{left:0}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .right-0{right:0}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .right-5{right:1.25rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .top-0{top:0}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .top-5{top:1.25rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .top-\[12px\]{top:12px}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .top-\[18px\]{top:18px}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .top-\[6px\]{top:6px}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .z-2147483640{z-index:2147483640}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .z-2147483642{z-index:2147483642}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .z-2147483648{z-index:2147483648}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .m-1{margin:.25rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .mx-1{margin-left:.25rem;margin-right:.25rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .mx-2{margin-left:.5rem;margin-right:.5rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .my-1{margin-top:.25rem;margin-bottom:.25rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .mb-1{margin-bottom:.25rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .ml-1{margin-left:.25rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .ml-4{margin-left:1rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .mr-1{margin-right:.25rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .box-border{box-sizing:border-box}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .block{display:block}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .inline-block{display:inline-block}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .flex{display:flex}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .table{display:table}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .h-0{height:0px}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .h-14{height:3.5rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .h-4{height:1rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .h-\[100px\]{height:100px}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .h-\[27px\]{height:27px}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .h-\[3px\]{height:3px}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .h-full{height:100%}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .h-px{height:1px}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .max-h-20{max-height:5rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .min-h-\[1em\]{min-height:1em}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .min-h-screen{min-height:100vh}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .w-14{width:3.5rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .w-4{width:1rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .w-9\/12{width:75%}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .w-\[250px\]{width:250px}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .w-\[27px\]{width:27px}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .w-full{width:100%}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .max-w-52{max-width:13rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .grow{flex-grow:1}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .cursor-default{cursor:default}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .cursor-pointer{cursor:pointer}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .list-none{list-style-type:none}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .flex-row{flex-direction:row}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .flex-col{flex-direction:column}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .flex-nowrap{flex-wrap:nowrap}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .items-center{align-items:center}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .overflow-y-scroll{overflow-y:scroll}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .whitespace-nowrap{white-space:nowrap}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .rounded{border-radius:.25rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .rounded-lg{border-radius:.5rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .rounded-l-2xl{border-top-left-radius:1rem;border-bottom-left-radius:1rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .rounded-r-lg{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .bg-black\/50{background-color:#00000080}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .object-contain{-o-object-fit:contain;object-fit:contain}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .p-0\.5{padding:.125rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .p-2{padding:.5rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .p-4{padding:1rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .px-2{padding-left:.5rem;padding-right:.5rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .px-5{padding-left:1.25rem;padding-right:1.25rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .py-0\.5{padding-top:.125rem;padding-bottom:.125rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .py-2\.5{padding-top:.625rem;padding-bottom:.625rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .pl-1{padding-left:.25rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .text-center{text-align:center}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .align-middle{vertical-align:middle}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .text-sm{font-size:.875rem;line-height:1.25rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .text-xs{font-size:.75rem;line-height:1rem}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .font-medium{font-weight:500}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .text-sky-600{--tw-text-opacity: 1;color:rgb(2 132 199 / var(--tw-text-opacity, 1))}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .opacity-0{opacity:0}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .opacity-100{opacity:1}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .outline-none{outline:2px solid transparent;outline-offset:2px}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:is(.aiquants-menu-bar,.aiquants-menu-bar *) .duration-500{transition-duration:.5s}.aiquants-menu-bar.dark{color-scheme:dark}.aiquants-menu-bar.dark .aiquants-menu-content{background-color:#0f172a}.aiquants-menu-bar.light .aiquants-menu-content,.aiquants-menu-bar .aiquants-menu-content{background-color:#0369a1}.aiquants-menu-bar.dark .aiquants-signout-button{background-color:#334155}.aiquants-menu-bar.dark .aiquants-signout-button:hover{background-color:#475569}.aiquants-menu-bar.light .aiquants-signout-button,.aiquants-menu-bar .aiquants-signout-button{background-color:#2563eb}.aiquants-menu-bar.light .aiquants-signout-button:hover,.aiquants-menu-bar .aiquants-signout-button:hover{background-color:#1e40af}.aiquants-menu-bar.dark .aiquants-theme-text{color:#d1d5db}.aiquants-menu-bar.light .aiquants-theme-text,.aiquants-menu-bar .aiquants-theme-text{color:#fff}.aiquants-menu-bar.dark .aiquants-menu-list-item{background-color:#334155;color:#d1d5db}.aiquants-menu-bar.dark .aiquants-menu-list-item:before{background-color:#94a3b8}.aiquants-menu-bar.dark .aiquants-menu-submenu{background-color:#1e293b}.aiquants-menu-bar.dark .aiquants-menu-link{color:#38bdf8}.aiquants-menu-bar.dark .aiquants-menu-separator{border-color:#4b5563}.aiquants-menu-bar.light .aiquants-menu-list-item,.aiquants-menu-bar .aiquants-menu-list-item{background-color:#bae6fd;color:#4b5563}.aiquants-menu-bar.light .aiquants-menu-list-item:before,.aiquants-menu-bar .aiquants-menu-list-item:before{background-color:#fff}.aiquants-menu-bar.light .aiquants-menu-submenu,.aiquants-menu-bar .aiquants-menu-submenu{background-color:#fafafa}.aiquants-menu-bar.light .aiquants-menu-link,.aiquants-menu-bar .aiquants-menu-link{color:#0284c7}.aiquants-menu-bar.light .aiquants-menu-separator,.aiquants-menu-bar .aiquants-menu-separator{border-color:#4b5563}.aiquants-menu-bar.dark .aiquants-session-photo{background-color:#27272a}.aiquants-menu-bar.dark .aiquants-session-link,.aiquants-menu-bar.dark .aiquants-session-info{background-color:#334155;color:#e2e8f0}.aiquants-menu-bar.light .aiquants-session-photo,.aiquants-menu-bar .aiquants-session-photo{background-color:#fafafa}.aiquants-menu-bar.light .aiquants-session-link,.aiquants-menu-bar .aiquants-session-link,.aiquants-menu-bar.light .aiquants-session-info,.aiquants-menu-bar .aiquants-session-info{background-color:#dcfce7;color:#000}.aiquants-menu-accordion-summary{display:block;align-items:left;cursor:pointer}.aiquants-menu-accordion-summary::-webkit-details-marker{display:none}.aiquants-menu-accordion-container{transition:block-size .5s;contain:content}.aiquants-menu-translate-x-0{transform:translate(0)}.aiquants-menu-translate-x-250{transform:translate(250px)}.aiquants-theme-toggle{position:relative;display:inline-flex;cursor:pointer;align-items:center}.aiquants-theme-toggle input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.aiquants-theme-toggle-track{height:24px;width:44px;border-radius:9999px;background-color:#e5e7eb;position:relative;transition:background-color .2s ease}.aiquants-theme-toggle-thumb{position:absolute;top:2px;left:2px;height:20px;width:20px;border-radius:9999px;border:1px solid rgb(209 213 219);background-color:#fff;transition:all .2s ease}.aiquants-theme-toggle input:checked+.aiquants-theme-toggle-track{background-color:#2563eb}.aiquants-theme-toggle input:checked+.aiquants-theme-toggle-track .aiquants-theme-toggle-thumb{transform:translate(20px);border-color:#fff}.aiquants-theme-toggle input:focus+.aiquants-theme-toggle-track{outline:none;box-shadow:0 0 0 4px #93c5fd}.aiquants-menu-bar.dark .aiquants-theme-toggle-track{background-color:#374151;border-color:#4b5563}.aiquants-menu-bar.dark .aiquants-theme-toggle input:checked+.aiquants-theme-toggle-track{background-color:#2563eb}.aiquants-menu-bar.dark .aiquants-theme-toggle input:focus+.aiquants-theme-toggle-track{box-shadow:0 0 0 4px #1e3a8a}.aiquants-theme-toggle-text{margin-left:12px;font-size:14px;font-weight:500}.before\:-mt-1:before{content:var(--tw-content);margin-top:-.25rem}.before\:mr-2:before{content:var(--tw-content);margin-right:.5rem}.before\:inline-block:before{content:var(--tw-content);display:inline-block}.before\:h-4:before{content:var(--tw-content);height:1rem}.before\:w-4:before{content:var(--tw-content);width:1rem}.before\:rounded-full:before{content:var(--tw-content);border-radius:9999px}.before\:align-middle:before{content:var(--tw-content);vertical-align:middle}.before\:content-\[\'\'\]:before{--tw-content: "";content:var(--tw-content)}.after\:-ml-0\.5:after{content:var(--tw-content);margin-left:-.125rem}.after\:ml-0\.5:after{content:var(--tw-content);margin-left:.125rem}.after\:mt-2:after{content:var(--tw-content);margin-top:.5rem}.after\:block:after{content:var(--tw-content);display:block}.after\:content-\[\'close\'\]:after{--tw-content: "close";content:var(--tw-content)}.after\:content-\[\'menu\'\]:after{--tw-content: "menu";content:var(--tw-content)}.hover\:underline:hover{text-decoration-line:underline}.focus\:ring-4:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-blue-300:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity, 1))}@media (prefers-color-scheme: dark){.dark\:text-sky-400{--tw-text-opacity: 1;color:rgb(56 189 248 / var(--tw-text-opacity, 1))}}

package/dist/types/user.d.ts

@@ -0,0 +1,20 @@
+/**
+ * User profile photo information.
+ * ユーザープロフィール写真情報。
+ */
+export interface UserPhoto {
+    /** Photo URL */
+    value: string;
+}
+/**
+ * Google user profile information.
+ * Googleユーザープロフィール情報。
+ */
+export interface GoogleUserProfile {
+    /** User display name */
+    displayName: string;
+    /** Array of user photos */
+    photos: UserPhoto[];
+    /** User ID */
+    id?: string;
+}

package/dist/types.d.ts

@@ -0,0 +1 @@
+export type Theme = "light" | "dark";

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@aiquants/menu-bar",
+  "version": "0.1.0",
+  "private": false,
+  "description": "A React menu bar component with authentication support and theming",
+  "keywords": [
+    "react",
+    "menu",
+    "navigation",
+    "authentication",
+    "theme",
+    "dark-mode",
+    "component",
+    "ui"
+  ],
+  "author": {
+    "name": "fehde-k",
+    "url": "https://github.com/fehde-k"
+  },
+  "license": "MIT",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    },
+    "./css": "./dist/menuBar.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run clean && npm run typecheck && npm run build",
+    "publish:patch": "npm version patch && npm publish",
+    "publish:minor": "npm version minor && npm publish",
+    "publish:major": "npm version major && npm publish"
+  },
+  "engines": {
+    "node": ">=18.0.0",
+    "npm": ">=8.0.0"
+  },
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.7.1",
+    "lucide-react": "^0.473.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^4.2.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.7.1",
+    "typescript": "^5.3.3",
+    "vite": "^7.0.6",
+    "vite-plugin-dts": "^3.7.2",
+    "vite-tsconfig-paths": "^5.1.4",
+    "lucide-react": "^0.473.0",
+    "tailwindcss": "^3.4.0",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0"
+  },
+  "dependencies": {}
+}