@xfers/design-system 8.0.0 → 8.1.0-dev.facf6bb234
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/cjs/index.js +494 -208
- package/cjs/index.js.map +1 -1
- package/dist/components/Select/style.js +29 -21
- package/dist/components/Select/style.js.map +1 -1
- package/dist/components/Sidebar/CompanyProfile.js +123 -0
- package/dist/components/Sidebar/CompanyProfile.js.map +1 -0
- package/dist/components/Sidebar/CompanyProfileDropdown.js +29 -0
- package/dist/components/Sidebar/CompanyProfileDropdown.js.map +1 -0
- package/dist/components/Sidebar/CopyrightNotice.js +14 -0
- package/dist/components/Sidebar/CopyrightNotice.js.map +1 -0
- package/dist/components/Sidebar/Sidebar.js +154 -0
- package/dist/components/Sidebar/Sidebar.js.map +1 -0
- package/dist/components/Sidebar/SidebarNavItem.js +39 -0
- package/dist/components/Sidebar/SidebarNavItem.js.map +1 -0
- package/dist/components/Sidebar/SidebarSubItem.js +11 -0
- package/dist/components/Sidebar/SidebarSubItem.js.map +1 -0
- package/dist/components/Sidebar/dropdownStyles.js +125 -0
- package/dist/components/Sidebar/dropdownStyles.js.map +1 -0
- package/dist/components/Sidebar/index.js +56 -0
- package/dist/components/Sidebar/index.js.map +1 -0
- package/dist/components/Sidebar/styles.js +214 -0
- package/dist/components/Sidebar/styles.js.map +1 -0
- package/dist/constants/Colors/colors.js +2 -0
- package/dist/constants/Colors/colors.js.map +1 -1
- package/dist/index.js +12 -1
- package/dist/index.js.map +1 -1
- package/dist/types/components/Sidebar/CompanyProfile.d.ts +16 -0
- package/dist/types/components/Sidebar/CompanyProfileDropdown.d.ts +32 -0
- package/dist/types/components/Sidebar/CopyrightNotice.d.ts +6 -0
- package/dist/types/components/Sidebar/Sidebar.d.ts +40 -0
- package/dist/types/components/Sidebar/SidebarNavItem.d.ts +30 -0
- package/dist/types/components/Sidebar/SidebarSubItem.d.ts +10 -0
- package/dist/types/components/Sidebar/dropdownStyles.d.ts +12 -0
- package/dist/types/components/Sidebar/index.d.ts +11 -0
- package/dist/types/components/Sidebar/styles.d.ts +33 -0
- package/dist/types/constants/Colors/colors.d.ts +3 -1
- package/dist/types/index.d.ts +2 -0
- package/es/index.js +598 -312
- package/es/index.js.map +1 -1
- package/package.json +3 -4
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.DropdownDivider = exports.DropdownMenuLabel = exports.DropdownSecondaryText = exports.DropdownPrimaryText = exports.DropdownRowContent = exports.DropdownMenuRow = exports.DropdownRow = exports.DropdownSectionLabel = exports.DropdownPanel = exports.DropdownFlyout = void 0;
|
|
7
|
+
const styled_1 = __importDefault(require("@emotion/styled"));
|
|
8
|
+
const fontStyles_1 = require("../../constants/fontStyles");
|
|
9
|
+
const colors_1 = require("../../constants/Colors/colors");
|
|
10
|
+
// ─── Company profile dropdown ───
|
|
11
|
+
/*
|
|
12
|
+
* Flyout wrapper: fixed-positioned so it escapes the sidebar's overflow
|
|
13
|
+
* clipping and opens to the right of the panel. CompanyProfile sets top/left
|
|
14
|
+
* inline from the trigger's measured position.
|
|
15
|
+
*/
|
|
16
|
+
exports.DropdownFlyout = styled_1.default.div `
|
|
17
|
+
position: fixed;
|
|
18
|
+
z-index: 1000;
|
|
19
|
+
`;
|
|
20
|
+
exports.DropdownPanel = styled_1.default.div `
|
|
21
|
+
width: 208px;
|
|
22
|
+
box-sizing: border-box;
|
|
23
|
+
padding: 8px 0;
|
|
24
|
+
border-radius: 12px;
|
|
25
|
+
overflow: hidden;
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-direction: column;
|
|
28
|
+
align-items: flex-start;
|
|
29
|
+
background-color: ${colors_1.SURFACE.NEUTRAL};
|
|
30
|
+
box-shadow:
|
|
31
|
+
0px 12px 16px -4px rgba(10, 13, 18, 0.08),
|
|
32
|
+
0px 4px 6px -2px rgba(10, 13, 18, 0.03);
|
|
33
|
+
`;
|
|
34
|
+
exports.DropdownSectionLabel = styled_1.default.div `
|
|
35
|
+
display: flex;
|
|
36
|
+
align-items: center;
|
|
37
|
+
padding: 8px 12px;
|
|
38
|
+
width: 100%;
|
|
39
|
+
box-sizing: border-box;
|
|
40
|
+
font-family: ${fontStyles_1.MAIN_FONT}, ${fontStyles_1.FALLBACK_FONT};
|
|
41
|
+
font-weight: 400;
|
|
42
|
+
font-size: 12px;
|
|
43
|
+
line-height: normal;
|
|
44
|
+
color: ${colors_1.BASE.ON_NEUTRAL_SECONDARY};
|
|
45
|
+
white-space: nowrap;
|
|
46
|
+
`;
|
|
47
|
+
exports.DropdownRow = styled_1.default.div `
|
|
48
|
+
display: flex;
|
|
49
|
+
align-items: center;
|
|
50
|
+
gap: 8px;
|
|
51
|
+
padding: 8px 12px;
|
|
52
|
+
width: 100%;
|
|
53
|
+
box-sizing: border-box;
|
|
54
|
+
cursor: pointer;
|
|
55
|
+
background-color: ${(props) => props.active ? colors_1.COMPONENT.SIDEBAR_ACTIVE : 'transparent'};
|
|
56
|
+
|
|
57
|
+
&:hover {
|
|
58
|
+
background-color: ${(props) => props.active ? colors_1.COMPONENT.SIDEBAR_ACTIVE : colors_1.INTERACTIVE.HOVER_SURFACE};
|
|
59
|
+
}
|
|
60
|
+
`;
|
|
61
|
+
exports.DropdownMenuRow = styled_1.default.div `
|
|
62
|
+
display: flex;
|
|
63
|
+
align-items: center;
|
|
64
|
+
gap: 8px;
|
|
65
|
+
padding: 12px;
|
|
66
|
+
width: 100%;
|
|
67
|
+
box-sizing: border-box;
|
|
68
|
+
cursor: pointer;
|
|
69
|
+
|
|
70
|
+
&:hover {
|
|
71
|
+
background-color: ${colors_1.INTERACTIVE.HOVER_SURFACE};
|
|
72
|
+
}
|
|
73
|
+
`;
|
|
74
|
+
exports.DropdownRowContent = styled_1.default.div `
|
|
75
|
+
display: flex;
|
|
76
|
+
flex-direction: column;
|
|
77
|
+
align-items: flex-start;
|
|
78
|
+
justify-content: center;
|
|
79
|
+
gap: 4px;
|
|
80
|
+
flex: 1 0 0;
|
|
81
|
+
min-width: 0;
|
|
82
|
+
`;
|
|
83
|
+
exports.DropdownPrimaryText = styled_1.default.span `
|
|
84
|
+
width: 100%;
|
|
85
|
+
font-family: ${fontStyles_1.MAIN_FONT}, ${fontStyles_1.FALLBACK_FONT};
|
|
86
|
+
font-weight: 400;
|
|
87
|
+
font-size: 16px;
|
|
88
|
+
line-height: normal;
|
|
89
|
+
color: ${colors_1.BASE.ON_NEUTRAL};
|
|
90
|
+
overflow-wrap: break-word;
|
|
91
|
+
`;
|
|
92
|
+
exports.DropdownSecondaryText = styled_1.default.span `
|
|
93
|
+
width: 100%;
|
|
94
|
+
font-family: ${fontStyles_1.MAIN_FONT}, ${fontStyles_1.FALLBACK_FONT};
|
|
95
|
+
font-weight: 400;
|
|
96
|
+
font-size: 14px;
|
|
97
|
+
line-height: normal;
|
|
98
|
+
color: ${colors_1.BASE.ON_NEUTRAL_SECONDARY};
|
|
99
|
+
overflow-wrap: break-word;
|
|
100
|
+
`;
|
|
101
|
+
exports.DropdownMenuLabel = styled_1.default.span `
|
|
102
|
+
width: 100%;
|
|
103
|
+
font-family: ${fontStyles_1.MAIN_FONT}, ${fontStyles_1.FALLBACK_FONT};
|
|
104
|
+
font-weight: 400;
|
|
105
|
+
font-size: 16px;
|
|
106
|
+
line-height: normal;
|
|
107
|
+
color: ${colors_1.BASE.ON_NEUTRAL_SECONDARY};
|
|
108
|
+
overflow-wrap: break-word;
|
|
109
|
+
`;
|
|
110
|
+
exports.DropdownDivider = styled_1.default.div `
|
|
111
|
+
width: 100%;
|
|
112
|
+
height: 14px;
|
|
113
|
+
flex-shrink: 0;
|
|
114
|
+
display: flex;
|
|
115
|
+
align-items: center;
|
|
116
|
+
|
|
117
|
+
&::after {
|
|
118
|
+
content: '';
|
|
119
|
+
display: block;
|
|
120
|
+
width: calc(100% - 24px);
|
|
121
|
+
margin: 0 12px;
|
|
122
|
+
border-top: 1px solid ${colors_1.BASE.LINE};
|
|
123
|
+
}
|
|
124
|
+
`;
|
|
125
|
+
//# sourceMappingURL=dropdownStyles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dropdownStyles.js","sourceRoot":"","sources":["../../../src/components/Sidebar/dropdownStyles.ts"],"names":[],"mappings":";;;;;;AAAA,6DAAoC;AACpC,2DAAqE;AACrE,0DAKsC;AAEtC,mCAAmC;AAEnC;;;;GAIG;AACU,QAAA,cAAc,GAAG,gBAAM,CAAC,GAAG,CAAA;;;CAGvC,CAAA;AAEY,QAAA,aAAa,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;;;;;;sBASjB,gBAAO,CAAC,OAAO;;;;CAIpC,CAAA;AAEY,QAAA,oBAAoB,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;;;iBAM7B,sBAAS,KAAK,0BAAa;;;;WAIjC,aAAI,CAAC,oBAAoB;;CAEnC,CAAA;AAEY,QAAA,WAAW,GAAG,gBAAM,CAAC,GAAG,CAAsB;;;;;;;;sBAQrC,CAAC,KAAK,EAAE,EAAE,CAC5B,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,kBAAS,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa;;;wBAGnC,CAAC,KAAK,EAAE,EAAE,CAC5B,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,kBAAS,CAAC,cAAc,CAAC,CAAC,CAAC,oBAAW,CAAC,aAAa;;CAExE,CAAA;AAEY,QAAA,eAAe,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;;;;;;;wBAUjB,oBAAW,CAAC,aAAa;;CAEhD,CAAA;AAEY,QAAA,kBAAkB,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;;;;;CAQ3C,CAAA;AAEY,QAAA,mBAAmB,GAAG,gBAAM,CAAC,IAAI,CAAA;;iBAE7B,sBAAS,KAAK,0BAAa;;;;WAIjC,aAAI,CAAC,UAAU;;CAEzB,CAAA;AAEY,QAAA,qBAAqB,GAAG,gBAAM,CAAC,IAAI,CAAA;;iBAE/B,sBAAS,KAAK,0BAAa;;;;WAIjC,aAAI,CAAC,oBAAoB;;CAEnC,CAAA;AAEY,QAAA,iBAAiB,GAAG,gBAAM,CAAC,IAAI,CAAA;;iBAE3B,sBAAS,KAAK,0BAAa;;;;WAIjC,aAAI,CAAC,oBAAoB;;CAEnC,CAAA;AAEY,QAAA,eAAe,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;4BAYb,aAAI,CAAC,IAAI;;CAEpC,CAAA"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
36
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
37
|
+
};
|
|
38
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
|
+
exports.CopyrightNotice = exports.CompanyProfileDropdown = exports.CompanyProfile = exports.SidebarSubItem = exports.SidebarNavItem = exports.useSidebar = exports.SidebarTrigger = exports.SidebarProvider = exports.SidebarBase = void 0;
|
|
40
|
+
const Sidebar_1 = __importStar(require("./Sidebar"));
|
|
41
|
+
Object.defineProperty(exports, "SidebarBase", { enumerable: true, get: function () { return Sidebar_1.SidebarBase; } });
|
|
42
|
+
Object.defineProperty(exports, "SidebarProvider", { enumerable: true, get: function () { return Sidebar_1.SidebarProvider; } });
|
|
43
|
+
Object.defineProperty(exports, "SidebarTrigger", { enumerable: true, get: function () { return Sidebar_1.SidebarTrigger; } });
|
|
44
|
+
Object.defineProperty(exports, "useSidebar", { enumerable: true, get: function () { return Sidebar_1.useSidebar; } });
|
|
45
|
+
const SidebarNavItem_1 = __importDefault(require("./SidebarNavItem"));
|
|
46
|
+
exports.SidebarNavItem = SidebarNavItem_1.default;
|
|
47
|
+
const SidebarSubItem_1 = __importDefault(require("./SidebarSubItem"));
|
|
48
|
+
exports.SidebarSubItem = SidebarSubItem_1.default;
|
|
49
|
+
const CompanyProfile_1 = __importDefault(require("./CompanyProfile"));
|
|
50
|
+
exports.CompanyProfile = CompanyProfile_1.default;
|
|
51
|
+
const CompanyProfileDropdown_1 = __importDefault(require("./CompanyProfileDropdown"));
|
|
52
|
+
exports.CompanyProfileDropdown = CompanyProfileDropdown_1.default;
|
|
53
|
+
const CopyrightNotice_1 = __importDefault(require("./CopyrightNotice"));
|
|
54
|
+
exports.CopyrightNotice = CopyrightNotice_1.default;
|
|
55
|
+
exports.default = Sidebar_1.default;
|
|
56
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Sidebar/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qDAKkB;AAQhB,4FAZA,qBAAW,OAYA;AACX,gGAZA,yBAAe,OAYA;AACf,+FAZA,wBAAc,OAYA;AACd,2FAZA,oBAAU,OAYA;AAVZ,sEAA6C;AAW3C,yBAXK,wBAAc,CAWL;AAVhB,sEAA6C;AAW3C,yBAXK,wBAAc,CAWL;AAVhB,sEAA6C;AAW3C,yBAXK,wBAAc,CAWL;AAVhB,sFAA6D;AAW3D,iCAXK,gCAAsB,CAWL;AAVxB,wEAA+C;AAW7C,0BAXK,yBAAe,CAWL;AAMjB,kBAAe,iBAAO,CAAA"}
|
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.CopyrightNoticeText = exports.CopyrightNoticeWrapper = exports.CompanySubtitle = exports.CompanyName = exports.CompanyProfileContent = exports.CompanyProfileWrapper = exports.CompanyProfileContainer = exports.SubItemLabel = exports.SubItemWrapper = exports.NavItemAffordance = exports.NavItemLabel = exports.NavItemWrapper = exports.MenuContainer = exports.LogoWrapper = exports.MenuHeader = exports.SidebarWrapper = exports.itemTextColor = void 0;
|
|
7
|
+
const styled_1 = __importDefault(require("@emotion/styled"));
|
|
8
|
+
const fontStyles_1 = require("../../constants/fontStyles");
|
|
9
|
+
const colors_1 = require("../../constants/Colors/colors");
|
|
10
|
+
const isSandbox = (variant) => variant === 'sandbox';
|
|
11
|
+
const ROOT_BACKGROUND = {
|
|
12
|
+
business: colors_1.SURFACE.NEUTRAL,
|
|
13
|
+
personal: colors_1.SURFACE.NEUTRAL,
|
|
14
|
+
sandbox: colors_1.BASE.PRIMARY_3,
|
|
15
|
+
};
|
|
16
|
+
const ACTIVE_BACKGROUND = {
|
|
17
|
+
business: colors_1.COMPONENT.SIDEBAR_ACTIVE,
|
|
18
|
+
personal: colors_1.COMPONENT.SIDEBAR_ACTIVE,
|
|
19
|
+
sandbox: colors_1.COMPONENT.SIDEBAR_ACTIVE_SANDBOX,
|
|
20
|
+
};
|
|
21
|
+
const HOVER_BACKGROUND = {
|
|
22
|
+
business: colors_1.INTERACTIVE.HOVER_SURFACE,
|
|
23
|
+
personal: colors_1.INTERACTIVE.HOVER_SURFACE,
|
|
24
|
+
sandbox: 'rgba(255, 255, 255, 0.08)',
|
|
25
|
+
};
|
|
26
|
+
const itemTextColor = (variant, active) => {
|
|
27
|
+
if (isSandbox(variant))
|
|
28
|
+
return colors_1.BASE.ON_CONTAINER;
|
|
29
|
+
return active ? colors_1.STATUS.POSITIVE : colors_1.BASE.ON_NEUTRAL_SECONDARY;
|
|
30
|
+
};
|
|
31
|
+
exports.itemTextColor = itemTextColor;
|
|
32
|
+
const hoverBg = (variant, active) => active ? ACTIVE_BACKGROUND[variant] : HOVER_BACKGROUND[variant];
|
|
33
|
+
exports.SidebarWrapper = styled_1.default.div `
|
|
34
|
+
width: 240px;
|
|
35
|
+
height: 100vh;
|
|
36
|
+
box-sizing: border-box;
|
|
37
|
+
background-color: ${(props) => ROOT_BACKGROUND[props.variant]};
|
|
38
|
+
display: flex;
|
|
39
|
+
flex-direction: column;
|
|
40
|
+
align-items: center;
|
|
41
|
+
flex-shrink: 0;
|
|
42
|
+
overflow: hidden;
|
|
43
|
+
`;
|
|
44
|
+
/*
|
|
45
|
+
* Scrollable region holding logo, company profile, nav items, and the
|
|
46
|
+
* regulatory footer. Everything scrolls together as one list.
|
|
47
|
+
*
|
|
48
|
+
* All padding (vertical + horizontal) lives here rather than on the wrapper,
|
|
49
|
+
* so content can scroll all the way to the panel's edges and the scrollbar
|
|
50
|
+
* sits flush against the right edge.
|
|
51
|
+
*/
|
|
52
|
+
exports.MenuHeader = styled_1.default.div `
|
|
53
|
+
display: flex;
|
|
54
|
+
flex-direction: column;
|
|
55
|
+
align-items: center;
|
|
56
|
+
gap: 24px;
|
|
57
|
+
width: 100%;
|
|
58
|
+
box-sizing: border-box;
|
|
59
|
+
padding: 32px 16px;
|
|
60
|
+
flex: 1 1 auto;
|
|
61
|
+
min-height: 0;
|
|
62
|
+
overflow-y: auto;
|
|
63
|
+
overflow-x: hidden;
|
|
64
|
+
|
|
65
|
+
/* Slim scrollbar so it doesn't fight the 240px width */
|
|
66
|
+
scrollbar-width: thin;
|
|
67
|
+
`;
|
|
68
|
+
exports.LogoWrapper = styled_1.default.div `
|
|
69
|
+
width: 200px;
|
|
70
|
+
height: 60px;
|
|
71
|
+
flex-shrink: 0;
|
|
72
|
+
`;
|
|
73
|
+
exports.MenuContainer = styled_1.default.div `
|
|
74
|
+
display: flex;
|
|
75
|
+
flex-direction: column;
|
|
76
|
+
align-items: flex-start;
|
|
77
|
+
gap: 12px;
|
|
78
|
+
width: 100%;
|
|
79
|
+
`;
|
|
80
|
+
// ─── Nav item ───
|
|
81
|
+
exports.NavItemWrapper = styled_1.default.div `
|
|
82
|
+
display: flex;
|
|
83
|
+
align-items: center;
|
|
84
|
+
gap: 8px;
|
|
85
|
+
padding: 12px;
|
|
86
|
+
border-radius: 4px;
|
|
87
|
+
width: 100%;
|
|
88
|
+
box-sizing: border-box;
|
|
89
|
+
cursor: pointer;
|
|
90
|
+
background-color: ${(props) => props.active ? ACTIVE_BACKGROUND[props.variant] : 'transparent'};
|
|
91
|
+
|
|
92
|
+
&:hover {
|
|
93
|
+
background-color: ${(props) => hoverBg(props.variant, props.active)};
|
|
94
|
+
}
|
|
95
|
+
`;
|
|
96
|
+
exports.NavItemLabel = styled_1.default.span `
|
|
97
|
+
flex: 1 0 0;
|
|
98
|
+
min-width: 0;
|
|
99
|
+
font-family: ${fontStyles_1.MAIN_FONT}, ${fontStyles_1.FALLBACK_FONT};
|
|
100
|
+
font-size: 14px;
|
|
101
|
+
line-height: normal;
|
|
102
|
+
font-weight: ${(props) => (props.active ? 700 : 400)};
|
|
103
|
+
color: ${(props) => (0, exports.itemTextColor)(props.variant, props.active)};
|
|
104
|
+
white-space: nowrap;
|
|
105
|
+
overflow: hidden;
|
|
106
|
+
text-overflow: ellipsis;
|
|
107
|
+
`;
|
|
108
|
+
exports.NavItemAffordance = styled_1.default.span `
|
|
109
|
+
display: flex;
|
|
110
|
+
align-items: center;
|
|
111
|
+
flex-shrink: 0;
|
|
112
|
+
`;
|
|
113
|
+
// ─── Sub item ───
|
|
114
|
+
exports.SubItemWrapper = styled_1.default.div `
|
|
115
|
+
display: flex;
|
|
116
|
+
align-items: center;
|
|
117
|
+
padding: 8px 0 8px 44px;
|
|
118
|
+
width: 100%;
|
|
119
|
+
box-sizing: border-box;
|
|
120
|
+
cursor: pointer;
|
|
121
|
+
background-color: ${(props) => props.active ? ACTIVE_BACKGROUND[props.variant] : 'transparent'};
|
|
122
|
+
|
|
123
|
+
&:hover {
|
|
124
|
+
background-color: ${(props) => hoverBg(props.variant, props.active)};
|
|
125
|
+
}
|
|
126
|
+
`;
|
|
127
|
+
exports.SubItemLabel = styled_1.default.span `
|
|
128
|
+
flex: 1 0 0;
|
|
129
|
+
min-width: 0;
|
|
130
|
+
font-family: ${fontStyles_1.MAIN_FONT}, ${fontStyles_1.FALLBACK_FONT};
|
|
131
|
+
font-size: 14px;
|
|
132
|
+
line-height: normal;
|
|
133
|
+
font-weight: ${(props) => (props.active ? 700 : 400)};
|
|
134
|
+
color: ${(props) => (0, exports.itemTextColor)(props.variant, props.active)};
|
|
135
|
+
white-space: nowrap;
|
|
136
|
+
overflow: hidden;
|
|
137
|
+
text-overflow: ellipsis;
|
|
138
|
+
`;
|
|
139
|
+
// ─── Company profile ───
|
|
140
|
+
exports.CompanyProfileContainer = styled_1.default.div `
|
|
141
|
+
position: relative;
|
|
142
|
+
width: 100%;
|
|
143
|
+
`;
|
|
144
|
+
exports.CompanyProfileWrapper = styled_1.default.div `
|
|
145
|
+
display: flex;
|
|
146
|
+
align-items: center;
|
|
147
|
+
justify-content: space-between;
|
|
148
|
+
padding: 12px;
|
|
149
|
+
border-radius: 8px;
|
|
150
|
+
width: 100%;
|
|
151
|
+
box-sizing: border-box;
|
|
152
|
+
cursor: pointer;
|
|
153
|
+
background-color: ${colors_1.SURFACE.SECONDARY_NEUTRAL};
|
|
154
|
+
|
|
155
|
+
&:hover {
|
|
156
|
+
background-color: ${colors_1.INTERACTIVE.HOVER_SURFACE};
|
|
157
|
+
}
|
|
158
|
+
`;
|
|
159
|
+
exports.CompanyProfileContent = styled_1.default.div `
|
|
160
|
+
display: flex;
|
|
161
|
+
flex-direction: column;
|
|
162
|
+
align-items: flex-start;
|
|
163
|
+
gap: 4px;
|
|
164
|
+
flex: 1 0 0;
|
|
165
|
+
min-width: 0;
|
|
166
|
+
`;
|
|
167
|
+
exports.CompanyName = styled_1.default.span `
|
|
168
|
+
width: 100%;
|
|
169
|
+
font-family: ${fontStyles_1.SECONDARY_FONT};
|
|
170
|
+
font-weight: 700;
|
|
171
|
+
font-size: 14px;
|
|
172
|
+
line-height: normal;
|
|
173
|
+
color: ${colors_1.BASE.ON_NEUTRAL_SECONDARY};
|
|
174
|
+
overflow-wrap: break-word;
|
|
175
|
+
`;
|
|
176
|
+
exports.CompanySubtitle = styled_1.default.span `
|
|
177
|
+
width: 100%;
|
|
178
|
+
font-family: ${fontStyles_1.MAIN_FONT}, ${fontStyles_1.FALLBACK_FONT};
|
|
179
|
+
font-weight: 400;
|
|
180
|
+
font-size: 14px;
|
|
181
|
+
line-height: normal;
|
|
182
|
+
color: ${colors_1.BASE.ON_NEUTRAL_SECONDARY};
|
|
183
|
+
overflow-wrap: break-word;
|
|
184
|
+
`;
|
|
185
|
+
// ─── Copyright notice (MAS licensing footer) ───
|
|
186
|
+
exports.CopyrightNoticeWrapper = styled_1.default.div `
|
|
187
|
+
display: flex;
|
|
188
|
+
align-items: center;
|
|
189
|
+
gap: 8px;
|
|
190
|
+
padding: 8px 10px;
|
|
191
|
+
border-radius: 8px;
|
|
192
|
+
width: 100%;
|
|
193
|
+
box-sizing: border-box;
|
|
194
|
+
flex-shrink: 0;
|
|
195
|
+
/*
|
|
196
|
+
* margin-top: auto bottom-anchors the footer when the nav list is short
|
|
197
|
+
* (spare space in the flex column pushes it down). When the list overflows,
|
|
198
|
+
* auto resolves to 0 and the flex gap provides spacing, so the footer sits
|
|
199
|
+
* right after the last item and scrolls with the content.
|
|
200
|
+
*/
|
|
201
|
+
margin-top: auto;
|
|
202
|
+
background-color: ${colors_1.SURFACE.SECONDARY_NEUTRAL};
|
|
203
|
+
`;
|
|
204
|
+
exports.CopyrightNoticeText = styled_1.default.span `
|
|
205
|
+
flex: 1 0 0;
|
|
206
|
+
min-width: 0;
|
|
207
|
+
font-family: ${fontStyles_1.MAIN_FONT}, ${fontStyles_1.FALLBACK_FONT};
|
|
208
|
+
font-weight: 400;
|
|
209
|
+
font-size: 12px;
|
|
210
|
+
line-height: normal;
|
|
211
|
+
color: ${colors_1.BASE.ON_NEUTRAL_SECONDARY};
|
|
212
|
+
white-space: pre-wrap;
|
|
213
|
+
`;
|
|
214
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Sidebar/styles.ts"],"names":[],"mappings":"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"}
|
|
@@ -132,5 +132,7 @@ var COMPONENT;
|
|
|
132
132
|
COMPONENT["LABEL_INPUT"] = "#757575";
|
|
133
133
|
COMPONENT["HELPER_INPUT"] = "#757575";
|
|
134
134
|
COMPONENT["PLACEHOLDER_INPUT"] = "#B6B6B6";
|
|
135
|
+
COMPONENT["SIDEBAR_ACTIVE"] = "#D7EFE2";
|
|
136
|
+
COMPONENT["SIDEBAR_ACTIVE_SANDBOX"] = "#005755";
|
|
135
137
|
})(COMPONENT || (exports.COMPONENT = COMPONENT = {}));
|
|
136
138
|
//# sourceMappingURL=colors.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../src/constants/Colors/colors.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../src/constants/Colors/colors.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -20,7 +20,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
20
20
|
};
|
|
21
21
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
22
|
exports.Spin = exports.ErrorPage = exports.Tooltip = exports.CopyBox = exports.Section = exports.Banner = exports.Note = exports.ContentBreakdown = exports.Hidden = exports.Link = exports.Divider = exports.EmptyData = exports.SmallP = exports.P1Bold = exports.P1 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.Checkbox = exports.DatePicker = exports.Timer = exports.Tabs = exports.Table = exports.Steps = exports.SelectionBoxGroup = exports.SelectionBox = exports.Select = exports.RangePicker = exports.Radio = exports.Pagination = exports.DeprecatedModal = exports.DialogItems = exports.Modal = exports.Tag = exports.InputWithButton = exports.Input = exports.Form = exports.DynamicSelect = exports.Dropdown = exports.Carousel = exports.Chart = exports.Card = exports.BadgeIcon = exports.Accordion = exports.ActionCard = exports.ActionButton = exports.Button = exports.Alert = exports.AntdConfigProvider = void 0;
|
|
23
|
-
exports.LINE_HEIGHT = exports.FONT_SIZE = exports.FONT_WEIGHT = exports.FALLBACK_FONT = exports.MAIN_FONT = exports.BACKGROUND_COLORS = exports.TEXT_COLORS = exports.ICON_COLORS = exports.MAIN_COLORS = exports.NEUTRAL_COLORS = exports.YELLOW_COLORS = exports.RED_COLORS = exports.GREEN_COLORS = exports.BLUE_COLORS = exports.TABLET_BREAKPOINT = exports.LAPTOP_BREAKPOINT = exports.DESKTOP_BREAKPOINT = exports.EXTRA_LARGE_DESKTOP_BREAKPOINT = exports.useModal = exports.ModalProvider = exports.straitsXTheme = exports.xfersTheme = exports.useTheme = exports.ThemeProvider = exports.Typography = exports.MaterialSymbols = exports.getCoachmarkJoyrideConfig = exports.Coachmark = exports.Timeline = exports.SummaryCard = void 0;
|
|
23
|
+
exports.LINE_HEIGHT = exports.FONT_SIZE = exports.FONT_WEIGHT = exports.FALLBACK_FONT = exports.MAIN_FONT = exports.BACKGROUND_COLORS = exports.TEXT_COLORS = exports.ICON_COLORS = exports.MAIN_COLORS = exports.NEUTRAL_COLORS = exports.YELLOW_COLORS = exports.RED_COLORS = exports.GREEN_COLORS = exports.BLUE_COLORS = exports.TABLET_BREAKPOINT = exports.LAPTOP_BREAKPOINT = exports.DESKTOP_BREAKPOINT = exports.EXTRA_LARGE_DESKTOP_BREAKPOINT = exports.useModal = exports.ModalProvider = exports.straitsXTheme = exports.xfersTheme = exports.useTheme = exports.ThemeProvider = exports.Typography = exports.MaterialSymbols = exports.getCoachmarkJoyrideConfig = exports.CopyrightNotice = exports.CompanyProfileDropdown = exports.CompanyProfile = exports.SidebarSubItem = exports.SidebarNavItem = exports.useSidebar = exports.SidebarTrigger = exports.SidebarProvider = exports.SidebarBase = exports.Sidebar = exports.Coachmark = exports.Timeline = exports.SummaryCard = void 0;
|
|
24
24
|
// Components
|
|
25
25
|
var AntdConfigProvider_1 = require("./components/AntdConfigProvider");
|
|
26
26
|
Object.defineProperty(exports, "AntdConfigProvider", { enumerable: true, get: function () { return __importDefault(AntdConfigProvider_1).default; } });
|
|
@@ -121,6 +121,17 @@ var Timeline_1 = require("./components/Timeline");
|
|
|
121
121
|
Object.defineProperty(exports, "Timeline", { enumerable: true, get: function () { return __importDefault(Timeline_1).default; } });
|
|
122
122
|
var Coachmark_1 = require("./components/Coachmark");
|
|
123
123
|
Object.defineProperty(exports, "Coachmark", { enumerable: true, get: function () { return __importDefault(Coachmark_1).default; } });
|
|
124
|
+
var Sidebar_1 = require("./components/Sidebar");
|
|
125
|
+
Object.defineProperty(exports, "Sidebar", { enumerable: true, get: function () { return __importDefault(Sidebar_1).default; } });
|
|
126
|
+
Object.defineProperty(exports, "SidebarBase", { enumerable: true, get: function () { return Sidebar_1.SidebarBase; } });
|
|
127
|
+
Object.defineProperty(exports, "SidebarProvider", { enumerable: true, get: function () { return Sidebar_1.SidebarProvider; } });
|
|
128
|
+
Object.defineProperty(exports, "SidebarTrigger", { enumerable: true, get: function () { return Sidebar_1.SidebarTrigger; } });
|
|
129
|
+
Object.defineProperty(exports, "useSidebar", { enumerable: true, get: function () { return Sidebar_1.useSidebar; } });
|
|
130
|
+
Object.defineProperty(exports, "SidebarNavItem", { enumerable: true, get: function () { return Sidebar_1.SidebarNavItem; } });
|
|
131
|
+
Object.defineProperty(exports, "SidebarSubItem", { enumerable: true, get: function () { return Sidebar_1.SidebarSubItem; } });
|
|
132
|
+
Object.defineProperty(exports, "CompanyProfile", { enumerable: true, get: function () { return Sidebar_1.CompanyProfile; } });
|
|
133
|
+
Object.defineProperty(exports, "CompanyProfileDropdown", { enumerable: true, get: function () { return Sidebar_1.CompanyProfileDropdown; } });
|
|
134
|
+
Object.defineProperty(exports, "CopyrightNotice", { enumerable: true, get: function () { return Sidebar_1.CopyrightNotice; } });
|
|
124
135
|
// Helper Functions
|
|
125
136
|
var getJoyrideConfig_1 = require("./components/Coachmark/getJoyrideConfig");
|
|
126
137
|
Object.defineProperty(exports, "getCoachmarkJoyrideConfig", { enumerable: true, get: function () { return getJoyrideConfig_1.getCoachmarkJoyrideConfig; } });
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA,0EAA0E;AAC1E,iCAAiC;;;;;;;;;;;;;;;;;;;;;AAEjC,aAAa;AACb,sEAA+E;AAAtE,yIAAA,OAAO,OAAsB;AACtC,4CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAC1B,0DAAmE;AAA1D,6HAAA,OAAO,OAAgB;AAChC,sDAA+D;AAAtD,yHAAA,OAAO,OAAc;AAC9B,oDAA6D;AAApD,uHAAA,OAAO,OAAa;AAC7B,oDAA6D;AAApD,uHAAA,OAAO,OAAa;AAC7B,0CAAmD;AAA1C,6GAAA,OAAO,OAAQ;AACxB,4CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,4DAAqE;AAA5D,+HAAA,OAAO,OAAiB;AACjC,0CAAmD;AAA1C,6GAAA,OAAO,OAAQ;AACxB,4CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,gEAAyE;AAAhE,mIAAA,OAAO,OAAmB;AACnC,wCAAiD;AAAxC,2GAAA,OAAO,OAAO;AACvB,4CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,8DAAuE;AAA9D,2HAAA,OAAO,OAAe;AAC/B,gEAAyE;AAAhE,mIAAA,OAAO,OAAmB;AACnC,sDAA+D;AAAtD,yHAAA,OAAO,OAAc;AAC9B,4CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAC1B,0DAGkC;AAFhC,6HAAA,OAAO,OAAgB;AACvB,iHAAA,iBAAiB,OAAA;AAEnB,4CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,4CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,0CAAmD;AAA1C,6GAAA,OAAO,OAAQ;AACxB,4CAAqD;AAA5C,+GAAA,OAAO,OAAS;AACzB,sDAA+D;AAAtD,yHAAA,OAAO,OAAc;AAC9B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,sDAA4E;AAAnE,gGAAA,EAAE,OAAA;AAAE,gGAAA,EAAE,OAAA;AAAE,gGAAA,EAAE,OAAA;AAAE,gGAAA,EAAE,OAAA;AAAE,gGAAA,EAAE,OAAA;AAAE,oGAAA,MAAM,OAAA;AAAE,oGAAA,MAAM,OAAA;AAC3C,oDAA6D;AAApD,uHAAA,OAAO,OAAa;AAC7B,gDAAyD;AAAhD,mHAAA,OAAO,OAAW;AAC3B,0CAAmD;AAA1C,6GAAA,OAAO,OAAQ;AACxB,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAC1B,kEAA2E;AAAlE,qIAAA,OAAO,OAAoB;AACpC,0CAAmD;AAA1C,6GAAA,OAAO,OAAQ;AACxB,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAC1B,0CAA2C;AAAlC,+FAAA,OAAO,OAAA;AAChB,gDAAyD;AAAhD,mHAAA,OAAO,OAAW;AAC3B,gDAAyD;AAAhD,mHAAA,OAAO,OAAW;AAC3B,oDAA6D;AAApD,uHAAA,OAAO,OAAa;AAC7B,0CAAmD;AAA1C,6GAAA,OAAO,OAAQ;AACxB,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,oDAA6D;AAApD,uHAAA,OAAO,OAAa;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { CompanyOption, DropdownMenuItem } from './CompanyProfileDropdown';
|
|
3
|
+
type CompanyProfileProps = {
|
|
4
|
+
companyName?: string;
|
|
5
|
+
subtitle?: string;
|
|
6
|
+
enableDropdown?: boolean;
|
|
7
|
+
/** Renders only the company switcher, without the menu items. */
|
|
8
|
+
switchOnly?: boolean;
|
|
9
|
+
companies?: CompanyOption[];
|
|
10
|
+
/** Menu items shown below the divider. Consumer provides icon + label. */
|
|
11
|
+
menuItems?: DropdownMenuItem[];
|
|
12
|
+
onMenuItemClick?: (label: string) => void;
|
|
13
|
+
onClick?: () => void;
|
|
14
|
+
};
|
|
15
|
+
declare const CompanyProfile: ({ companyName, subtitle, enableDropdown, switchOnly, companies, menuItems, onMenuItemClick, onClick, }: CompanyProfileProps) => React.JSX.Element;
|
|
16
|
+
export default CompanyProfile;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { MaterialSymbol } from 'material-symbols';
|
|
3
|
+
export type CompanyOption = {
|
|
4
|
+
name: string;
|
|
5
|
+
subtitle?: string;
|
|
6
|
+
active?: boolean;
|
|
7
|
+
onClick?: () => void;
|
|
8
|
+
};
|
|
9
|
+
export type DropdownMenuItem = {
|
|
10
|
+
/** Material Symbol icon name (e.g. 'domain', 'group', 'receipt_long'). */
|
|
11
|
+
icon: MaterialSymbol;
|
|
12
|
+
/** Display label for the menu item. */
|
|
13
|
+
label: string;
|
|
14
|
+
onClick?: () => void;
|
|
15
|
+
};
|
|
16
|
+
type CompanyProfileDropdownProps = {
|
|
17
|
+
/** When false, only the company switcher is rendered (Figma `switchOnly`). */
|
|
18
|
+
showMenuItems?: boolean;
|
|
19
|
+
/** When false, the switch-company block is hidden (Figma `switchCompany`). */
|
|
20
|
+
switchCompany?: boolean;
|
|
21
|
+
/** Companies shown in the SWITCH COMPANY section. */
|
|
22
|
+
companies?: CompanyOption[];
|
|
23
|
+
/**
|
|
24
|
+
* Menu items shown below the divider. Each item needs an icon (MaterialSymbol)
|
|
25
|
+
* and a label. Consumer must provide this explicitly.
|
|
26
|
+
*/
|
|
27
|
+
menuItems?: DropdownMenuItem[];
|
|
28
|
+
/** Fired when a menu item is clicked (if the item doesn't have its own onClick). */
|
|
29
|
+
onMenuItemClick?: (label: string) => void;
|
|
30
|
+
};
|
|
31
|
+
declare const CompanyProfileDropdown: ({ showMenuItems, switchCompany, companies, menuItems, onMenuItemClick, }: CompanyProfileDropdownProps) => React.JSX.Element;
|
|
32
|
+
export default CompanyProfileDropdown;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { SidebarVariant } from './styles';
|
|
3
|
+
type SidebarContextValue = {
|
|
4
|
+
open: boolean;
|
|
5
|
+
setOpen: (open: boolean) => void;
|
|
6
|
+
toggle: () => void;
|
|
7
|
+
isMobile: boolean;
|
|
8
|
+
};
|
|
9
|
+
export declare const useSidebar: () => SidebarContextValue;
|
|
10
|
+
type SidebarProviderProps = {
|
|
11
|
+
/** Controlled open state. Omit for uncontrolled. */
|
|
12
|
+
open?: boolean;
|
|
13
|
+
/** Callback when open state changes. */
|
|
14
|
+
onOpenChange?: (open: boolean) => void;
|
|
15
|
+
/** Default open state for uncontrolled usage. */
|
|
16
|
+
defaultOpen?: boolean;
|
|
17
|
+
/** Breakpoint in px below which sidebar renders as a mobile drawer. */
|
|
18
|
+
mobileBreakpoint?: number;
|
|
19
|
+
children: React.ReactNode;
|
|
20
|
+
};
|
|
21
|
+
export declare const SidebarProvider: ({ open: controlledOpen, onOpenChange, defaultOpen, mobileBreakpoint, children, }: SidebarProviderProps) => React.JSX.Element;
|
|
22
|
+
type SidebarTriggerProps = {
|
|
23
|
+
className?: string;
|
|
24
|
+
label?: string;
|
|
25
|
+
};
|
|
26
|
+
export declare const SidebarTrigger: ({ className, label, }: SidebarTriggerProps) => React.JSX.Element;
|
|
27
|
+
type SidebarBaseProps = {
|
|
28
|
+
variant?: SidebarVariant;
|
|
29
|
+
logo?: React.ReactNode;
|
|
30
|
+
companyProfile?: React.ReactNode;
|
|
31
|
+
children?: React.ReactNode;
|
|
32
|
+
footer?: React.ReactNode;
|
|
33
|
+
};
|
|
34
|
+
export declare const SidebarBase: ({ variant, logo, companyProfile, children, footer, }: SidebarBaseProps) => React.JSX.Element | null;
|
|
35
|
+
declare const Sidebar: {
|
|
36
|
+
Base: ({ variant, logo, companyProfile, children, footer, }: SidebarBaseProps) => React.JSX.Element | null;
|
|
37
|
+
Provider: ({ open: controlledOpen, onOpenChange, defaultOpen, mobileBreakpoint, children, }: SidebarProviderProps) => React.JSX.Element;
|
|
38
|
+
Trigger: ({ className, label, }: SidebarTriggerProps) => React.JSX.Element;
|
|
39
|
+
};
|
|
40
|
+
export default Sidebar;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { MaterialSymbol } from 'material-symbols';
|
|
3
|
+
import type { SidebarVariant } from './styles';
|
|
4
|
+
export type SubItem = {
|
|
5
|
+
id: string;
|
|
6
|
+
label: string;
|
|
7
|
+
active?: boolean;
|
|
8
|
+
onClick?: () => void;
|
|
9
|
+
};
|
|
10
|
+
type SidebarNavItemProps = {
|
|
11
|
+
/** Stable identifier for this nav item (used for selection, routing). */
|
|
12
|
+
id: string;
|
|
13
|
+
icon: MaterialSymbol;
|
|
14
|
+
label: string;
|
|
15
|
+
variant?: SidebarVariant;
|
|
16
|
+
active?: boolean;
|
|
17
|
+
onClick?: () => void;
|
|
18
|
+
subItems?: SubItem[];
|
|
19
|
+
isExpanded?: boolean;
|
|
20
|
+
/** Optional trailing tag text (e.g. "New"). Uses DS Tag component. */
|
|
21
|
+
tag?: string;
|
|
22
|
+
/**
|
|
23
|
+
* When true and this item has sub-items, expanding the parent also fires
|
|
24
|
+
* the first sub-item's onClick, so the child is selected without an extra
|
|
25
|
+
* click. Only applies on expand (not collapse) and only to the first child.
|
|
26
|
+
*/
|
|
27
|
+
autoSelectFirstSubItem?: boolean;
|
|
28
|
+
};
|
|
29
|
+
declare const SidebarNavItem: ({ id, icon, label, variant, active, onClick, subItems, isExpanded, tag, autoSelectFirstSubItem, }: SidebarNavItemProps) => React.JSX.Element;
|
|
30
|
+
export default SidebarNavItem;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { SidebarVariant } from './styles';
|
|
3
|
+
type SidebarSubItemProps = {
|
|
4
|
+
label: string;
|
|
5
|
+
variant?: SidebarVariant;
|
|
6
|
+
active?: boolean;
|
|
7
|
+
onClick?: () => void;
|
|
8
|
+
};
|
|
9
|
+
declare const SidebarSubItem: ({ label, variant, active, onClick, }: SidebarSubItemProps) => React.JSX.Element;
|
|
10
|
+
export default SidebarSubItem;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export declare const DropdownFlyout: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
|
|
2
|
+
export declare const DropdownPanel: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
|
|
3
|
+
export declare const DropdownSectionLabel: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
|
|
4
|
+
export declare const DropdownRow: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
5
|
+
active?: boolean;
|
|
6
|
+
}, object>;
|
|
7
|
+
export declare const DropdownMenuRow: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
|
|
8
|
+
export declare const DropdownRowContent: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
|
|
9
|
+
export declare const DropdownPrimaryText: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, keyof import("react").HTMLAttributes<HTMLSpanElement>>, object>;
|
|
10
|
+
export declare const DropdownSecondaryText: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, keyof import("react").HTMLAttributes<HTMLSpanElement>>, object>;
|
|
11
|
+
export declare const DropdownMenuLabel: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, keyof import("react").HTMLAttributes<HTMLSpanElement>>, object>;
|
|
12
|
+
export declare const DropdownDivider: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
|