@sarunyu/system-one 4.5.1 → 4.5.2
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/DESIGN.md +262 -0
- package/dist/index.cjs +20 -18
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +20 -18
- package/dist/index.js.map +1 -1
- package/dist/src/components/card.d.ts +1 -1
- package/dist/src/components/card.d.ts.map +1 -1
- package/package.json +5 -1
package/dist/index.js
CHANGED
|
@@ -363,6 +363,22 @@ const Alert = forwardRef(function Alert2({ status = "normal", message, multiline
|
|
|
363
363
|
);
|
|
364
364
|
});
|
|
365
365
|
Alert.displayName = "Alert";
|
|
366
|
+
const MOBILE_BREAKPOINT = 768;
|
|
367
|
+
function useIsMobile() {
|
|
368
|
+
const [isMobile, setIsMobile] = React.useState(
|
|
369
|
+
void 0
|
|
370
|
+
);
|
|
371
|
+
React.useEffect(() => {
|
|
372
|
+
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
|
|
373
|
+
const onChange = () => {
|
|
374
|
+
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
|
375
|
+
};
|
|
376
|
+
mql.addEventListener("change", onChange);
|
|
377
|
+
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
|
378
|
+
return () => mql.removeEventListener("change", onChange);
|
|
379
|
+
}, []);
|
|
380
|
+
return !!isMobile;
|
|
381
|
+
}
|
|
366
382
|
function BannerMedia({ src, alt }) {
|
|
367
383
|
if (!src) {
|
|
368
384
|
return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "absolute inset-0 bg-muted" });
|
|
@@ -470,7 +486,7 @@ const tagConfig = {
|
|
|
470
486
|
};
|
|
471
487
|
const Card = forwardRef(function Card2({
|
|
472
488
|
variant = "default",
|
|
473
|
-
size
|
|
489
|
+
size: sizeProp,
|
|
474
490
|
children,
|
|
475
491
|
title,
|
|
476
492
|
locked = true,
|
|
@@ -494,9 +510,11 @@ const Card = forwardRef(function Card2({
|
|
|
494
510
|
// live
|
|
495
511
|
duration
|
|
496
512
|
}, ref) {
|
|
513
|
+
const isMobile = useIsMobile();
|
|
514
|
+
const size = sizeProp ?? (isMobile ? "mobile" : "desktop");
|
|
497
515
|
const bannerSrc = image ?? "";
|
|
498
516
|
if (variant === "default") {
|
|
499
|
-
const shellPadding = size === "desktop" ? "p-4" :
|
|
517
|
+
const shellPadding = size === "desktop" ? "p-4" : "p-3";
|
|
500
518
|
const shellRadius = size === "mobile" ? "rounded-[6px]" : "rounded-[8px]";
|
|
501
519
|
return /* @__PURE__ */ jsx(
|
|
502
520
|
"div",
|
|
@@ -1381,22 +1399,6 @@ const Chip = forwardRef(function Chip2({
|
|
|
1381
1399
|
);
|
|
1382
1400
|
});
|
|
1383
1401
|
Chip.displayName = "Chip";
|
|
1384
|
-
const MOBILE_BREAKPOINT = 768;
|
|
1385
|
-
function useIsMobile() {
|
|
1386
|
-
const [isMobile, setIsMobile] = React.useState(
|
|
1387
|
-
void 0
|
|
1388
|
-
);
|
|
1389
|
-
React.useEffect(() => {
|
|
1390
|
-
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
|
|
1391
|
-
const onChange = () => {
|
|
1392
|
-
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
|
1393
|
-
};
|
|
1394
|
-
mql.addEventListener("change", onChange);
|
|
1395
|
-
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
|
1396
|
-
return () => mql.removeEventListener("change", onChange);
|
|
1397
|
-
}, []);
|
|
1398
|
-
return !!isMobile;
|
|
1399
|
-
}
|
|
1400
1402
|
function Drawer({
|
|
1401
1403
|
...props
|
|
1402
1404
|
}) {
|