@verma-consulting/design-library 0.1.57 → 0.1.59
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/index.d.mts +15 -1
- package/dist/index.d.ts +15 -1
- package/dist/index.js +131 -46
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +134 -49
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/dist/index.d.mts
CHANGED
|
@@ -33,8 +33,15 @@ type TablePaginationDesignProps = React.ComponentProps<typeof MuiTablePagination
|
|
|
33
33
|
*/
|
|
34
34
|
declare const TablePagination: React.ForwardRefExoticComponent<Omit<TablePaginationDesignProps, "ref"> & React.RefAttributes<unknown>>;
|
|
35
35
|
|
|
36
|
+
/** Self-contained stack so the wordmark looks consistent without app-level typography theme. */
|
|
37
|
+
declare const LOGO_FONT_STACK = "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"";
|
|
36
38
|
type LogoProps = {
|
|
37
39
|
loggedIn?: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Layout only (not the same as CSS `text-align`):
|
|
42
|
+
* - `false` — one row: logo and company name side by side.
|
|
43
|
+
* - `true` — column: logo centered on top, company name centered below.
|
|
44
|
+
*/
|
|
38
45
|
centered?: boolean;
|
|
39
46
|
organization?: {
|
|
40
47
|
name?: string;
|
|
@@ -45,6 +52,13 @@ type LogoProps = {
|
|
|
45
52
|
defaultLogo?: React__default.ReactNode;
|
|
46
53
|
companyComponent?: React__default.ReactNode;
|
|
47
54
|
handleClick?: () => void;
|
|
55
|
+
/**
|
|
56
|
+
* When true (default), any MUI `Typography` inside `companyComponent` inherits the same
|
|
57
|
+
* wordmark styling (font stack, weight, truncation). Turn off for full custom layouts.
|
|
58
|
+
*/
|
|
59
|
+
harmonizeCompanyTypography?: boolean;
|
|
60
|
+
/** Merged onto the `companyComponent` wrapper `Box`. */
|
|
61
|
+
companySlotSx?: object;
|
|
48
62
|
};
|
|
49
63
|
declare const Logo: React__default.FC<LogoProps>;
|
|
50
64
|
|
|
@@ -232,4 +246,4 @@ type OTPFieldProps = {
|
|
|
232
246
|
};
|
|
233
247
|
declare const OTPField: React__default.FC<OTPFieldProps>;
|
|
234
248
|
|
|
235
|
-
export { CountrySelect, type CountryType, EmptyState, FormDialog, FormDrawer, FormPopover, FormSnackBar, IOSSwitch, ImageUploadAvatar, InputFileUpload, Loader, Logo, OTPField, type OTPFieldProps, PhoneNumberField, Pill, SearchableSelect, SkeletonBar, StatusPill, TabPanel, TablePagination, type TablePaginationDesignProps };
|
|
249
|
+
export { CountrySelect, type CountryType, EmptyState, FormDialog, FormDrawer, FormPopover, FormSnackBar, IOSSwitch, ImageUploadAvatar, InputFileUpload, LOGO_FONT_STACK, Loader, Logo, OTPField, type OTPFieldProps, PhoneNumberField, Pill, SearchableSelect, SkeletonBar, StatusPill, TabPanel, TablePagination, type TablePaginationDesignProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -33,8 +33,15 @@ type TablePaginationDesignProps = React.ComponentProps<typeof MuiTablePagination
|
|
|
33
33
|
*/
|
|
34
34
|
declare const TablePagination: React.ForwardRefExoticComponent<Omit<TablePaginationDesignProps, "ref"> & React.RefAttributes<unknown>>;
|
|
35
35
|
|
|
36
|
+
/** Self-contained stack so the wordmark looks consistent without app-level typography theme. */
|
|
37
|
+
declare const LOGO_FONT_STACK = "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"";
|
|
36
38
|
type LogoProps = {
|
|
37
39
|
loggedIn?: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Layout only (not the same as CSS `text-align`):
|
|
42
|
+
* - `false` — one row: logo and company name side by side.
|
|
43
|
+
* - `true` — column: logo centered on top, company name centered below.
|
|
44
|
+
*/
|
|
38
45
|
centered?: boolean;
|
|
39
46
|
organization?: {
|
|
40
47
|
name?: string;
|
|
@@ -45,6 +52,13 @@ type LogoProps = {
|
|
|
45
52
|
defaultLogo?: React__default.ReactNode;
|
|
46
53
|
companyComponent?: React__default.ReactNode;
|
|
47
54
|
handleClick?: () => void;
|
|
55
|
+
/**
|
|
56
|
+
* When true (default), any MUI `Typography` inside `companyComponent` inherits the same
|
|
57
|
+
* wordmark styling (font stack, weight, truncation). Turn off for full custom layouts.
|
|
58
|
+
*/
|
|
59
|
+
harmonizeCompanyTypography?: boolean;
|
|
60
|
+
/** Merged onto the `companyComponent` wrapper `Box`. */
|
|
61
|
+
companySlotSx?: object;
|
|
48
62
|
};
|
|
49
63
|
declare const Logo: React__default.FC<LogoProps>;
|
|
50
64
|
|
|
@@ -232,4 +246,4 @@ type OTPFieldProps = {
|
|
|
232
246
|
};
|
|
233
247
|
declare const OTPField: React__default.FC<OTPFieldProps>;
|
|
234
248
|
|
|
235
|
-
export { CountrySelect, type CountryType, EmptyState, FormDialog, FormDrawer, FormPopover, FormSnackBar, IOSSwitch, ImageUploadAvatar, InputFileUpload, Loader, Logo, OTPField, type OTPFieldProps, PhoneNumberField, Pill, SearchableSelect, SkeletonBar, StatusPill, TabPanel, TablePagination, type TablePaginationDesignProps };
|
|
249
|
+
export { CountrySelect, type CountryType, EmptyState, FormDialog, FormDrawer, FormPopover, FormSnackBar, IOSSwitch, ImageUploadAvatar, InputFileUpload, LOGO_FONT_STACK, Loader, Logo, OTPField, type OTPFieldProps, PhoneNumberField, Pill, SearchableSelect, SkeletonBar, StatusPill, TabPanel, TablePagination, type TablePaginationDesignProps };
|
package/dist/index.js
CHANGED
|
@@ -40,6 +40,7 @@ __export(index_exports, {
|
|
|
40
40
|
IOSSwitch: () => IOSSwitch_default,
|
|
41
41
|
ImageUploadAvatar: () => ImageUploadAvatar_default,
|
|
42
42
|
InputFileUpload: () => InputFileUpload_default,
|
|
43
|
+
LOGO_FONT_STACK: () => LOGO_FONT_STACK,
|
|
43
44
|
Loader: () => Loader_default,
|
|
44
45
|
Logo: () => Logo_default,
|
|
45
46
|
OTPField: () => OTPField_default,
|
|
@@ -276,6 +277,66 @@ var import_styles19 = require("@mui/styles");
|
|
|
276
277
|
var import_react = require("react");
|
|
277
278
|
var import_material2 = require("@mui/material");
|
|
278
279
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
280
|
+
var LOGO_FONT_STACK = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"';
|
|
281
|
+
var wordmarkCore = {
|
|
282
|
+
fontFamily: LOGO_FONT_STACK,
|
|
283
|
+
fontWeight: 600,
|
|
284
|
+
letterSpacing: "-0.015em",
|
|
285
|
+
lineHeight: 1.35,
|
|
286
|
+
color: "text.primary"
|
|
287
|
+
};
|
|
288
|
+
function wordmarkSx(centered) {
|
|
289
|
+
return {
|
|
290
|
+
...wordmarkCore,
|
|
291
|
+
...centered ? {
|
|
292
|
+
fontSize: "1.0625rem",
|
|
293
|
+
textAlign: "center",
|
|
294
|
+
wordBreak: "break-word"
|
|
295
|
+
} : {
|
|
296
|
+
fontSize: "0.9375rem",
|
|
297
|
+
overflow: "hidden",
|
|
298
|
+
textOverflow: "ellipsis",
|
|
299
|
+
whiteSpace: "nowrap"
|
|
300
|
+
}
|
|
301
|
+
};
|
|
302
|
+
}
|
|
303
|
+
function companySlotTypographySx(centered) {
|
|
304
|
+
return {
|
|
305
|
+
"& .MuiTypography-root": {
|
|
306
|
+
...wordmarkCore,
|
|
307
|
+
fontSize: centered ? "1.0625rem" : "0.9375rem",
|
|
308
|
+
textAlign: centered ? "center" : "inherit",
|
|
309
|
+
overflow: "hidden",
|
|
310
|
+
textOverflow: "ellipsis",
|
|
311
|
+
whiteSpace: "nowrap",
|
|
312
|
+
maxWidth: "100%"
|
|
313
|
+
}
|
|
314
|
+
};
|
|
315
|
+
}
|
|
316
|
+
function CompanySlot({
|
|
317
|
+
centered,
|
|
318
|
+
maxWidth,
|
|
319
|
+
harmonizeCompanyTypography,
|
|
320
|
+
companySlotSx,
|
|
321
|
+
children
|
|
322
|
+
}) {
|
|
323
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
324
|
+
import_material2.Box,
|
|
325
|
+
{
|
|
326
|
+
sx: {
|
|
327
|
+
width: "100%",
|
|
328
|
+
maxWidth,
|
|
329
|
+
minWidth: 0,
|
|
330
|
+
display: "flex",
|
|
331
|
+
justifyContent: centered ? "center" : "flex-start",
|
|
332
|
+
alignItems: "center",
|
|
333
|
+
...harmonizeCompanyTypography ? companySlotTypographySx(centered) : null,
|
|
334
|
+
...companySlotSx
|
|
335
|
+
},
|
|
336
|
+
children
|
|
337
|
+
}
|
|
338
|
+
);
|
|
339
|
+
}
|
|
279
340
|
var Logo = (0, import_react.memo)(
|
|
280
341
|
({
|
|
281
342
|
loggedIn = false,
|
|
@@ -283,7 +344,9 @@ var Logo = (0, import_react.memo)(
|
|
|
283
344
|
organization = null,
|
|
284
345
|
defaultLogo = null,
|
|
285
346
|
handleClick = () => null,
|
|
286
|
-
companyComponent = null
|
|
347
|
+
companyComponent = null,
|
|
348
|
+
harmonizeCompanyTypography = true,
|
|
349
|
+
companySlotSx
|
|
287
350
|
}) => {
|
|
288
351
|
var _a2;
|
|
289
352
|
const theme = (0, import_material2.useTheme)();
|
|
@@ -291,47 +354,75 @@ var Logo = (0, import_react.memo)(
|
|
|
291
354
|
const maxWidth = mdMatches ? 160 : 320;
|
|
292
355
|
const companyName = (organization == null ? void 0 : organization.name) || "\u2013";
|
|
293
356
|
const logoUrl = (_a2 = organization == null ? void 0 : organization.logo) == null ? void 0 : _a2.url;
|
|
357
|
+
const avatarSx = {
|
|
358
|
+
fontFamily: LOGO_FONT_STACK,
|
|
359
|
+
bgcolor: "primary.main",
|
|
360
|
+
fontWeight: 600,
|
|
361
|
+
letterSpacing: "-0.02em"
|
|
362
|
+
};
|
|
363
|
+
const wm = wordmarkSx(centered);
|
|
294
364
|
if (centered) {
|
|
295
365
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
296
|
-
import_material2.
|
|
366
|
+
import_material2.Stack,
|
|
297
367
|
{
|
|
298
|
-
container: true,
|
|
299
|
-
direction: "column",
|
|
300
|
-
alignItems: "center",
|
|
301
|
-
justifyContent: "center",
|
|
302
368
|
spacing: 1,
|
|
303
|
-
sx: { cursor: "pointer" },
|
|
304
369
|
onClick: handleClick,
|
|
370
|
+
sx: {
|
|
371
|
+
cursor: "pointer",
|
|
372
|
+
alignItems: "stretch",
|
|
373
|
+
width: "100%",
|
|
374
|
+
maxWidth,
|
|
375
|
+
minWidth: 0
|
|
376
|
+
},
|
|
305
377
|
children: [
|
|
306
|
-
(logoUrl || defaultLogo) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
307
|
-
import_material2.
|
|
378
|
+
(logoUrl || defaultLogo) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
379
|
+
import_material2.Box,
|
|
308
380
|
{
|
|
309
|
-
alt: companyName || "avatar",
|
|
310
|
-
src: logoUrl,
|
|
311
381
|
sx: {
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
fontSize: 20,
|
|
317
|
-
fontWeight: "bold"
|
|
382
|
+
display: "flex",
|
|
383
|
+
justifyContent: "center",
|
|
384
|
+
alignItems: "center",
|
|
385
|
+
width: "100%"
|
|
318
386
|
},
|
|
319
|
-
|
|
320
|
-
|
|
387
|
+
children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
388
|
+
import_material2.Avatar,
|
|
389
|
+
{
|
|
390
|
+
alt: companyName || "avatar",
|
|
391
|
+
src: logoUrl,
|
|
392
|
+
sx: {
|
|
393
|
+
width: 64,
|
|
394
|
+
height: 64,
|
|
395
|
+
fontSize: "1.125rem",
|
|
396
|
+
...avatarSx
|
|
397
|
+
},
|
|
398
|
+
imgProps: { loading: "lazy" },
|
|
399
|
+
children: (companyName == null ? void 0 : companyName.charAt(0)) || "?"
|
|
400
|
+
}
|
|
401
|
+
) : defaultLogo
|
|
321
402
|
}
|
|
322
|
-
)
|
|
323
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
324
|
-
import_material2.
|
|
403
|
+
),
|
|
404
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
405
|
+
import_material2.Box,
|
|
325
406
|
{
|
|
326
|
-
variant: "h6",
|
|
327
407
|
sx: {
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
408
|
+
width: "100%",
|
|
409
|
+
minWidth: 0,
|
|
410
|
+
display: "flex",
|
|
411
|
+
justifyContent: "center",
|
|
412
|
+
textAlign: "center"
|
|
331
413
|
},
|
|
332
|
-
children: companyName
|
|
414
|
+
children: loggedIn ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Typography, { component: "span", sx: wm, children: companyName }) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
415
|
+
CompanySlot,
|
|
416
|
+
{
|
|
417
|
+
centered: true,
|
|
418
|
+
maxWidth,
|
|
419
|
+
harmonizeCompanyTypography,
|
|
420
|
+
companySlotSx,
|
|
421
|
+
children: companyComponent
|
|
422
|
+
}
|
|
423
|
+
)
|
|
333
424
|
}
|
|
334
|
-
)
|
|
425
|
+
)
|
|
335
426
|
]
|
|
336
427
|
}
|
|
337
428
|
);
|
|
@@ -348,7 +439,7 @@ var Logo = (0, import_react.memo)(
|
|
|
348
439
|
},
|
|
349
440
|
onClick: handleClick,
|
|
350
441
|
children: [
|
|
351
|
-
(logoUrl || defaultLogo) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Box, { sx: { mr: 1, display: "flex", alignItems: "center" }, children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
442
|
+
(logoUrl || defaultLogo) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Box, { sx: { mr: 1.25, display: "flex", alignItems: "center" }, children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
352
443
|
import_material2.Avatar,
|
|
353
444
|
{
|
|
354
445
|
alt: companyName || "avatar",
|
|
@@ -356,30 +447,23 @@ var Logo = (0, import_react.memo)(
|
|
|
356
447
|
sx: {
|
|
357
448
|
width: 36,
|
|
358
449
|
height: 36,
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
fontWeight: "bold"
|
|
450
|
+
fontSize: "0.875rem",
|
|
451
|
+
...avatarSx
|
|
362
452
|
},
|
|
363
453
|
imgProps: { loading: "lazy" },
|
|
364
454
|
children: (companyName == null ? void 0 : companyName.charAt(0)) || "?"
|
|
365
455
|
}
|
|
366
456
|
) : defaultLogo }),
|
|
367
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Box, { sx: { maxWidth, flexShrink: 1, minWidth: 0 }, children: loggedIn ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
368
|
-
|
|
457
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Box, { sx: { maxWidth, flexShrink: 1, minWidth: 0 }, children: loggedIn ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Typography, { component: "span", sx: wm, children: companyName }) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
458
|
+
CompanySlot,
|
|
369
459
|
{
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
whiteSpace: "nowrap",
|
|
376
|
-
fontFamily: "Courier, monospace",
|
|
377
|
-
fontWeight: "bold",
|
|
378
|
-
color: "primary.main"
|
|
379
|
-
},
|
|
380
|
-
children: companyName
|
|
460
|
+
centered: false,
|
|
461
|
+
maxWidth,
|
|
462
|
+
harmonizeCompanyTypography,
|
|
463
|
+
companySlotSx,
|
|
464
|
+
children: companyComponent
|
|
381
465
|
}
|
|
382
|
-
) })
|
|
466
|
+
) })
|
|
383
467
|
]
|
|
384
468
|
}
|
|
385
469
|
);
|
|
@@ -2513,6 +2597,7 @@ var OTPField_default = OTPField;
|
|
|
2513
2597
|
IOSSwitch,
|
|
2514
2598
|
ImageUploadAvatar,
|
|
2515
2599
|
InputFileUpload,
|
|
2600
|
+
LOGO_FONT_STACK,
|
|
2516
2601
|
Loader,
|
|
2517
2602
|
Logo,
|
|
2518
2603
|
OTPField,
|