@tonyarbor/components 0.7.0 → 0.7.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/dist/AvatarLogoLockup.d.mts +41 -0
- package/dist/AvatarLogoLockup.d.ts +41 -0
- package/dist/AvatarLogoLockup.js +344 -0
- package/dist/AvatarLogoLockup.js.map +1 -0
- package/dist/AvatarLogoLockup.mjs +9 -0
- package/dist/AvatarLogoLockup.mjs.map +1 -0
- package/dist/TopNavBar.d.mts +103 -0
- package/dist/TopNavBar.d.ts +103 -0
- package/dist/TopNavBar.js +994 -0
- package/dist/TopNavBar.js.map +1 -0
- package/dist/TopNavBar.mjs +13 -0
- package/dist/TopNavBar.mjs.map +1 -0
- package/dist/TopNavItem.d.mts +33 -0
- package/dist/TopNavItem.d.ts +33 -0
- package/dist/TopNavItem.js +108 -0
- package/dist/TopNavItem.js.map +1 -0
- package/dist/TopNavItem.mjs +7 -0
- package/dist/TopNavItem.mjs.map +1 -0
- package/dist/chunk-AVYGOALO.mjs +72 -0
- package/dist/chunk-AVYGOALO.mjs.map +1 -0
- package/dist/chunk-HG2ORLLW.mjs +116 -0
- package/dist/chunk-HG2ORLLW.mjs.map +1 -0
- package/dist/chunk-YUXQQX7M.mjs +182 -0
- package/dist/chunk-YUXQQX7M.mjs.map +1 -0
- package/dist/index.d.mts +3 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +346 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +13 -1
- package/package.json +16 -1
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
interface AvatarLogoLockupProps {
|
|
4
|
+
/**
|
|
5
|
+
* Image source URL for the avatar
|
|
6
|
+
*/
|
|
7
|
+
avatarSrc?: string;
|
|
8
|
+
/**
|
|
9
|
+
* Initials to display in avatar when no image is provided
|
|
10
|
+
*/
|
|
11
|
+
avatarInitials?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Alt text for the avatar image
|
|
14
|
+
*/
|
|
15
|
+
avatarAlt?: string;
|
|
16
|
+
/**
|
|
17
|
+
* Click handler for the avatar section
|
|
18
|
+
*/
|
|
19
|
+
onAvatarClick?: () => void;
|
|
20
|
+
/**
|
|
21
|
+
* Click handler for the logo section
|
|
22
|
+
*/
|
|
23
|
+
onLogoClick?: () => void;
|
|
24
|
+
/**
|
|
25
|
+
* Custom className
|
|
26
|
+
*/
|
|
27
|
+
className?: string;
|
|
28
|
+
/**
|
|
29
|
+
* Custom style
|
|
30
|
+
*/
|
|
31
|
+
style?: React.CSSProperties;
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* AvatarLogoLockup component - Arbor Design System
|
|
35
|
+
*
|
|
36
|
+
* A navigation component combining user avatar with Arbor logo,
|
|
37
|
+
* typically used in the top navigation bar.
|
|
38
|
+
*/
|
|
39
|
+
declare const AvatarLogoLockup: React.ForwardRefExoticComponent<AvatarLogoLockupProps & React.RefAttributes<HTMLDivElement>>;
|
|
40
|
+
|
|
41
|
+
export { AvatarLogoLockup, type AvatarLogoLockupProps };
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
interface AvatarLogoLockupProps {
|
|
4
|
+
/**
|
|
5
|
+
* Image source URL for the avatar
|
|
6
|
+
*/
|
|
7
|
+
avatarSrc?: string;
|
|
8
|
+
/**
|
|
9
|
+
* Initials to display in avatar when no image is provided
|
|
10
|
+
*/
|
|
11
|
+
avatarInitials?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Alt text for the avatar image
|
|
14
|
+
*/
|
|
15
|
+
avatarAlt?: string;
|
|
16
|
+
/**
|
|
17
|
+
* Click handler for the avatar section
|
|
18
|
+
*/
|
|
19
|
+
onAvatarClick?: () => void;
|
|
20
|
+
/**
|
|
21
|
+
* Click handler for the logo section
|
|
22
|
+
*/
|
|
23
|
+
onLogoClick?: () => void;
|
|
24
|
+
/**
|
|
25
|
+
* Custom className
|
|
26
|
+
*/
|
|
27
|
+
className?: string;
|
|
28
|
+
/**
|
|
29
|
+
* Custom style
|
|
30
|
+
*/
|
|
31
|
+
style?: React.CSSProperties;
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* AvatarLogoLockup component - Arbor Design System
|
|
35
|
+
*
|
|
36
|
+
* A navigation component combining user avatar with Arbor logo,
|
|
37
|
+
* typically used in the top navigation bar.
|
|
38
|
+
*/
|
|
39
|
+
declare const AvatarLogoLockup: React.ForwardRefExoticComponent<AvatarLogoLockupProps & React.RefAttributes<HTMLDivElement>>;
|
|
40
|
+
|
|
41
|
+
export { AvatarLogoLockup, type AvatarLogoLockupProps };
|
|
@@ -0,0 +1,344 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// src/AvatarLogoLockup/index.ts
|
|
31
|
+
var AvatarLogoLockup_exports = {};
|
|
32
|
+
__export(AvatarLogoLockup_exports, {
|
|
33
|
+
AvatarLogoLockup: () => AvatarLogoLockup
|
|
34
|
+
});
|
|
35
|
+
module.exports = __toCommonJS(AvatarLogoLockup_exports);
|
|
36
|
+
|
|
37
|
+
// src/AvatarLogoLockup/AvatarLogoLockup.tsx
|
|
38
|
+
var React3 = __toESM(require("react"));
|
|
39
|
+
var import_lucide_react2 = require("lucide-react");
|
|
40
|
+
|
|
41
|
+
// src/Avatar/Avatar.tsx
|
|
42
|
+
var React = __toESM(require("react"));
|
|
43
|
+
var import_lucide_react = require("lucide-react");
|
|
44
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
45
|
+
var sizeConfig = {
|
|
46
|
+
small: {
|
|
47
|
+
size: 20,
|
|
48
|
+
fontSize: 0,
|
|
49
|
+
// Too small for initials
|
|
50
|
+
fontWeight: 400,
|
|
51
|
+
iconSize: 12,
|
|
52
|
+
borderRadius: "99px"
|
|
53
|
+
},
|
|
54
|
+
medium: {
|
|
55
|
+
size: 32,
|
|
56
|
+
fontSize: 13,
|
|
57
|
+
fontWeight: 400,
|
|
58
|
+
iconSize: 16,
|
|
59
|
+
borderRadius: "99px"
|
|
60
|
+
},
|
|
61
|
+
large: {
|
|
62
|
+
size: 48,
|
|
63
|
+
fontSize: 13,
|
|
64
|
+
fontWeight: 400,
|
|
65
|
+
iconSize: 24,
|
|
66
|
+
borderRadius: "4px"
|
|
67
|
+
},
|
|
68
|
+
"extra-large": {
|
|
69
|
+
size: 96,
|
|
70
|
+
fontSize: 27,
|
|
71
|
+
fontWeight: 600,
|
|
72
|
+
iconSize: 48,
|
|
73
|
+
borderRadius: "8px"
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
var Avatar = React.forwardRef(
|
|
77
|
+
({
|
|
78
|
+
size = "medium",
|
|
79
|
+
src,
|
|
80
|
+
initials,
|
|
81
|
+
alt = "Avatar",
|
|
82
|
+
className,
|
|
83
|
+
style,
|
|
84
|
+
"data-testid": dataTestId
|
|
85
|
+
}, ref) => {
|
|
86
|
+
const [isHovered, setIsHovered] = React.useState(false);
|
|
87
|
+
const [imageError, setImageError] = React.useState(false);
|
|
88
|
+
const config = sizeConfig[size];
|
|
89
|
+
const hasHoverState = size === "small";
|
|
90
|
+
const containerStyles = {
|
|
91
|
+
width: `${config.size}px`,
|
|
92
|
+
height: `${config.size}px`,
|
|
93
|
+
borderRadius: config.borderRadius,
|
|
94
|
+
border: "1px solid #efefef",
|
|
95
|
+
overflow: "hidden",
|
|
96
|
+
position: "relative",
|
|
97
|
+
backgroundColor: "#f8f8f8",
|
|
98
|
+
display: "flex",
|
|
99
|
+
alignItems: "center",
|
|
100
|
+
justifyContent: "center",
|
|
101
|
+
fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
|
|
102
|
+
cursor: "default",
|
|
103
|
+
boxSizing: "border-box",
|
|
104
|
+
...style
|
|
105
|
+
};
|
|
106
|
+
const hoverOverlayStyles = {
|
|
107
|
+
position: "absolute",
|
|
108
|
+
inset: 0,
|
|
109
|
+
pointerEvents: "none",
|
|
110
|
+
boxShadow: isHovered && hasHoverState ? "inset 0px 4px 100px 0px rgba(32, 32, 32, 0.3)" : "none",
|
|
111
|
+
borderRadius: config.borderRadius,
|
|
112
|
+
transition: "box-shadow 0.2s ease-in-out"
|
|
113
|
+
};
|
|
114
|
+
const imageStyles = {
|
|
115
|
+
width: "100%",
|
|
116
|
+
height: "100%",
|
|
117
|
+
objectFit: "cover"
|
|
118
|
+
};
|
|
119
|
+
const initialsStyles = {
|
|
120
|
+
fontSize: `${config.fontSize}px`,
|
|
121
|
+
fontWeight: config.fontWeight,
|
|
122
|
+
color: "#2f2f2f",
|
|
123
|
+
lineHeight: 1.5,
|
|
124
|
+
textAlign: "center",
|
|
125
|
+
userSelect: "none"
|
|
126
|
+
};
|
|
127
|
+
const showImage = src && !imageError;
|
|
128
|
+
const showInitials = !showImage && initials && size !== "small";
|
|
129
|
+
const showPlaceholder = !showImage && !showInitials;
|
|
130
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
131
|
+
"div",
|
|
132
|
+
{
|
|
133
|
+
ref,
|
|
134
|
+
className,
|
|
135
|
+
style: containerStyles,
|
|
136
|
+
onMouseEnter: () => setIsHovered(true),
|
|
137
|
+
onMouseLeave: () => setIsHovered(false),
|
|
138
|
+
"data-testid": dataTestId,
|
|
139
|
+
children: [
|
|
140
|
+
showImage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
141
|
+
"img",
|
|
142
|
+
{
|
|
143
|
+
src,
|
|
144
|
+
alt,
|
|
145
|
+
style: imageStyles,
|
|
146
|
+
onError: () => setImageError(true)
|
|
147
|
+
}
|
|
148
|
+
),
|
|
149
|
+
showInitials && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: initialsStyles, children: initials.slice(0, 2).toUpperCase() }),
|
|
150
|
+
showPlaceholder && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.User, { size: config.iconSize, color: "#d1d1d1", strokeWidth: 2 }),
|
|
151
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: hoverOverlayStyles })
|
|
152
|
+
]
|
|
153
|
+
}
|
|
154
|
+
);
|
|
155
|
+
}
|
|
156
|
+
);
|
|
157
|
+
Avatar.displayName = "Avatar";
|
|
158
|
+
|
|
159
|
+
// src/Logo/Logo.tsx
|
|
160
|
+
var React2 = __toESM(require("react"));
|
|
161
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
162
|
+
var Logo = React2.forwardRef(
|
|
163
|
+
({
|
|
164
|
+
withText = true,
|
|
165
|
+
light = false,
|
|
166
|
+
width,
|
|
167
|
+
height,
|
|
168
|
+
className,
|
|
169
|
+
style
|
|
170
|
+
}, ref) => {
|
|
171
|
+
const defaultWidth = withText ? 66 : 25;
|
|
172
|
+
const defaultHeight = withText ? 26 : 25;
|
|
173
|
+
const finalWidth = width ?? defaultWidth;
|
|
174
|
+
const finalHeight = height ?? defaultHeight;
|
|
175
|
+
if (!withText) {
|
|
176
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
177
|
+
"svg",
|
|
178
|
+
{
|
|
179
|
+
ref,
|
|
180
|
+
width: finalWidth,
|
|
181
|
+
height: finalHeight,
|
|
182
|
+
viewBox: "0 0 25 25",
|
|
183
|
+
fill: "none",
|
|
184
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
185
|
+
className,
|
|
186
|
+
style,
|
|
187
|
+
"aria-label": "Arbor logo",
|
|
188
|
+
children: [
|
|
189
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { clipPath: "url(#clip0_logo_icon)", children: [
|
|
190
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12.6821 12.448C12.6821 9.06699 15.4229 6.32623 18.8039 6.32623C18.8039 2.94571 16.0631 0.205391 12.6817 0.205391C9.30163 0.205391 6.56086 2.94571 6.56042 6.32623C9.94138 6.32623 12.6817 9.06699 12.6821 12.448Z", fill: "#F7931E" }),
|
|
191
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12.6826 12.4481C12.6826 15.8286 9.9423 18.5694 6.56178 18.5694C6.56178 21.9503 9.3021 24.6902 12.6826 24.6902C16.064 24.6902 18.8043 21.9499 18.8043 18.5694C15.4229 18.5676 12.6822 15.8281 12.6822 12.4472L12.6826 12.4481Z", fill: "#AFD318" }),
|
|
192
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M18.8043 6.32631C18.8043 9.70727 16.064 12.448 12.6826 12.448C16.0636 12.448 18.8043 15.1888 18.8043 18.5693C22.1853 18.5693 24.9252 15.8286 24.9252 12.448C24.9252 9.06619 22.1844 6.32543 18.8048 6.32543L18.8043 6.32631Z", fill: "#DEEE21" }),
|
|
193
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12.6826 12.448C16.064 12.448 18.8043 9.70725 18.8043 6.32673C15.4225 6.32673 12.6822 9.06705 12.6826 12.448Z", fill: "#D58822" }),
|
|
194
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12.6822 12.4481C12.6822 15.8286 15.423 18.5693 18.8039 18.5693C18.8039 15.1875 16.0632 12.4472 12.6818 12.4472L12.6822 12.4481Z", fill: "#96BA0F" }),
|
|
195
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12.6826 12.448C9.30204 12.448 6.56128 9.70725 6.56128 6.32673C3.18076 6.32673 0.440002 9.06705 0.440002 12.448C0.440002 15.8285 3.18076 18.5684 6.56128 18.5693C6.56128 15.1874 9.30204 12.4471 12.6826 12.4471V12.448Z", fill: "#7DBA3C" }),
|
|
196
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12.6826 12.448C12.6826 9.06705 9.9423 6.32629 6.56178 6.32629L6.56134 6.32673C6.56134 9.70769 9.3021 12.448 12.6826 12.448Z", fill: "#A0861A" }),
|
|
197
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12.6826 12.4481C9.3021 12.4481 6.56178 15.1888 6.56134 18.5693C9.94186 18.5676 12.6826 15.8281 12.6826 12.4472V12.4481Z", fill: "#68AA22" })
|
|
198
|
+
] }),
|
|
199
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("clipPath", { id: "clip0_logo_icon", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "25", height: "25", fill: "white" }) }) })
|
|
200
|
+
]
|
|
201
|
+
}
|
|
202
|
+
);
|
|
203
|
+
}
|
|
204
|
+
const textColor = light ? "#2F2F2F" : "white";
|
|
205
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
206
|
+
"svg",
|
|
207
|
+
{
|
|
208
|
+
ref,
|
|
209
|
+
width: finalWidth,
|
|
210
|
+
height: finalHeight,
|
|
211
|
+
viewBox: "0 0 66 26",
|
|
212
|
+
fill: "none",
|
|
213
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
214
|
+
className,
|
|
215
|
+
style,
|
|
216
|
+
"aria-label": "Arbor",
|
|
217
|
+
children: [
|
|
218
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12.6822 12.4479C12.6822 9.06698 15.423 6.32622 18.8039 6.32622C18.8039 2.9457 16.0632 0.205383 12.6818 0.205383C9.30169 0.205383 6.56093 2.9457 6.56049 6.32622C9.94145 6.32622 12.6818 9.06698 12.6822 12.4479Z", fill: "#F7931E" }),
|
|
219
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12.6826 12.4481C12.6826 15.8286 9.9423 18.5694 6.56178 18.5694C6.56178 21.9503 9.3021 24.6902 12.6826 24.6902C16.064 24.6902 18.8043 21.9499 18.8043 18.5694C15.4229 18.5676 12.6822 15.8281 12.6822 12.4472L12.6826 12.4481Z", fill: "#AFD318" }),
|
|
220
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M18.8044 6.3263C18.8044 9.70726 16.0641 12.448 12.6827 12.448C16.0636 12.448 18.8044 15.1888 18.8044 18.5693C22.1854 18.5693 24.9252 15.8285 24.9252 12.448C24.9252 9.06618 22.1845 6.32542 18.8048 6.32542L18.8044 6.3263Z", fill: "#DEEE21" }),
|
|
221
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12.6827 12.448C16.0641 12.448 18.8044 9.70725 18.8044 6.32673C15.4226 6.32673 12.6822 9.06705 12.6827 12.448Z", fill: "#D58822" }),
|
|
222
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12.6823 12.4481C12.6823 15.8286 15.423 18.5693 18.804 18.5693C18.804 15.1875 16.0632 12.4472 12.6818 12.4472L12.6823 12.4481Z", fill: "#96BA0F" }),
|
|
223
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12.6826 12.448C9.30204 12.448 6.56128 9.70725 6.56128 6.32673C3.18076 6.32673 0.440002 9.06705 0.440002 12.448C0.440002 15.8285 3.18076 18.5684 6.56128 18.5693C6.56128 15.1875 9.30204 12.4471 12.6826 12.4471V12.448Z", fill: "#7DBA3C" }),
|
|
224
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12.6826 12.448C12.6826 9.06705 9.9423 6.32629 6.56178 6.32629L6.56134 6.32673C6.56134 9.70769 9.3021 12.448 12.6826 12.448Z", fill: "#A0861A" }),
|
|
225
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12.6826 12.4481C9.3021 12.4481 6.56178 15.1888 6.56134 18.5693C9.94186 18.5676 12.6826 15.8281 12.6826 12.4472V12.4481Z", fill: "#68AA22" }),
|
|
226
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M37.7924 17.8181L36.4913 14.3809H31.9131L30.6604 17.7055H29.1345L33.4716 6.57394H34.9821L39.255 17.4965L37.7924 17.8181ZM34.1936 8.37222L32.4266 13.0459H35.9761L34.195 8.37222H34.1936Z", fill: textColor }),
|
|
227
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M41.4713 13.1755V17.7053H40.0417V10.0427H41.1822L41.4229 11.6012C41.9689 10.7335 42.8529 9.94635 44.1056 9.88211L44.3308 11.2479C43.0614 11.3121 41.9843 12.1635 41.4708 13.1751L41.4713 13.1755Z", fill: textColor }),
|
|
228
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M48.2659 17.8016C47.1092 17.8016 46.2903 17.6252 45.2779 17.3194V6.33171L46.707 6.10687V10.942C47.2218 10.4118 47.9601 9.88163 49.0047 9.88163C50.6591 9.88163 52.024 11.1026 52.024 13.6564C52.024 16.4513 50.4822 17.8008 48.2659 17.8008V17.8016ZM48.7957 11.1515C47.9931 11.1515 47.2861 11.6817 46.7079 12.4046V16.3241C47.1897 16.5006 47.5439 16.5811 48.2505 16.5811C49.7443 16.5811 50.5795 15.6971 50.5795 13.722C50.5795 12.0522 49.8231 11.1528 48.7957 11.1528V11.1515Z", fill: textColor }),
|
|
229
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M56.5064 17.8664C54.467 17.8664 52.9882 16.4042 52.9882 13.8826C52.9882 11.3605 54.467 9.88211 56.5064 9.88211C58.563 9.88211 60.0722 11.3601 60.0722 13.8826C60.0722 16.4038 58.563 17.8664 56.5064 17.8664ZM56.5064 11.0873C55.1248 11.0873 54.4345 12.2762 54.4345 13.8822C54.4345 15.4565 55.1574 16.6775 56.5064 16.6775C57.9202 16.6775 58.6263 15.4886 58.6263 13.8822C58.625 12.3087 57.8845 11.0877 56.5042 11.0877L56.5064 11.0873Z", fill: textColor }),
|
|
230
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M62.4495 13.1755V17.7053H61.0199V10.0427H62.1613L62.4019 11.6012C62.948 10.7335 63.8315 9.94635 65.0846 9.88211L65.3099 11.2479C64.0423 11.3121 62.9651 12.1635 62.4517 13.1751L62.4495 13.1755Z", fill: textColor })
|
|
231
|
+
]
|
|
232
|
+
}
|
|
233
|
+
);
|
|
234
|
+
}
|
|
235
|
+
);
|
|
236
|
+
Logo.displayName = "Logo";
|
|
237
|
+
|
|
238
|
+
// src/AvatarLogoLockup/AvatarLogoLockup.tsx
|
|
239
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
240
|
+
var AvatarLogoLockup = React3.forwardRef(
|
|
241
|
+
({
|
|
242
|
+
avatarSrc,
|
|
243
|
+
avatarInitials,
|
|
244
|
+
avatarAlt = "User avatar",
|
|
245
|
+
onAvatarClick,
|
|
246
|
+
onLogoClick,
|
|
247
|
+
className,
|
|
248
|
+
style
|
|
249
|
+
}, ref) => {
|
|
250
|
+
const [isHovered, setIsHovered] = React3.useState(false);
|
|
251
|
+
const containerStyles = {
|
|
252
|
+
display: "inline-flex",
|
|
253
|
+
alignItems: "center",
|
|
254
|
+
gap: "4px",
|
|
255
|
+
padding: "4px",
|
|
256
|
+
height: "40px",
|
|
257
|
+
backgroundColor: isHovered ? "#f8f8f8" : "#ffffff",
|
|
258
|
+
border: "1px solid #efefef",
|
|
259
|
+
borderRadius: "99px",
|
|
260
|
+
fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
|
|
261
|
+
boxSizing: "border-box",
|
|
262
|
+
transition: "background-color 0.15s ease-in-out",
|
|
263
|
+
...style
|
|
264
|
+
};
|
|
265
|
+
const avatarSectionStyles = {
|
|
266
|
+
display: "flex",
|
|
267
|
+
alignItems: "center",
|
|
268
|
+
gap: "4px",
|
|
269
|
+
borderRadius: "99px",
|
|
270
|
+
cursor: onAvatarClick ? "pointer" : "default",
|
|
271
|
+
backgroundColor: "transparent",
|
|
272
|
+
border: "none",
|
|
273
|
+
padding: 0
|
|
274
|
+
};
|
|
275
|
+
const dividerStyles = {
|
|
276
|
+
width: "1px",
|
|
277
|
+
height: "24px",
|
|
278
|
+
backgroundColor: "#efefef",
|
|
279
|
+
flexShrink: 0
|
|
280
|
+
};
|
|
281
|
+
const logoSectionStyles = {
|
|
282
|
+
display: "flex",
|
|
283
|
+
alignItems: "center",
|
|
284
|
+
cursor: onLogoClick ? "pointer" : "default",
|
|
285
|
+
padding: 0
|
|
286
|
+
};
|
|
287
|
+
const AvatarSection = onAvatarClick ? "button" : "div";
|
|
288
|
+
const LogoSection = onLogoClick ? "button" : "div";
|
|
289
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
290
|
+
"div",
|
|
291
|
+
{
|
|
292
|
+
ref,
|
|
293
|
+
className,
|
|
294
|
+
style: containerStyles,
|
|
295
|
+
onMouseEnter: () => setIsHovered(true),
|
|
296
|
+
onMouseLeave: () => setIsHovered(false),
|
|
297
|
+
children: [
|
|
298
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
299
|
+
AvatarSection,
|
|
300
|
+
{
|
|
301
|
+
style: {
|
|
302
|
+
...avatarSectionStyles,
|
|
303
|
+
...onAvatarClick ? { outline: "none" } : {}
|
|
304
|
+
},
|
|
305
|
+
onClick: onAvatarClick,
|
|
306
|
+
...onAvatarClick ? { type: "button" } : {},
|
|
307
|
+
children: [
|
|
308
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
309
|
+
Avatar,
|
|
310
|
+
{
|
|
311
|
+
size: "medium",
|
|
312
|
+
src: avatarSrc,
|
|
313
|
+
initials: avatarInitials,
|
|
314
|
+
alt: avatarAlt
|
|
315
|
+
}
|
|
316
|
+
),
|
|
317
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.ChevronDown, { size: 12, color: "#2f2f2f", strokeWidth: 2 })
|
|
318
|
+
]
|
|
319
|
+
}
|
|
320
|
+
),
|
|
321
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: dividerStyles }),
|
|
322
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
323
|
+
LogoSection,
|
|
324
|
+
{
|
|
325
|
+
style: {
|
|
326
|
+
...logoSectionStyles,
|
|
327
|
+
...onLogoClick ? { outline: "none", backgroundColor: "transparent", border: "none" } : {}
|
|
328
|
+
},
|
|
329
|
+
onClick: onLogoClick,
|
|
330
|
+
...onLogoClick ? { type: "button" } : {},
|
|
331
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Logo, { withText: true, light: true, height: 25 })
|
|
332
|
+
}
|
|
333
|
+
)
|
|
334
|
+
]
|
|
335
|
+
}
|
|
336
|
+
);
|
|
337
|
+
}
|
|
338
|
+
);
|
|
339
|
+
AvatarLogoLockup.displayName = "AvatarLogoLockup";
|
|
340
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
341
|
+
0 && (module.exports = {
|
|
342
|
+
AvatarLogoLockup
|
|
343
|
+
});
|
|
344
|
+
//# sourceMappingURL=AvatarLogoLockup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/AvatarLogoLockup/index.ts","../src/AvatarLogoLockup/AvatarLogoLockup.tsx","../src/Avatar/Avatar.tsx","../src/Logo/Logo.tsx"],"sourcesContent":["export { AvatarLogoLockup } from './AvatarLogoLockup';\nexport type { AvatarLogoLockupProps } from './AvatarLogoLockup';\n","import * as React from 'react';\nimport { ChevronDown } from 'lucide-react';\nimport { Avatar } from '../Avatar';\nimport { Logo } from '../Logo';\n\nexport interface AvatarLogoLockupProps {\n /**\n * Image source URL for the avatar\n */\n avatarSrc?: string;\n /**\n * Initials to display in avatar when no image is provided\n */\n avatarInitials?: string;\n /**\n * Alt text for the avatar image\n */\n avatarAlt?: string;\n /**\n * Click handler for the avatar section\n */\n onAvatarClick?: () => void;\n /**\n * Click handler for the logo section\n */\n onLogoClick?: () => void;\n /**\n * Custom className\n */\n className?: string;\n /**\n * Custom style\n */\n style?: React.CSSProperties;\n}\n\n/**\n * AvatarLogoLockup component - Arbor Design System\n *\n * A navigation component combining user avatar with Arbor logo,\n * typically used in the top navigation bar.\n */\nexport const AvatarLogoLockup = React.forwardRef<HTMLDivElement, AvatarLogoLockupProps>(\n (\n {\n avatarSrc,\n avatarInitials,\n avatarAlt = 'User avatar',\n onAvatarClick,\n onLogoClick,\n className,\n style,\n },\n ref\n ) => {\n const [isHovered, setIsHovered] = React.useState(false);\n\n const containerStyles: React.CSSProperties = {\n display: 'inline-flex',\n alignItems: 'center',\n gap: '4px',\n padding: '4px',\n height: '40px',\n backgroundColor: isHovered ? '#f8f8f8' : '#ffffff',\n border: '1px solid #efefef',\n borderRadius: '99px',\n fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n boxSizing: 'border-box',\n transition: 'background-color 0.15s ease-in-out',\n ...style,\n };\n\n const avatarSectionStyles: React.CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n gap: '4px',\n borderRadius: '99px',\n cursor: onAvatarClick ? 'pointer' : 'default',\n backgroundColor: 'transparent',\n border: 'none',\n padding: 0,\n };\n\n const dividerStyles: React.CSSProperties = {\n width: '1px',\n height: '24px',\n backgroundColor: '#efefef',\n flexShrink: 0,\n };\n\n const logoSectionStyles: React.CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n cursor: onLogoClick ? 'pointer' : 'default',\n padding: 0,\n };\n\n const AvatarSection = onAvatarClick ? 'button' : 'div';\n const LogoSection = onLogoClick ? 'button' : 'div';\n\n return (\n <div\n ref={ref}\n className={className}\n style={containerStyles}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n <AvatarSection\n style={{\n ...avatarSectionStyles,\n ...(onAvatarClick ? { outline: 'none' } : {}),\n }}\n onClick={onAvatarClick}\n {...(onAvatarClick ? { type: 'button' } : {})}\n >\n <Avatar\n size=\"medium\"\n src={avatarSrc}\n initials={avatarInitials}\n alt={avatarAlt}\n />\n <ChevronDown size={12} color=\"#2f2f2f\" strokeWidth={2} />\n </AvatarSection>\n\n <div style={dividerStyles} />\n\n <LogoSection\n style={{\n ...logoSectionStyles,\n ...(onLogoClick ? { outline: 'none', backgroundColor: 'transparent', border: 'none' } : {}),\n }}\n onClick={onLogoClick}\n {...(onLogoClick ? { type: 'button' } : {})}\n >\n <Logo withText={true} light={true} height={25} />\n </LogoSection>\n </div>\n );\n }\n);\n\nAvatarLogoLockup.displayName = 'AvatarLogoLockup';\n","import * as React from 'react';\nimport { User } from 'lucide-react';\n\nexport type AvatarSize = 'small' | 'medium' | 'large' | 'extra-large';\n\nexport interface AvatarProps {\n /**\n * Size of the avatar\n */\n size?: AvatarSize;\n /**\n * Image source URL\n */\n src?: string;\n /**\n * Initials to display (2 characters) when no image is provided\n */\n initials?: string;\n /**\n * Alt text for the image\n */\n alt?: string;\n /**\n * Custom className\n */\n className?: string;\n /**\n * Custom style\n */\n style?: React.CSSProperties;\n /**\n * Test ID for testing\n */\n 'data-testid'?: string;\n}\n\nconst sizeConfig = {\n small: {\n size: 20,\n fontSize: 0, // Too small for initials\n fontWeight: 400,\n iconSize: 12,\n borderRadius: '99px',\n },\n medium: {\n size: 32,\n fontSize: 13,\n fontWeight: 400,\n iconSize: 16,\n borderRadius: '99px',\n },\n large: {\n size: 48,\n fontSize: 13,\n fontWeight: 400,\n iconSize: 24,\n borderRadius: '4px',\n },\n 'extra-large': {\n size: 96,\n fontSize: 27,\n fontWeight: 600,\n iconSize: 48,\n borderRadius: '8px',\n },\n};\n\n/**\n * Avatar component - Arbor Design System\n *\n * Displays a user avatar with support for images, initials, or a placeholder icon.\n * Features hover state with inner shadow effect.\n */\nexport const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(\n (\n {\n size = 'medium',\n src,\n initials,\n alt = 'Avatar',\n className,\n style,\n 'data-testid': dataTestId,\n },\n ref\n ) => {\n const [isHovered, setIsHovered] = React.useState(false);\n const [imageError, setImageError] = React.useState(false);\n const config = sizeConfig[size];\n\n // Only apply hover state for small size\n const hasHoverState = size === 'small';\n\n const containerStyles: React.CSSProperties = {\n width: `${config.size}px`,\n height: `${config.size}px`,\n borderRadius: config.borderRadius,\n border: '1px solid #efefef',\n overflow: 'hidden',\n position: 'relative',\n backgroundColor: '#f8f8f8',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n cursor: 'default',\n boxSizing: 'border-box',\n ...style,\n };\n\n const hoverOverlayStyles: React.CSSProperties = {\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n boxShadow: isHovered && hasHoverState ? 'inset 0px 4px 100px 0px rgba(32, 32, 32, 0.3)' : 'none',\n borderRadius: config.borderRadius,\n transition: 'box-shadow 0.2s ease-in-out',\n };\n\n const imageStyles: React.CSSProperties = {\n width: '100%',\n height: '100%',\n objectFit: 'cover',\n };\n\n const initialsStyles: React.CSSProperties = {\n fontSize: `${config.fontSize}px`,\n fontWeight: config.fontWeight,\n color: '#2f2f2f',\n lineHeight: 1.5,\n textAlign: 'center',\n userSelect: 'none',\n };\n\n // Determine what to display\n const showImage = src && !imageError;\n const showInitials = !showImage && initials && size !== 'small';\n const showPlaceholder = !showImage && !showInitials;\n\n return (\n <div\n ref={ref}\n className={className}\n style={containerStyles}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n data-testid={dataTestId}\n >\n {showImage && (\n <img\n src={src}\n alt={alt}\n style={imageStyles}\n onError={() => setImageError(true)}\n />\n )}\n\n {showInitials && (\n <span style={initialsStyles}>\n {initials.slice(0, 2).toUpperCase()}\n </span>\n )}\n\n {showPlaceholder && (\n <User size={config.iconSize} color=\"#d1d1d1\" strokeWidth={2} />\n )}\n\n <div style={hoverOverlayStyles} />\n </div>\n );\n }\n);\n\nAvatar.displayName = 'Avatar';\n","import * as React from 'react';\n\nexport interface LogoProps {\n /**\n * Whether to show the \"Arbor\" text alongside the logo\n */\n withText?: boolean;\n /**\n * Whether to use light (dark text) or dark (white text) variant\n * Only applies when withText is true\n */\n light?: boolean;\n /**\n * Width of the logo in pixels\n * @default withText ? 66 : 25\n */\n width?: number;\n /**\n * Height of the logo in pixels\n * @default withText ? 26 : 25\n */\n height?: number;\n /**\n * Custom className\n */\n className?: string;\n /**\n * Custom style\n */\n style?: React.CSSProperties;\n}\n\n/**\n * Logo component - Arbor Design System\n *\n * Displays the Arbor logo with optional text in light or dark variants.\n */\nexport const Logo = React.forwardRef<SVGSVGElement, LogoProps>(\n (\n {\n withText = true,\n light = false,\n width,\n height,\n className,\n style,\n },\n ref\n ) => {\n const defaultWidth = withText ? 66 : 25;\n const defaultHeight = withText ? 26 : 25;\n const finalWidth = width ?? defaultWidth;\n const finalHeight = height ?? defaultHeight;\n\n // Icon only (no text)\n if (!withText) {\n return (\n <svg\n ref={ref}\n width={finalWidth}\n height={finalHeight}\n viewBox=\"0 0 25 25\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={className}\n style={style}\n aria-label=\"Arbor logo\"\n >\n <g clipPath=\"url(#clip0_logo_icon)\">\n <path d=\"M12.6821 12.448C12.6821 9.06699 15.4229 6.32623 18.8039 6.32623C18.8039 2.94571 16.0631 0.205391 12.6817 0.205391C9.30163 0.205391 6.56086 2.94571 6.56042 6.32623C9.94138 6.32623 12.6817 9.06699 12.6821 12.448Z\" fill=\"#F7931E\"/>\n <path d=\"M12.6826 12.4481C12.6826 15.8286 9.9423 18.5694 6.56178 18.5694C6.56178 21.9503 9.3021 24.6902 12.6826 24.6902C16.064 24.6902 18.8043 21.9499 18.8043 18.5694C15.4229 18.5676 12.6822 15.8281 12.6822 12.4472L12.6826 12.4481Z\" fill=\"#AFD318\"/>\n <path d=\"M18.8043 6.32631C18.8043 9.70727 16.064 12.448 12.6826 12.448C16.0636 12.448 18.8043 15.1888 18.8043 18.5693C22.1853 18.5693 24.9252 15.8286 24.9252 12.448C24.9252 9.06619 22.1844 6.32543 18.8048 6.32543L18.8043 6.32631Z\" fill=\"#DEEE21\"/>\n <path d=\"M12.6826 12.448C16.064 12.448 18.8043 9.70725 18.8043 6.32673C15.4225 6.32673 12.6822 9.06705 12.6826 12.448Z\" fill=\"#D58822\"/>\n <path d=\"M12.6822 12.4481C12.6822 15.8286 15.423 18.5693 18.8039 18.5693C18.8039 15.1875 16.0632 12.4472 12.6818 12.4472L12.6822 12.4481Z\" fill=\"#96BA0F\"/>\n <path d=\"M12.6826 12.448C9.30204 12.448 6.56128 9.70725 6.56128 6.32673C3.18076 6.32673 0.440002 9.06705 0.440002 12.448C0.440002 15.8285 3.18076 18.5684 6.56128 18.5693C6.56128 15.1874 9.30204 12.4471 12.6826 12.4471V12.448Z\" fill=\"#7DBA3C\"/>\n <path d=\"M12.6826 12.448C12.6826 9.06705 9.9423 6.32629 6.56178 6.32629L6.56134 6.32673C6.56134 9.70769 9.3021 12.448 12.6826 12.448Z\" fill=\"#A0861A\"/>\n <path d=\"M12.6826 12.4481C9.3021 12.4481 6.56178 15.1888 6.56134 18.5693C9.94186 18.5676 12.6826 15.8281 12.6826 12.4472V12.4481Z\" fill=\"#68AA22\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_logo_icon\">\n <rect width=\"25\" height=\"25\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n );\n }\n\n // Logo with text\n const textColor = light ? '#2F2F2F' : 'white';\n\n return (\n <svg\n ref={ref}\n width={finalWidth}\n height={finalHeight}\n viewBox=\"0 0 66 26\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={className}\n style={style}\n aria-label=\"Arbor\"\n >\n <path d=\"M12.6822 12.4479C12.6822 9.06698 15.423 6.32622 18.8039 6.32622C18.8039 2.9457 16.0632 0.205383 12.6818 0.205383C9.30169 0.205383 6.56093 2.9457 6.56049 6.32622C9.94145 6.32622 12.6818 9.06698 12.6822 12.4479Z\" fill=\"#F7931E\"/>\n <path d=\"M12.6826 12.4481C12.6826 15.8286 9.9423 18.5694 6.56178 18.5694C6.56178 21.9503 9.3021 24.6902 12.6826 24.6902C16.064 24.6902 18.8043 21.9499 18.8043 18.5694C15.4229 18.5676 12.6822 15.8281 12.6822 12.4472L12.6826 12.4481Z\" fill=\"#AFD318\"/>\n <path d=\"M18.8044 6.3263C18.8044 9.70726 16.0641 12.448 12.6827 12.448C16.0636 12.448 18.8044 15.1888 18.8044 18.5693C22.1854 18.5693 24.9252 15.8285 24.9252 12.448C24.9252 9.06618 22.1845 6.32542 18.8048 6.32542L18.8044 6.3263Z\" fill=\"#DEEE21\"/>\n <path d=\"M12.6827 12.448C16.0641 12.448 18.8044 9.70725 18.8044 6.32673C15.4226 6.32673 12.6822 9.06705 12.6827 12.448Z\" fill=\"#D58822\"/>\n <path d=\"M12.6823 12.4481C12.6823 15.8286 15.423 18.5693 18.804 18.5693C18.804 15.1875 16.0632 12.4472 12.6818 12.4472L12.6823 12.4481Z\" fill=\"#96BA0F\"/>\n <path d=\"M12.6826 12.448C9.30204 12.448 6.56128 9.70725 6.56128 6.32673C3.18076 6.32673 0.440002 9.06705 0.440002 12.448C0.440002 15.8285 3.18076 18.5684 6.56128 18.5693C6.56128 15.1875 9.30204 12.4471 12.6826 12.4471V12.448Z\" fill=\"#7DBA3C\"/>\n <path d=\"M12.6826 12.448C12.6826 9.06705 9.9423 6.32629 6.56178 6.32629L6.56134 6.32673C6.56134 9.70769 9.3021 12.448 12.6826 12.448Z\" fill=\"#A0861A\"/>\n <path d=\"M12.6826 12.4481C9.3021 12.4481 6.56178 15.1888 6.56134 18.5693C9.94186 18.5676 12.6826 15.8281 12.6826 12.4472V12.4481Z\" fill=\"#68AA22\"/>\n <path d=\"M37.7924 17.8181L36.4913 14.3809H31.9131L30.6604 17.7055H29.1345L33.4716 6.57394H34.9821L39.255 17.4965L37.7924 17.8181ZM34.1936 8.37222L32.4266 13.0459H35.9761L34.195 8.37222H34.1936Z\" fill={textColor}/>\n <path d=\"M41.4713 13.1755V17.7053H40.0417V10.0427H41.1822L41.4229 11.6012C41.9689 10.7335 42.8529 9.94635 44.1056 9.88211L44.3308 11.2479C43.0614 11.3121 41.9843 12.1635 41.4708 13.1751L41.4713 13.1755Z\" fill={textColor}/>\n <path d=\"M48.2659 17.8016C47.1092 17.8016 46.2903 17.6252 45.2779 17.3194V6.33171L46.707 6.10687V10.942C47.2218 10.4118 47.9601 9.88163 49.0047 9.88163C50.6591 9.88163 52.024 11.1026 52.024 13.6564C52.024 16.4513 50.4822 17.8008 48.2659 17.8008V17.8016ZM48.7957 11.1515C47.9931 11.1515 47.2861 11.6817 46.7079 12.4046V16.3241C47.1897 16.5006 47.5439 16.5811 48.2505 16.5811C49.7443 16.5811 50.5795 15.6971 50.5795 13.722C50.5795 12.0522 49.8231 11.1528 48.7957 11.1528V11.1515Z\" fill={textColor}/>\n <path d=\"M56.5064 17.8664C54.467 17.8664 52.9882 16.4042 52.9882 13.8826C52.9882 11.3605 54.467 9.88211 56.5064 9.88211C58.563 9.88211 60.0722 11.3601 60.0722 13.8826C60.0722 16.4038 58.563 17.8664 56.5064 17.8664ZM56.5064 11.0873C55.1248 11.0873 54.4345 12.2762 54.4345 13.8822C54.4345 15.4565 55.1574 16.6775 56.5064 16.6775C57.9202 16.6775 58.6263 15.4886 58.6263 13.8822C58.625 12.3087 57.8845 11.0877 56.5042 11.0877L56.5064 11.0873Z\" fill={textColor}/>\n <path d=\"M62.4495 13.1755V17.7053H61.0199V10.0427H62.1613L62.4019 11.6012C62.948 10.7335 63.8315 9.94635 65.0846 9.88211L65.3099 11.2479C64.0423 11.3121 62.9651 12.1635 62.4517 13.1751L62.4495 13.1755Z\" fill={textColor}/>\n </svg>\n );\n }\n);\n\nLogo.displayName = 'Logo';\n"],"mappings":"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","names":["React","import_lucide_react","React","import_jsx_runtime","import_jsx_runtime"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
interface NavItem {
|
|
4
|
+
/**
|
|
5
|
+
* Unique identifier for the nav item
|
|
6
|
+
*/
|
|
7
|
+
id: string;
|
|
8
|
+
/**
|
|
9
|
+
* Display label for the nav item
|
|
10
|
+
*/
|
|
11
|
+
label: string;
|
|
12
|
+
/**
|
|
13
|
+
* Whether this nav item is currently active
|
|
14
|
+
*/
|
|
15
|
+
active?: boolean;
|
|
16
|
+
}
|
|
17
|
+
interface TopNavBarProps {
|
|
18
|
+
/**
|
|
19
|
+
* School logo image source URL
|
|
20
|
+
*/
|
|
21
|
+
schoolLogoSrc?: string;
|
|
22
|
+
/**
|
|
23
|
+
* Alt text for school logo
|
|
24
|
+
*/
|
|
25
|
+
schoolLogoAlt?: string;
|
|
26
|
+
/**
|
|
27
|
+
* Click handler for school logo
|
|
28
|
+
*/
|
|
29
|
+
onSchoolLogoClick?: () => void;
|
|
30
|
+
/**
|
|
31
|
+
* Array of navigation items
|
|
32
|
+
*/
|
|
33
|
+
navItems?: NavItem[];
|
|
34
|
+
/**
|
|
35
|
+
* Callback when a nav item is clicked
|
|
36
|
+
*/
|
|
37
|
+
onNavItemClick?: (item: NavItem) => void;
|
|
38
|
+
/**
|
|
39
|
+
* Search value
|
|
40
|
+
*/
|
|
41
|
+
searchValue?: string;
|
|
42
|
+
/**
|
|
43
|
+
* Search change handler
|
|
44
|
+
*/
|
|
45
|
+
onSearchChange?: (value: string) => void;
|
|
46
|
+
/**
|
|
47
|
+
* Search submit handler
|
|
48
|
+
*/
|
|
49
|
+
onSearchSubmit?: (value: string) => void;
|
|
50
|
+
/**
|
|
51
|
+
* Search clear handler
|
|
52
|
+
*/
|
|
53
|
+
onSearchClear?: () => void;
|
|
54
|
+
/**
|
|
55
|
+
* Action button label (e.g., "Ask Arbor")
|
|
56
|
+
*/
|
|
57
|
+
actionButtonLabel?: string;
|
|
58
|
+
/**
|
|
59
|
+
* Action button click handler
|
|
60
|
+
*/
|
|
61
|
+
onActionButtonClick?: () => void;
|
|
62
|
+
/**
|
|
63
|
+
* Whether to show the action button
|
|
64
|
+
*/
|
|
65
|
+
showActionButton?: boolean;
|
|
66
|
+
/**
|
|
67
|
+
* User avatar image source URL
|
|
68
|
+
*/
|
|
69
|
+
avatarSrc?: string;
|
|
70
|
+
/**
|
|
71
|
+
* User avatar initials (fallback when no image)
|
|
72
|
+
*/
|
|
73
|
+
avatarInitials?: string;
|
|
74
|
+
/**
|
|
75
|
+
* User avatar alt text
|
|
76
|
+
*/
|
|
77
|
+
avatarAlt?: string;
|
|
78
|
+
/**
|
|
79
|
+
* Avatar section click handler
|
|
80
|
+
*/
|
|
81
|
+
onAvatarClick?: () => void;
|
|
82
|
+
/**
|
|
83
|
+
* Logo section click handler
|
|
84
|
+
*/
|
|
85
|
+
onLogoClick?: () => void;
|
|
86
|
+
/**
|
|
87
|
+
* Custom className
|
|
88
|
+
*/
|
|
89
|
+
className?: string;
|
|
90
|
+
/**
|
|
91
|
+
* Custom style
|
|
92
|
+
*/
|
|
93
|
+
style?: React.CSSProperties;
|
|
94
|
+
}
|
|
95
|
+
/**
|
|
96
|
+
* TopNavBar component - Arbor Design System
|
|
97
|
+
*
|
|
98
|
+
* A full-width navigation bar fixed to the top of the page.
|
|
99
|
+
* Contains school logo, navigation items, search, action button, and avatar-logo lockup.
|
|
100
|
+
*/
|
|
101
|
+
declare const TopNavBar: React.ForwardRefExoticComponent<TopNavBarProps & React.RefAttributes<HTMLElement>>;
|
|
102
|
+
|
|
103
|
+
export { type NavItem, TopNavBar, type TopNavBarProps };
|