@aiquants/menu-bar 1.17.6 → 1.17.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.es.js +430 -304
  2. package/dist/index.umd.js +2 -2
  3. package/dist/styles/menu-bar.standalone.css +1 -1
  4. package/package.json +1 -1
  5. package/src/contents/MenuContent.tsx +13 -10
  6. package/src/contents/MenuList.tsx +8 -1
  7. package/src/lucide-icons.d.ts +6 -0
  8. package/src/styles/menu-bar.css +194 -196
package/src/styles/menu-bar.css CHANGED
@@ -5,236 +5,234 @@
5
5
  --aiquants-menu-pinned-width: 0px;
6
6
  }
7
7
 
8
-
9
- /* メニューバーコンテナ内でのみTailwindスタイルを適用 */
10
- .aiquants-menu-bar {
11
- /* 基本的なフォントスタイル */
12
- font-size: 1rem;
13
- line-height: 1.5;
14
-
15
- /* メニューバー内の要素のリセット */
16
- * {
17
- box-sizing: border-box;
18
- }
19
-
20
- /* メニューバー内のリンクとボタンの基本スタイル */
21
- a,
22
- button {
23
- text-decoration: none;
24
- border: none;
25
- background: none;
26
- cursor: pointer;
27
- }
8
+ /* メニューバーコンテナ内でのみTailwindスタイルを適用 */
9
+ .aiquants-menu-bar {
10
+ /* 基本的なフォントスタイル */
11
+ font-size: 1rem;
12
+ line-height: 1.5;
13
+
14
+ /* メニューバー内の要素のリセット */
15
+ * {
16
+ box-sizing: border-box;
17
+ }
18
+
19
+ /* メニューバー内のリンクとボタンの基本スタイル */
20
+ a,
21
+ button {
22
+ text-decoration: none;
23
+ border: none;
24
+ background: none;
25
+ cursor: pointer;
28
26
  }
27
+ }
29
28
 
30
- /* ダークモード用のスタイル */
31
- .aiquants-menu-bar.dark {
32
- color-scheme: dark;
33
- }
29
+ /* ダークモード用のスタイル */
30
+ .aiquants-menu-bar.dark {
31
+ color-scheme: dark;
32
+ }
34
33
 
35
- /* ダークモード時のメニューコンテンツの背景色 */
36
- .aiquants-menu-bar.dark .aiquants-menu-content {
37
- background-color: rgb(15 23 42); /* slate-900 */
38
- }
34
+ /* ダークモード時のメニューコンテンツの背景色 */
35
+ .aiquants-menu-bar.dark .aiquants-menu-content {
36
+ background-color: rgb(15 23 42); /* slate-900 */
37
+ }
39
38
 
40
- /* ライトモード時のメニューコンテンツの背景色 */
41
- .aiquants-menu-bar.light .aiquants-menu-content,
42
- .aiquants-menu-bar .aiquants-menu-content {
43
- background-color: rgb(3 105 161); /* sky-700 */
44
- }
39
+ /* ライトモード時のメニューコンテンツの背景色 */
40
+ .aiquants-menu-bar.light .aiquants-menu-content,
41
+ .aiquants-menu-bar .aiquants-menu-content {
42
+ background-color: rgb(3 105 161); /* sky-700 */
43
+ }
45
44
 
46
- /* ダークモード時のボタンスタイル */
47
- .aiquants-menu-bar.dark .aiquants-signout-button {
48
- background-color: rgb(51 65 85); /* slate-700 */
49
- }
45
+ /* ダークモード時のボタンスタイル */
46
+ .aiquants-menu-bar.dark .aiquants-signout-button {
47
+ background-color: rgb(51 65 85); /* slate-700 */
48
+ }
50
49
 
51
- .aiquants-menu-bar.dark .aiquants-signout-button:hover {
52
- background-color: rgb(71 85 105); /* slate-600 */
53
- }
50
+ .aiquants-menu-bar.dark .aiquants-signout-button:hover {
51
+ background-color: rgb(71 85 105); /* slate-600 */
52
+ }
54
53
 
55
- /* ライトモード時のボタンスタイル */
56
- .aiquants-menu-bar.light .aiquants-signout-button,
57
- .aiquants-menu-bar .aiquants-signout-button {
58
- background-color: rgb(37 99 235); /* blue-600 */
59
- white-space: nowrap;
60
- min-width: 0;
61
- }
54
+ /* ライトモード時のボタンスタイル */
55
+ .aiquants-menu-bar.light .aiquants-signout-button,
56
+ .aiquants-menu-bar .aiquants-signout-button {
57
+ background-color: rgb(37 99 235); /* blue-600 */
58
+ white-space: nowrap;
59
+ min-width: 0;
60
+ }
62
61
 
63
- .aiquants-menu-bar.light .aiquants-signout-button:hover,
64
- .aiquants-menu-bar .aiquants-signout-button:hover {
65
- background-color: rgb(30 64 175); /* blue-800 */
66
- }
62
+ .aiquants-menu-bar.light .aiquants-signout-button:hover,
63
+ .aiquants-menu-bar .aiquants-signout-button:hover {
64
+ background-color: rgb(30 64 175); /* blue-800 */
65
+ }
67
66
 
68
- /* ダークモード時のメニューリストアイテム */
69
- .aiquants-menu-bar.dark .aiquants-menu-list-item {
70
- background-color: rgb(51 65 85); /* slate-700 */
71
- color: rgb(209 213 219); /* gray-300 */
72
- }
67
+ /* ダークモード時のメニューリストアイテム */
68
+ .aiquants-menu-bar.dark .aiquants-menu-list-item {
69
+ background-color: rgb(51 65 85); /* slate-700 */
70
+ color: rgb(209 213 219); /* gray-300 */
71
+ }
73
72
 
74
- .aiquants-menu-bar.dark .aiquants-menu-list-item::before {
75
- background-color: rgb(148 163 184); /* slate-400 */
76
- }
73
+ .aiquants-menu-bar.dark .aiquants-menu-list-item::before {
74
+ background-color: rgb(148 163 184); /* slate-400 */
75
+ }
77
76
 
78
- .aiquants-menu-bar.dark .aiquants-menu-submenu {
79
- background-color: rgb(30 41 59); /* slate-800 */
80
- }
77
+ .aiquants-menu-bar.dark .aiquants-menu-submenu {
78
+ background-color: rgb(30 41 59); /* slate-800 */
79
+ }
81
80
 
82
- .aiquants-menu-bar.dark .aiquants-menu-link {
83
- color: rgb(56 189 248); /* sky-400 */
84
- }
81
+ .aiquants-menu-bar.dark .aiquants-menu-link {
82
+ color: rgb(56 189 248); /* sky-400 */
83
+ }
85
84
 
86
- .aiquants-menu-bar.dark .aiquants-menu-separator {
87
- border-color: rgb(75 85 99); /* gray-500 */
88
- }
85
+ .aiquants-menu-bar.dark .aiquants-menu-separator {
86
+ border-color: rgb(75 85 99); /* gray-500 */
87
+ }
89
88
 
90
- /* ライトモード時のメニューリストアイテム */
91
- .aiquants-menu-bar.light .aiquants-menu-list-item,
92
- .aiquants-menu-bar .aiquants-menu-list-item {
93
- background-color: rgb(186 230 253); /* sky-200 */
94
- color: rgb(75 85 99); /* gray-600 */
95
- }
89
+ /* ライトモード時のメニューリストアイテム */
90
+ .aiquants-menu-bar.light .aiquants-menu-list-item,
91
+ .aiquants-menu-bar .aiquants-menu-list-item {
92
+ background-color: rgb(186 230 253); /* sky-200 */
93
+ color: rgb(75 85 99); /* gray-600 */
94
+ }
96
95
 
97
- .aiquants-menu-bar.light .aiquants-menu-list-item::before,
98
- .aiquants-menu-bar .aiquants-menu-list-item::before {
99
- background-color: rgb(255 255 255); /* white */
100
- }
96
+ .aiquants-menu-bar.light .aiquants-menu-list-item::before,
97
+ .aiquants-menu-bar .aiquants-menu-list-item::before {
98
+ background-color: rgb(255 255 255); /* white */
99
+ }
101
100
 
102
- .aiquants-menu-bar.light .aiquants-menu-submenu,
103
- .aiquants-menu-bar .aiquants-menu-submenu {
104
- background-color: rgb(250 250 250); /* zinc-50 */
105
- }
101
+ .aiquants-menu-bar.light .aiquants-menu-submenu,
102
+ .aiquants-menu-bar .aiquants-menu-submenu {
103
+ background-color: rgb(250 250 250); /* zinc-50 */
104
+ }
106
105
 
107
- .aiquants-menu-bar.light .aiquants-menu-link,
108
- .aiquants-menu-bar .aiquants-menu-link {
109
- color: rgb(2 132 199); /* sky-600 */
110
- }
106
+ .aiquants-menu-bar.light .aiquants-menu-link,
107
+ .aiquants-menu-bar .aiquants-menu-link {
108
+ color: rgb(2 132 199); /* sky-600 */
109
+ }
111
110
 
112
- .aiquants-menu-bar.light .aiquants-menu-separator,
113
- .aiquants-menu-bar .aiquants-menu-separator {
114
- border-color: rgb(75 85 99); /* gray-600 */
115
- }
111
+ .aiquants-menu-bar.light .aiquants-menu-separator,
112
+ .aiquants-menu-bar .aiquants-menu-separator {
113
+ border-color: rgb(75 85 99); /* gray-600 */
114
+ }
116
115
 
117
- .aiquants-menu-bar .aiquants-menu-separator {
118
- border-top: 1px solid;
119
- height: 0;
120
- }
116
+ .aiquants-menu-bar .aiquants-menu-separator {
117
+ border-top: 1px solid;
118
+ height: 0;
119
+ }
121
120
 
122
- /* ダークモード時のSessionInfo */
123
- .aiquants-menu-bar.dark .aiquants-session-photo {
124
- background-color: rgb(39 39 42); /* zinc-800 */
125
- }
121
+ /* ダークモード時のSessionInfo */
122
+ .aiquants-menu-bar.dark .aiquants-session-photo {
123
+ background-color: rgb(39 39 42); /* zinc-800 */
124
+ }
126
125
 
127
- .aiquants-menu-bar.dark .aiquants-session-link,
128
- .aiquants-menu-bar.dark .aiquants-session-info {
129
- background-color: rgb(51 65 85); /* slate-700 */
130
- color: rgb(226 232 240); /* slate-200 */
131
- }
126
+ .aiquants-menu-bar.dark .aiquants-session-link,
127
+ .aiquants-menu-bar.dark .aiquants-session-info {
128
+ background-color: rgb(51 65 85); /* slate-700 */
129
+ color: rgb(226 232 240); /* slate-200 */
130
+ }
132
131
 
133
- /* ライトモード時のSessionInfo */
134
- .aiquants-menu-bar.light .aiquants-session-photo,
135
- .aiquants-menu-bar .aiquants-session-photo {
136
- background-color: rgb(250 250 250); /* zinc-50 */
137
- }
132
+ /* ライトモード時のSessionInfo */
133
+ .aiquants-menu-bar.light .aiquants-session-photo,
134
+ .aiquants-menu-bar .aiquants-session-photo {
135
+ background-color: rgb(250 250 250); /* zinc-50 */
136
+ }
138
137
 
139
- .aiquants-menu-bar.light .aiquants-session-link,
140
- .aiquants-menu-bar .aiquants-session-link,
141
- .aiquants-menu-bar.light .aiquants-session-info,
142
- .aiquants-menu-bar .aiquants-session-info {
143
- background-color: rgb(220 252 231); /* green-100 */
144
- color: rgb(0 0 0); /* black */
145
- }
138
+ .aiquants-menu-bar.light .aiquants-session-link,
139
+ .aiquants-menu-bar .aiquants-session-link,
140
+ .aiquants-menu-bar.light .aiquants-session-info,
141
+ .aiquants-menu-bar .aiquants-session-info {
142
+ background-color: rgb(220 252 231); /* green-100 */
143
+ color: rgb(0 0 0); /* black */
144
+ }
146
145
 
147
- /* アコーディオンメニューの詳細部分のスタイル */
148
- .aiquants-menu-accordion-details {
149
- /* max-inline-size: 40rem; */
150
- }
146
+ /* アコーディオンメニューの詳細部分のスタイル */
147
+ .aiquants-menu-accordion-details {
148
+ /* max-inline-size: 40rem; */
149
+ }
151
150
 
152
- /* アコーディオンメニューのサマリー（ヘッダー）部分のスタイル */
153
- .aiquants-menu-accordion-summary {
154
- display: flex;
155
- align-items: center;
156
- justify-content: space-between;
157
- cursor: pointer;
151
+ /* アコーディオンメニューのサマリー（ヘッダー）部分のスタイル */
152
+ .aiquants-menu-accordion-summary {
153
+ display: flex;
154
+ align-items: center;
155
+ justify-content: space-between;
156
+ cursor: pointer;
158
157
 
159
- /* デフォルトの詳細マーカー（通常は三角形）を非表示にする */
160
- &::-webkit-details-marker {
161
- display: none;
162
- }
158
+ /* デフォルトの詳細マーカー（通常は三角形）を非表示にする */
159
+ &::-webkit-details-marker {
160
+ display: none;
163
161
  }
162
+ }
164
163
 
165
- .aiquants-menu-accordion-summary span {
166
- flex-grow: 1;
167
- text-align: left;
168
- }
164
+ .aiquants-menu-accordion-summary span {
165
+ flex-grow: 1;
166
+ text-align: left;
167
+ }
169
168
 
170
- /* サブメニューピンボタンのスタイル */
171
- .aiquants-submenu-pin-button {
172
- display: inline-flex;
173
- align-items: center;
174
- justify-content: center;
175
- padding: 0.25rem;
176
- border-radius: 0.375rem;
177
- transition: all 0.3s;
178
- }
169
+ /* サブメニューピンボタンのスタイル */
170
+ .aiquants-submenu-pin-button {
171
+ display: inline-flex;
172
+ align-items: center;
173
+ justify-content: center;
174
+ padding: 0.25rem;
175
+ border-radius: 0.375rem;
176
+ transition: all 0.3s;
177
+ }
179
178
 
180
- .aiquants-menu-bar.light .aiquants-submenu-pin-button {
181
- color: rgba(75, 85, 99, 0.4);
182
- }
183
- .aiquants-menu-bar.light .aiquants-submenu-pin-button:hover {
184
- color: rgba(75, 85, 99, 0.8);
185
- background-color: rgba(75, 85, 99, 0.1);
186
- }
187
- .aiquants-menu-bar.light .aiquants-submenu-pin-button.pinned {
188
- color: rgb(217 119 6); /* amber-600 */
189
- }
190
- .aiquants-menu-bar.light .aiquants-submenu-pin-button.pinned:hover {
191
- color: rgb(180 83 9); /* amber-700 */
192
- background-color: rgba(217, 119, 6, 0.1);
193
- }
179
+ .aiquants-menu-bar.light .aiquants-submenu-pin-button {
180
+ color: rgba(75, 85, 99, 0.4);
181
+ }
182
+ .aiquants-menu-bar.light .aiquants-submenu-pin-button:hover {
183
+ color: rgba(75, 85, 99, 0.8);
184
+ background-color: rgba(75, 85, 99, 0.1);
185
+ }
186
+ .aiquants-menu-bar.light .aiquants-submenu-pin-button.pinned {
187
+ color: rgb(217 119 6); /* amber-600 */
188
+ }
189
+ .aiquants-menu-bar.light .aiquants-submenu-pin-button.pinned:hover {
190
+ color: rgb(180 83 9); /* amber-700 */
191
+ background-color: rgba(217, 119, 6, 0.1);
192
+ }
194
193
 
195
- .aiquants-menu-bar.dark .aiquants-submenu-pin-button {
196
- color: rgba(255, 255, 255, 0.4);
197
- }
198
- .aiquants-menu-bar.dark .aiquants-submenu-pin-button:hover {
199
- color: rgba(255, 255, 255, 0.8);
200
- background-color: rgba(255, 255, 255, 0.1);
201
- }
202
- .aiquants-menu-bar.dark .aiquants-submenu-pin-button.pinned {
203
- color: rgb(245 158 11); /* amber-500 */
204
- }
205
- .aiquants-menu-bar.dark .aiquants-submenu-pin-button.pinned:hover {
206
- color: rgb(251 191 36); /* amber-400 */
207
- background-color: rgba(245, 158, 11, 0.15);
208
- }
194
+ .aiquants-menu-bar.dark .aiquants-submenu-pin-button {
195
+ color: rgba(255, 255, 255, 0.4);
196
+ }
197
+ .aiquants-menu-bar.dark .aiquants-submenu-pin-button:hover {
198
+ color: rgba(255, 255, 255, 0.8);
199
+ background-color: rgba(255, 255, 255, 0.1);
200
+ }
201
+ .aiquants-menu-bar.dark .aiquants-submenu-pin-button.pinned {
202
+ color: rgb(245 158 11); /* amber-500 */
203
+ }
204
+ .aiquants-menu-bar.dark .aiquants-submenu-pin-button.pinned:hover {
205
+ color: rgb(251 191 36); /* amber-400 */
206
+ background-color: rgba(245, 158, 11, 0.15);
207
+ }
209
208
 
210
- /* アコーディオンメニューのコンテナ全体のスタイル */
211
- .aiquants-menu-accordion-container {
212
- /* 高さの変化を0.5秒かけてアニメーションさせる */
213
- transition: block-size 0.5s;
214
- /* 要素のサイズ計算を最適化する */
215
- contain: content;
216
- }
209
+ /* アコーディオンメニューのコンテナ全体のスタイル */
210
+ .aiquants-menu-accordion-container {
211
+ /* 高さの変化を0.5秒かけてアニメーションさせる */
212
+ transition: block-size 0.5s;
213
+ /* 要素のサイズ計算を最適化する */
214
+ contain: content;
215
+ }
217
216
 
218
- /* メニューの開閉状態に応じたスタイル */
219
- /* X軸方向に0px移動させる（メニューが開いた状態） */
220
- .aiquants-menu-translate-x-0 {
221
- transform: translateX(0px);
222
- }
217
+ /* メニューの開閉状態に応じたスタイル */
218
+ /* X軸方向に0px移動させる（メニューが開いた状態） */
219
+ .aiquants-menu-translate-x-0 {
220
+ transform: translateX(0px);
221
+ }
223
222
 
224
- /* X軸方向に250px移動させる（メニューが閉じた状態） */
225
- .aiquants-menu-translate-x-250 {
226
- transform: translateX(250px);
227
- }
223
+ /* X軸方向に250px移動させる（メニューが閉じた状態） */
224
+ .aiquants-menu-translate-x-250 {
225
+ transform: translateX(250px);
226
+ }
228
227
 
229
- .aiquants-menu-switch {
230
- top: calc(var(--spacing) * 2);
231
- right: calc(var(--spacing) * 2);
232
- }
228
+ .aiquants-menu-switch {
229
+ top: calc(var(--spacing) * 2);
230
+ right: calc(var(--spacing) * 2);
231
+ }
233
232
 
234
- @media (width >= 40rem) {
235
- .aiquants-menu-switch {
236
- top: calc(var(--spacing) * 3);
237
- right: calc(var(--spacing) * 3);
238
- }
233
+ @media (width >= 40rem) {
234
+ .aiquants-menu-switch {
235
+ top: calc(var(--spacing) * 3);
236
+ right: calc(var(--spacing) * 3);
239
237
  }
240
-
238
+ }