@verma-consulting/design-library 0.1.57 → 0.1.58
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 +94 -34
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +93 -34
- 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,6 +354,13 @@ 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
366
|
import_material2.Grid,
|
|
@@ -303,35 +373,31 @@ var Logo = (0, import_react.memo)(
|
|
|
303
373
|
sx: { cursor: "pointer" },
|
|
304
374
|
onClick: handleClick,
|
|
305
375
|
children: [
|
|
306
|
-
(logoUrl || defaultLogo) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Grid, { item: true, children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
376
|
+
(logoUrl || defaultLogo) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Grid, { item: true, sx: { display: "flex", justifyContent: "center" }, children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
307
377
|
import_material2.Avatar,
|
|
308
378
|
{
|
|
309
379
|
alt: companyName || "avatar",
|
|
310
380
|
src: logoUrl,
|
|
311
381
|
sx: {
|
|
312
382
|
width: 64,
|
|
313
|
-
// slightly bigger
|
|
314
383
|
height: 64,
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
fontWeight: "bold"
|
|
384
|
+
fontSize: "1.125rem",
|
|
385
|
+
...avatarSx
|
|
318
386
|
},
|
|
319
387
|
imgProps: { loading: "lazy" },
|
|
320
388
|
children: (companyName == null ? void 0 : companyName.charAt(0)) || "?"
|
|
321
389
|
}
|
|
322
390
|
) : defaultLogo }),
|
|
323
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Grid, { item: true, sx: { maxWidth, textAlign: "center" }, children: loggedIn ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
324
|
-
|
|
391
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Grid, { item: true, sx: { maxWidth, width: "100%", textAlign: "center" }, 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)(
|
|
392
|
+
CompanySlot,
|
|
325
393
|
{
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
},
|
|
332
|
-
children: companyName
|
|
394
|
+
centered: true,
|
|
395
|
+
maxWidth,
|
|
396
|
+
harmonizeCompanyTypography,
|
|
397
|
+
companySlotSx,
|
|
398
|
+
children: companyComponent
|
|
333
399
|
}
|
|
334
|
-
) })
|
|
400
|
+
) })
|
|
335
401
|
]
|
|
336
402
|
}
|
|
337
403
|
);
|
|
@@ -348,7 +414,7 @@ var Logo = (0, import_react.memo)(
|
|
|
348
414
|
},
|
|
349
415
|
onClick: handleClick,
|
|
350
416
|
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)(
|
|
417
|
+
(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
418
|
import_material2.Avatar,
|
|
353
419
|
{
|
|
354
420
|
alt: companyName || "avatar",
|
|
@@ -356,30 +422,23 @@ var Logo = (0, import_react.memo)(
|
|
|
356
422
|
sx: {
|
|
357
423
|
width: 36,
|
|
358
424
|
height: 36,
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
fontWeight: "bold"
|
|
425
|
+
fontSize: "0.875rem",
|
|
426
|
+
...avatarSx
|
|
362
427
|
},
|
|
363
428
|
imgProps: { loading: "lazy" },
|
|
364
429
|
children: (companyName == null ? void 0 : companyName.charAt(0)) || "?"
|
|
365
430
|
}
|
|
366
431
|
) : 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
|
-
|
|
432
|
+
/* @__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)(
|
|
433
|
+
CompanySlot,
|
|
369
434
|
{
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
whiteSpace: "nowrap",
|
|
376
|
-
fontFamily: "Courier, monospace",
|
|
377
|
-
fontWeight: "bold",
|
|
378
|
-
color: "primary.main"
|
|
379
|
-
},
|
|
380
|
-
children: companyName
|
|
435
|
+
centered: false,
|
|
436
|
+
maxWidth,
|
|
437
|
+
harmonizeCompanyTypography,
|
|
438
|
+
companySlotSx,
|
|
439
|
+
children: companyComponent
|
|
381
440
|
}
|
|
382
|
-
) })
|
|
441
|
+
) })
|
|
383
442
|
]
|
|
384
443
|
}
|
|
385
444
|
);
|
|
@@ -2513,6 +2572,7 @@ var OTPField_default = OTPField;
|
|
|
2513
2572
|
IOSSwitch,
|
|
2514
2573
|
ImageUploadAvatar,
|
|
2515
2574
|
InputFileUpload,
|
|
2575
|
+
LOGO_FONT_STACK,
|
|
2516
2576
|
Loader,
|
|
2517
2577
|
Logo,
|
|
2518
2578
|
OTPField,
|