@4alldigital/foundation-ui--core 3.13.0 → 3.13.1
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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@4alldigital/foundation-ui--core",
|
|
3
|
-
"version": "3.13.
|
|
3
|
+
"version": "3.13.1",
|
|
4
4
|
"description": "Foundation UI Core Component Library (source distribution)",
|
|
5
5
|
"main": "src/index.ts",
|
|
6
6
|
"types": "src/index.ts",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"dev": "tsc --noEmit --watch"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"sonner": "^2.0.
|
|
23
|
+
"sonner": "^2.0.7"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
26
26
|
"next": "^14.0.0 || ^15.0.0",
|
|
@@ -38,5 +38,5 @@
|
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"@types/he": "^1.2.3"
|
|
40
40
|
},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "619d7da9cbabe639be4a03054467f1fa90bc6cc9"
|
|
42
42
|
}
|
|
@@ -136,60 +136,101 @@ const Header = ({
|
|
|
136
136
|
</div>
|
|
137
137
|
</div>
|
|
138
138
|
<div className={cx('navbar-menu relative z-50', mobileMenuClass, { hidden: hideMenu })}>
|
|
139
|
-
{/*
|
|
140
|
-
<div className="navbar-backdrop fixed inset-0 bg-black
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
<
|
|
151
|
-
|
|
152
|
-
|
|
139
|
+
{/* Mobile drawer backdrop */}
|
|
140
|
+
<div className="navbar-backdrop fixed inset-0 bg-black/40 backdrop-blur-sm" onClick={closeMobileMenu}></div>
|
|
141
|
+
{/* Mobile drawer panel */}
|
|
142
|
+
<nav className="fixed top-0 left-0 bottom-0 flex flex-col w-[85%] max-w-[320px] bg-body-bg dark:bg-body-bg-dark shadow-2xl overflow-y-auto">
|
|
143
|
+
{/* Header */}
|
|
144
|
+
<div className="flex items-center justify-between px-5 py-4 border-b border-black/[0.06] dark:border-white/[0.08]">
|
|
145
|
+
{context?.brand?.logo && (
|
|
146
|
+
<div className={cx('relative h-10', context?.brand?.logoAspectRatio)}>
|
|
147
|
+
<Logo logo={context?.brand?.logo} aspectRatioClass={context?.brand?.logoAspectRatio} />
|
|
148
|
+
</div>
|
|
149
|
+
)}
|
|
150
|
+
<button
|
|
151
|
+
onClick={toggleMenuClass}
|
|
152
|
+
className="flex h-9 w-9 items-center justify-center rounded-full bg-black/[0.04] dark:bg-white/[0.08] text-body-text dark:text-body-text-dark transition-colors hover:bg-black/[0.08] dark:hover:bg-white/[0.12]"
|
|
153
|
+
aria-label="Close menu"
|
|
154
|
+
>
|
|
155
|
+
<svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5} strokeLinecap="round">
|
|
156
|
+
<path d="M18 6L6 18M6 6l12 12" />
|
|
157
|
+
</svg>
|
|
158
|
+
</button>
|
|
153
159
|
</div>
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
160
|
+
|
|
161
|
+
{/* Navigation */}
|
|
162
|
+
<div className="flex-1 px-3 py-4">
|
|
163
|
+
{/* Main nav */}
|
|
164
|
+
<div className="mb-2">
|
|
165
|
+
<p className="px-3 mb-2 text-[0.65rem] font-bold uppercase tracking-[0.1em] text-body-text/40 dark:text-body-text-dark/40">Menu</p>
|
|
166
|
+
{(context?.app?.isAuthenticated ? context?.header?.authNav : context?.header?.anonNav)?.map((link, index) => (
|
|
167
|
+
<Link
|
|
168
|
+
key={`mobile-nav-${link.id || index}`}
|
|
169
|
+
href={link.url}
|
|
170
|
+
className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-[0.95rem] font-medium text-body-text dark:text-body-text-dark no-underline transition-colors hover:bg-black/[0.04] dark:hover:bg-white/[0.06]"
|
|
171
|
+
>
|
|
172
|
+
{link.title}
|
|
173
|
+
</Link>
|
|
174
|
+
))}
|
|
167
175
|
</div>
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
+
|
|
177
|
+
{/* Divider */}
|
|
178
|
+
{context?.app?.isAuthenticated && context?.header?.profile && (
|
|
179
|
+
<>
|
|
180
|
+
<div className="mx-3 my-3 h-px bg-black/[0.06] dark:bg-white/[0.08]" />
|
|
181
|
+
<div className="mb-2">
|
|
182
|
+
<p className="px-3 mb-2 text-[0.65rem] font-bold uppercase tracking-[0.1em] text-body-text/40 dark:text-body-text-dark/40">Account</p>
|
|
183
|
+
{context.header.profile.filter(l => l.title !== 'Logout').map((link, index) => (
|
|
184
|
+
<Link
|
|
185
|
+
key={`mobile-profile-${link.id || index}`}
|
|
186
|
+
href={link.url}
|
|
187
|
+
className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-[0.95rem] font-medium text-body-text dark:text-body-text-dark no-underline transition-colors hover:bg-black/[0.04] dark:hover:bg-white/[0.06]"
|
|
188
|
+
>
|
|
189
|
+
{link.title}
|
|
190
|
+
</Link>
|
|
191
|
+
))}
|
|
192
|
+
</div>
|
|
193
|
+
</>
|
|
176
194
|
)}
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
195
|
+
</div>
|
|
196
|
+
|
|
197
|
+
{/* Footer */}
|
|
198
|
+
<div className="px-5 py-5 border-t border-black/[0.06] dark:border-white/[0.08]">
|
|
199
|
+
{/* Dark mode toggle */}
|
|
200
|
+
{theme?.toggleTheme && (
|
|
201
|
+
<button
|
|
202
|
+
onClick={theme.toggleTheme}
|
|
203
|
+
className="flex w-full items-center justify-between rounded-xl px-3 py-2.5 mb-3 text-[0.85rem] font-medium text-body-text/70 dark:text-body-text-dark/70 transition-colors hover:bg-black/[0.04] dark:hover:bg-white/[0.06]"
|
|
204
|
+
>
|
|
205
|
+
<span>{theme.isDarkTheme ? 'Light Mode' : 'Dark Mode'}</span>
|
|
206
|
+
<svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
|
|
207
|
+
{theme.isDarkTheme ? (
|
|
208
|
+
<><circle cx="12" cy="12" r="5" /><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" /></>
|
|
209
|
+
) : (
|
|
210
|
+
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
|
|
211
|
+
)}
|
|
212
|
+
</svg>
|
|
213
|
+
</button>
|
|
181
214
|
)}
|
|
182
|
-
{
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
215
|
+
{/* Auth action */}
|
|
216
|
+
{context?.app?.isAuthenticated ? (
|
|
217
|
+
<button
|
|
218
|
+
onClick={context?.app?.logoutCallback}
|
|
219
|
+
className="flex w-full items-center justify-center rounded-full py-2.5 text-[0.9rem] font-semibold text-body-text/60 dark:text-body-text-dark/60 border border-black/[0.08] dark:border-white/[0.1] transition-colors hover:bg-black/[0.04] dark:hover:bg-white/[0.06]"
|
|
220
|
+
>
|
|
221
|
+
{T.UI.LOGOUT}
|
|
222
|
+
</button>
|
|
223
|
+
) : (
|
|
224
|
+
<Button
|
|
225
|
+
rounded
|
|
226
|
+
wide
|
|
227
|
+
onClick={() => {
|
|
228
|
+
context?.app?.loginCallback?.();
|
|
229
|
+
toggleMenuClass();
|
|
230
|
+
}}
|
|
231
|
+
>
|
|
232
|
+
{T.UI.LOGIN}
|
|
233
|
+
</Button>
|
|
193
234
|
)}
|
|
194
235
|
</div>
|
|
195
236
|
</nav>
|
|
@@ -33,7 +33,7 @@ const TextInput = forwardRef(function MyInput(
|
|
|
33
33
|
|
|
34
34
|
if (type === InputType.TEXTAREA) {
|
|
35
35
|
return (
|
|
36
|
-
<div data-testid="TextInput" className="relative">
|
|
36
|
+
<div data-testid="TextInput" className="relative w-full">
|
|
37
37
|
<textarea
|
|
38
38
|
ref={ref}
|
|
39
39
|
id={name}
|
|
@@ -52,7 +52,7 @@ const TextInput = forwardRef(function MyInput(
|
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
return (
|
|
55
|
-
<div data-testid="TextInput" className="relative">
|
|
55
|
+
<div data-testid="TextInput" className="relative w-full">
|
|
56
56
|
{icon && (
|
|
57
57
|
<div className="form-icon absolute inset-y-0 start-3 flex items-center ps-3.5 pointer-events-none">
|
|
58
58
|
<Icon name={icon} />
|
|
@@ -68,7 +68,7 @@ const TextInput = forwardRef(function MyInput(
|
|
|
68
68
|
disabled={disabled}
|
|
69
69
|
placeholder={placeholderSet}
|
|
70
70
|
onChange={onChange}
|
|
71
|
-
className={cx('form-item text-input', { 'pl-12': icon }, className)}
|
|
71
|
+
className={cx('form-item text-input w-full', { 'pl-12': icon }, className)}
|
|
72
72
|
{...rest}
|
|
73
73
|
/>
|
|
74
74
|
</div>
|