@refinn/core-ui 0.1.10 → 0.1.12
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.cjs +170 -96
- package/dist/index.d.mts +6 -1
- package/dist/index.d.ts +6 -1
- package/dist/index.js +170 -96
- package/dist/theme.css +1 -0
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -799,9 +799,22 @@ function IndeterminateIcon({ className }) {
|
|
|
799
799
|
}
|
|
800
800
|
);
|
|
801
801
|
}
|
|
802
|
+
var boxSizeClasses = {
|
|
803
|
+
s: "h-20 w-20",
|
|
804
|
+
m: "h-24 w-24"
|
|
805
|
+
};
|
|
806
|
+
var labelTextClasses = {
|
|
807
|
+
s: "text-label-medium",
|
|
808
|
+
m: "text-label-large"
|
|
809
|
+
};
|
|
810
|
+
var descriptionPaddingClasses = {
|
|
811
|
+
s: "pl-24",
|
|
812
|
+
m: "pl-28"
|
|
813
|
+
};
|
|
802
814
|
var Checkbox = (0, import_react8.forwardRef)(
|
|
803
815
|
(_a, ref) => {
|
|
804
816
|
var _b = _a, {
|
|
817
|
+
size = "s",
|
|
805
818
|
label,
|
|
806
819
|
description,
|
|
807
820
|
error = false,
|
|
@@ -812,6 +825,7 @@ var Checkbox = (0, import_react8.forwardRef)(
|
|
|
812
825
|
id,
|
|
813
826
|
defaultChecked
|
|
814
827
|
} = _b, rest = __objRest(_b, [
|
|
828
|
+
"size",
|
|
815
829
|
"label",
|
|
816
830
|
"description",
|
|
817
831
|
"error",
|
|
@@ -825,64 +839,88 @@ var Checkbox = (0, import_react8.forwardRef)(
|
|
|
825
839
|
const reactId = (0, import_react8.useId)();
|
|
826
840
|
const inputId = id != null ? id : reactId;
|
|
827
841
|
const [isChecked, setIsChecked] = (0, import_react8.useState)(defaultChecked != null ? defaultChecked : false);
|
|
842
|
+
const active = isChecked || indeterminate;
|
|
843
|
+
let bgClass;
|
|
844
|
+
let borderClass;
|
|
845
|
+
let iconColorClass;
|
|
846
|
+
let hoverClass = "";
|
|
847
|
+
if (disabled) {
|
|
848
|
+
bgClass = active ? "bg-checkbox-disabled-checked-bg" : "bg-checkbox-disabled-bg";
|
|
849
|
+
borderClass = "border-checkbox-disabled-border";
|
|
850
|
+
iconColorClass = "text-checkbox-disabled-icon";
|
|
851
|
+
} else if (contrast) {
|
|
852
|
+
bgClass = active ? "bg-checkbox-contrast-checked-bg" : "bg-checkbox-contrast-bg";
|
|
853
|
+
borderClass = active ? "border-checkbox-contrast-checked-bg" : "border-checkbox-contrast-border";
|
|
854
|
+
iconColorClass = "text-checkbox-contrast-checked-icon";
|
|
855
|
+
} else if (active) {
|
|
856
|
+
bgClass = "bg-checkbox-checked-bg";
|
|
857
|
+
borderClass = "border-checkbox-checked-border";
|
|
858
|
+
iconColorClass = "text-checkbox-checked-icon";
|
|
859
|
+
} else if (error) {
|
|
860
|
+
bgClass = "bg-checkbox-error-bg";
|
|
861
|
+
borderClass = "border-checkbox-error-border";
|
|
862
|
+
iconColorClass = "";
|
|
863
|
+
} else {
|
|
864
|
+
bgClass = "bg-checkbox-bg";
|
|
865
|
+
borderClass = "border-checkbox-border";
|
|
866
|
+
iconColorClass = "";
|
|
867
|
+
hoverClass = "hover:border-checkbox-hover-border";
|
|
868
|
+
}
|
|
869
|
+
const ringClass = error ? "peer-focus-visible:outline-checkbox-error-ring" : contrast ? "peer-focus-visible:outline-checkbox-contrast-ring" : "peer-focus-visible:outline-checkbox-ring";
|
|
870
|
+
const labelColorClass = disabled ? "text-checkbox-label-disabled" : contrast ? "text-checkbox-contrast-label" : "text-checkbox-label";
|
|
871
|
+
const descriptionColorClass = disabled ? "text-checkbox-label-disabled" : error ? "text-checkbox-label-error" : contrast ? "text-checkbox-contrast-description" : "text-checkbox-description";
|
|
828
872
|
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
829
873
|
"label",
|
|
830
874
|
{
|
|
831
875
|
htmlFor: inputId,
|
|
832
|
-
className: `flex select-none font-sans ${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${className}`,
|
|
876
|
+
className: `inline-flex select-none flex-col font-sans ${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${className}`,
|
|
833
877
|
children: [
|
|
834
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "
|
|
835
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
878
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-4", children: [
|
|
879
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative shrink-0", children: [
|
|
880
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
881
|
+
"input",
|
|
882
|
+
__spreadValues({
|
|
883
|
+
ref,
|
|
884
|
+
id: inputId,
|
|
885
|
+
type: "checkbox",
|
|
886
|
+
defaultChecked,
|
|
887
|
+
onChange: (e) => {
|
|
888
|
+
var _a2;
|
|
889
|
+
setIsChecked(e.target.checked);
|
|
890
|
+
(_a2 = rest.onChange) == null ? void 0 : _a2.call(rest, e);
|
|
891
|
+
},
|
|
892
|
+
disabled,
|
|
893
|
+
"aria-checked": indeterminate ? "mixed" : isChecked,
|
|
894
|
+
className: "peer sr-only"
|
|
895
|
+
}, rest)
|
|
896
|
+
),
|
|
897
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
898
|
+
"div",
|
|
899
|
+
{
|
|
900
|
+
className: `flex items-center justify-center rounded-md border transition-colors ${boxSizeClasses[size]} ${bgClass} ${borderClass} ${hoverClass} ${ringClass} peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2`,
|
|
901
|
+
children: isChecked ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
902
|
+
CheckIcon,
|
|
903
|
+
{
|
|
904
|
+
className: `${boxSizeClasses[size]} ${iconColorClass}`
|
|
905
|
+
}
|
|
906
|
+
) : indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
907
|
+
IndeterminateIcon,
|
|
908
|
+
{
|
|
909
|
+
className: `${boxSizeClasses[size]} ${iconColorClass}`
|
|
910
|
+
}
|
|
911
|
+
) : null
|
|
912
|
+
}
|
|
913
|
+
)
|
|
914
|
+
] }),
|
|
915
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: `${labelTextClasses[size]} ${labelColorClass}`, children: label })
|
|
869
916
|
] }),
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
{
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
),
|
|
878
|
-
description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
879
|
-
"span",
|
|
880
|
-
{
|
|
881
|
-
className: `text-body-small ${error ? "text-checkbox-text-danger" : disabled ? "text-checkbox-text-disabled" : contrast ? "text-checkbox-text-primary-inverse" : "text-checkbox-text-secondary"}`,
|
|
882
|
-
children: description
|
|
883
|
-
}
|
|
884
|
-
)
|
|
885
|
-
] })
|
|
917
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
918
|
+
"span",
|
|
919
|
+
{
|
|
920
|
+
className: `text-body-small ${descriptionPaddingClasses[size]} ${descriptionColorClass}`,
|
|
921
|
+
children: description
|
|
922
|
+
}
|
|
923
|
+
)
|
|
886
924
|
]
|
|
887
925
|
}
|
|
888
926
|
);
|
|
@@ -1247,6 +1285,9 @@ var Drawer = (0, import_react12.forwardRef)(
|
|
|
1247
1285
|
subtitle,
|
|
1248
1286
|
closable = true,
|
|
1249
1287
|
backdrop = true,
|
|
1288
|
+
fullScreen = false,
|
|
1289
|
+
header,
|
|
1290
|
+
background = "primary",
|
|
1250
1291
|
children,
|
|
1251
1292
|
dismiss,
|
|
1252
1293
|
secondary,
|
|
@@ -1259,6 +1300,9 @@ var Drawer = (0, import_react12.forwardRef)(
|
|
|
1259
1300
|
"subtitle",
|
|
1260
1301
|
"closable",
|
|
1261
1302
|
"backdrop",
|
|
1303
|
+
"fullScreen",
|
|
1304
|
+
"header",
|
|
1305
|
+
"background",
|
|
1262
1306
|
"children",
|
|
1263
1307
|
"dismiss",
|
|
1264
1308
|
"secondary",
|
|
@@ -1279,7 +1323,7 @@ var Drawer = (0, import_react12.forwardRef)(
|
|
|
1279
1323
|
const handleBackdropMouseDown = (e) => {
|
|
1280
1324
|
if (closable && e.target === e.currentTarget) handleClose();
|
|
1281
1325
|
};
|
|
1282
|
-
const showHeader = Boolean(title || subtitle || closable);
|
|
1326
|
+
const showHeader = header != null ? header : Boolean(title || subtitle || closable);
|
|
1283
1327
|
const showFooter = Boolean(dismiss || secondary || confirm);
|
|
1284
1328
|
const allActions = Boolean(dismiss && secondary && confirm);
|
|
1285
1329
|
return (0, import_react_dom2.createPortal)(
|
|
@@ -1304,54 +1348,84 @@ var Drawer = (0, import_react12.forwardRef)(
|
|
|
1304
1348
|
"relative flex h-full w-full flex-col overflow-hidden bg-dialog-background-primary",
|
|
1305
1349
|
"transition-transform duration-300",
|
|
1306
1350
|
animate ? "translate-y-0" : "translate-y-full",
|
|
1307
|
-
"
|
|
1308
|
-
|
|
1309
|
-
|
|
1351
|
+
fullScreen ? "" : [
|
|
1352
|
+
"lg:translate-y-0",
|
|
1353
|
+
animate ? "lg:translate-x-0" : "lg:translate-x-full"
|
|
1354
|
+
].join(" "),
|
|
1355
|
+
fullScreen ? "lg:w-full" : "lg:w-480 lg:min-w-480 lg:max-w-640",
|
|
1310
1356
|
className
|
|
1311
1357
|
].filter(Boolean).join(" "),
|
|
1312
1358
|
onMouseDown: (e) => e.stopPropagation()
|
|
1313
1359
|
}, rest), {
|
|
1314
1360
|
children: [
|
|
1315
|
-
showHeader && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
{
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1361
|
+
showHeader && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1362
|
+
"div",
|
|
1363
|
+
{
|
|
1364
|
+
className: [
|
|
1365
|
+
"flex shrink-0 items-center gap-8 border-b border-border-subtle bg-dialog-background-primary px-16 pb-12 pt-16",
|
|
1366
|
+
fullScreen ? "lg:gap-16 lg:px-112 lg:py-24" : "lg:px-24 lg:pb-16 lg:pt-20"
|
|
1367
|
+
].join(" "),
|
|
1368
|
+
children: [
|
|
1369
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
|
|
1370
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-heading-3 text-dialog-text-primary lg:text-heading-3-md", children: title }),
|
|
1371
|
+
subtitle && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-body-small text-dialog-text-secondary", children: subtitle })
|
|
1372
|
+
] }),
|
|
1373
|
+
closable && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
|
|
1374
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1375
|
+
IconButton,
|
|
1376
|
+
{
|
|
1377
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CloseIcon3, { className: "h-20 w-20" }),
|
|
1378
|
+
size: "s",
|
|
1379
|
+
"aria-label": "\u0E1B\u0E34\u0E14",
|
|
1380
|
+
onClick: handleClose,
|
|
1381
|
+
className: "bg-icon-button-background-enabled lg:hidden!"
|
|
1382
|
+
}
|
|
1383
|
+
),
|
|
1384
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1385
|
+
IconButton,
|
|
1386
|
+
{
|
|
1387
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CloseIcon3, { className: "h-24 w-24" }),
|
|
1388
|
+
size: fullScreen ? "l" : "m",
|
|
1389
|
+
"aria-label": "\u0E1B\u0E34\u0E14",
|
|
1390
|
+
onClick: handleClose,
|
|
1391
|
+
className: "hidden! bg-icon-button-background-enabled lg:inline-flex!"
|
|
1392
|
+
}
|
|
1393
|
+
)
|
|
1394
|
+
] })
|
|
1395
|
+
]
|
|
1396
|
+
}
|
|
1397
|
+
),
|
|
1398
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1399
|
+
"div",
|
|
1400
|
+
{
|
|
1401
|
+
className: [
|
|
1402
|
+
"flex-1 overflow-y-auto p-16 text-body-regular text-dialog-text-primary",
|
|
1403
|
+
background === "secondary" ? "bg-drawer-background-secondary" : "bg-dialog-background-primary",
|
|
1404
|
+
fullScreen ? "lg:px-112 lg:py-24" : "lg:p-24"
|
|
1405
|
+
].join(" "),
|
|
1406
|
+
children
|
|
1407
|
+
}
|
|
1408
|
+
),
|
|
1409
|
+
showFooter && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1410
|
+
"div",
|
|
1411
|
+
{
|
|
1412
|
+
className: [
|
|
1413
|
+
"flex shrink-0 flex-col gap-8 border-t border-border-subtle bg-dialog-background-primary px-16 pb-16 pt-12 lg:flex-row lg:items-center lg:justify-end",
|
|
1414
|
+
fullScreen ? "lg:gap-16 lg:px-112 lg:py-24" : "lg:px-24 lg:pb-24 lg:pt-16"
|
|
1415
|
+
].join(" "),
|
|
1416
|
+
children: allActions ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
|
|
1417
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DrawerAction, { action: dismiss, variant: "tertiary", orderClass: "order-3 lg:order-1" }),
|
|
1418
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "contents gap-8 lg:order-2 lg:ml-auto lg:flex lg:items-center", children: [
|
|
1419
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DrawerAction, { action: secondary, variant: "secondary", orderClass: "order-1" }),
|
|
1420
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DrawerAction, { action: confirm, variant: "primary", orderClass: "order-2" })
|
|
1421
|
+
] })
|
|
1422
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
|
|
1423
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DrawerAction, { action: secondary, variant: "secondary", orderClass: "order-1 lg:order-2" }),
|
|
1424
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DrawerAction, { action: confirm, variant: "primary", orderClass: "order-2 lg:order-3" }),
|
|
1425
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DrawerAction, { action: dismiss, variant: "tertiary", orderClass: "order-3 lg:order-1" })
|
|
1426
|
+
] })
|
|
1427
|
+
}
|
|
1428
|
+
)
|
|
1355
1429
|
]
|
|
1356
1430
|
})
|
|
1357
1431
|
)
|
package/dist/index.d.mts
CHANGED
|
@@ -72,7 +72,9 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
72
72
|
}
|
|
73
73
|
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
74
74
|
|
|
75
|
-
|
|
75
|
+
type CheckboxSize = "s" | "m";
|
|
76
|
+
interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
|
|
77
|
+
size?: CheckboxSize;
|
|
76
78
|
label?: ReactNode;
|
|
77
79
|
description?: ReactNode;
|
|
78
80
|
error?: boolean;
|
|
@@ -124,6 +126,9 @@ interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
|
124
126
|
subtitle?: ReactNode;
|
|
125
127
|
closable?: boolean;
|
|
126
128
|
backdrop?: boolean;
|
|
129
|
+
fullScreen?: boolean;
|
|
130
|
+
header?: boolean;
|
|
131
|
+
background?: 'primary' | 'secondary';
|
|
127
132
|
children?: ReactNode;
|
|
128
133
|
dismiss?: DrawerActionProps;
|
|
129
134
|
secondary?: DrawerActionProps;
|
package/dist/index.d.ts
CHANGED
|
@@ -72,7 +72,9 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
72
72
|
}
|
|
73
73
|
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
74
74
|
|
|
75
|
-
|
|
75
|
+
type CheckboxSize = "s" | "m";
|
|
76
|
+
interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
|
|
77
|
+
size?: CheckboxSize;
|
|
76
78
|
label?: ReactNode;
|
|
77
79
|
description?: ReactNode;
|
|
78
80
|
error?: boolean;
|
|
@@ -124,6 +126,9 @@ interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
|
124
126
|
subtitle?: ReactNode;
|
|
125
127
|
closable?: boolean;
|
|
126
128
|
backdrop?: boolean;
|
|
129
|
+
fullScreen?: boolean;
|
|
130
|
+
header?: boolean;
|
|
131
|
+
background?: 'primary' | 'secondary';
|
|
127
132
|
children?: ReactNode;
|
|
128
133
|
dismiss?: DrawerActionProps;
|
|
129
134
|
secondary?: DrawerActionProps;
|
package/dist/index.js
CHANGED
|
@@ -763,9 +763,22 @@ function IndeterminateIcon({ className }) {
|
|
|
763
763
|
}
|
|
764
764
|
);
|
|
765
765
|
}
|
|
766
|
+
var boxSizeClasses = {
|
|
767
|
+
s: "h-20 w-20",
|
|
768
|
+
m: "h-24 w-24"
|
|
769
|
+
};
|
|
770
|
+
var labelTextClasses = {
|
|
771
|
+
s: "text-label-medium",
|
|
772
|
+
m: "text-label-large"
|
|
773
|
+
};
|
|
774
|
+
var descriptionPaddingClasses = {
|
|
775
|
+
s: "pl-24",
|
|
776
|
+
m: "pl-28"
|
|
777
|
+
};
|
|
766
778
|
var Checkbox = forwardRef8(
|
|
767
779
|
(_a, ref) => {
|
|
768
780
|
var _b = _a, {
|
|
781
|
+
size = "s",
|
|
769
782
|
label,
|
|
770
783
|
description,
|
|
771
784
|
error = false,
|
|
@@ -776,6 +789,7 @@ var Checkbox = forwardRef8(
|
|
|
776
789
|
id,
|
|
777
790
|
defaultChecked
|
|
778
791
|
} = _b, rest = __objRest(_b, [
|
|
792
|
+
"size",
|
|
779
793
|
"label",
|
|
780
794
|
"description",
|
|
781
795
|
"error",
|
|
@@ -789,64 +803,88 @@ var Checkbox = forwardRef8(
|
|
|
789
803
|
const reactId = useId2();
|
|
790
804
|
const inputId = id != null ? id : reactId;
|
|
791
805
|
const [isChecked, setIsChecked] = useState2(defaultChecked != null ? defaultChecked : false);
|
|
806
|
+
const active = isChecked || indeterminate;
|
|
807
|
+
let bgClass;
|
|
808
|
+
let borderClass;
|
|
809
|
+
let iconColorClass;
|
|
810
|
+
let hoverClass = "";
|
|
811
|
+
if (disabled) {
|
|
812
|
+
bgClass = active ? "bg-checkbox-disabled-checked-bg" : "bg-checkbox-disabled-bg";
|
|
813
|
+
borderClass = "border-checkbox-disabled-border";
|
|
814
|
+
iconColorClass = "text-checkbox-disabled-icon";
|
|
815
|
+
} else if (contrast) {
|
|
816
|
+
bgClass = active ? "bg-checkbox-contrast-checked-bg" : "bg-checkbox-contrast-bg";
|
|
817
|
+
borderClass = active ? "border-checkbox-contrast-checked-bg" : "border-checkbox-contrast-border";
|
|
818
|
+
iconColorClass = "text-checkbox-contrast-checked-icon";
|
|
819
|
+
} else if (active) {
|
|
820
|
+
bgClass = "bg-checkbox-checked-bg";
|
|
821
|
+
borderClass = "border-checkbox-checked-border";
|
|
822
|
+
iconColorClass = "text-checkbox-checked-icon";
|
|
823
|
+
} else if (error) {
|
|
824
|
+
bgClass = "bg-checkbox-error-bg";
|
|
825
|
+
borderClass = "border-checkbox-error-border";
|
|
826
|
+
iconColorClass = "";
|
|
827
|
+
} else {
|
|
828
|
+
bgClass = "bg-checkbox-bg";
|
|
829
|
+
borderClass = "border-checkbox-border";
|
|
830
|
+
iconColorClass = "";
|
|
831
|
+
hoverClass = "hover:border-checkbox-hover-border";
|
|
832
|
+
}
|
|
833
|
+
const ringClass = error ? "peer-focus-visible:outline-checkbox-error-ring" : contrast ? "peer-focus-visible:outline-checkbox-contrast-ring" : "peer-focus-visible:outline-checkbox-ring";
|
|
834
|
+
const labelColorClass = disabled ? "text-checkbox-label-disabled" : contrast ? "text-checkbox-contrast-label" : "text-checkbox-label";
|
|
835
|
+
const descriptionColorClass = disabled ? "text-checkbox-label-disabled" : error ? "text-checkbox-label-error" : contrast ? "text-checkbox-contrast-description" : "text-checkbox-description";
|
|
792
836
|
return /* @__PURE__ */ jsxs8(
|
|
793
837
|
"label",
|
|
794
838
|
{
|
|
795
839
|
htmlFor: inputId,
|
|
796
|
-
className: `flex select-none font-sans ${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${className}`,
|
|
840
|
+
className: `inline-flex select-none flex-col font-sans ${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${className}`,
|
|
797
841
|
children: [
|
|
798
|
-
/* @__PURE__ */ jsxs8("div", { className: "
|
|
799
|
-
/* @__PURE__ */
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
842
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-4", children: [
|
|
843
|
+
/* @__PURE__ */ jsxs8("div", { className: "relative shrink-0", children: [
|
|
844
|
+
/* @__PURE__ */ jsx8(
|
|
845
|
+
"input",
|
|
846
|
+
__spreadValues({
|
|
847
|
+
ref,
|
|
848
|
+
id: inputId,
|
|
849
|
+
type: "checkbox",
|
|
850
|
+
defaultChecked,
|
|
851
|
+
onChange: (e) => {
|
|
852
|
+
var _a2;
|
|
853
|
+
setIsChecked(e.target.checked);
|
|
854
|
+
(_a2 = rest.onChange) == null ? void 0 : _a2.call(rest, e);
|
|
855
|
+
},
|
|
856
|
+
disabled,
|
|
857
|
+
"aria-checked": indeterminate ? "mixed" : isChecked,
|
|
858
|
+
className: "peer sr-only"
|
|
859
|
+
}, rest)
|
|
860
|
+
),
|
|
861
|
+
/* @__PURE__ */ jsx8(
|
|
862
|
+
"div",
|
|
863
|
+
{
|
|
864
|
+
className: `flex items-center justify-center rounded-md border transition-colors ${boxSizeClasses[size]} ${bgClass} ${borderClass} ${hoverClass} ${ringClass} peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2`,
|
|
865
|
+
children: isChecked ? /* @__PURE__ */ jsx8(
|
|
866
|
+
CheckIcon,
|
|
867
|
+
{
|
|
868
|
+
className: `${boxSizeClasses[size]} ${iconColorClass}`
|
|
869
|
+
}
|
|
870
|
+
) : indeterminate ? /* @__PURE__ */ jsx8(
|
|
871
|
+
IndeterminateIcon,
|
|
872
|
+
{
|
|
873
|
+
className: `${boxSizeClasses[size]} ${iconColorClass}`
|
|
874
|
+
}
|
|
875
|
+
) : null
|
|
876
|
+
}
|
|
877
|
+
)
|
|
878
|
+
] }),
|
|
879
|
+
label && /* @__PURE__ */ jsx8("span", { className: `${labelTextClasses[size]} ${labelColorClass}`, children: label })
|
|
833
880
|
] }),
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
{
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
),
|
|
842
|
-
description && /* @__PURE__ */ jsx8(
|
|
843
|
-
"span",
|
|
844
|
-
{
|
|
845
|
-
className: `text-body-small ${error ? "text-checkbox-text-danger" : disabled ? "text-checkbox-text-disabled" : contrast ? "text-checkbox-text-primary-inverse" : "text-checkbox-text-secondary"}`,
|
|
846
|
-
children: description
|
|
847
|
-
}
|
|
848
|
-
)
|
|
849
|
-
] })
|
|
881
|
+
description && /* @__PURE__ */ jsx8(
|
|
882
|
+
"span",
|
|
883
|
+
{
|
|
884
|
+
className: `text-body-small ${descriptionPaddingClasses[size]} ${descriptionColorClass}`,
|
|
885
|
+
children: description
|
|
886
|
+
}
|
|
887
|
+
)
|
|
850
888
|
]
|
|
851
889
|
}
|
|
852
890
|
);
|
|
@@ -1221,6 +1259,9 @@ var Drawer = forwardRef12(
|
|
|
1221
1259
|
subtitle,
|
|
1222
1260
|
closable = true,
|
|
1223
1261
|
backdrop = true,
|
|
1262
|
+
fullScreen = false,
|
|
1263
|
+
header,
|
|
1264
|
+
background = "primary",
|
|
1224
1265
|
children,
|
|
1225
1266
|
dismiss,
|
|
1226
1267
|
secondary,
|
|
@@ -1233,6 +1274,9 @@ var Drawer = forwardRef12(
|
|
|
1233
1274
|
"subtitle",
|
|
1234
1275
|
"closable",
|
|
1235
1276
|
"backdrop",
|
|
1277
|
+
"fullScreen",
|
|
1278
|
+
"header",
|
|
1279
|
+
"background",
|
|
1236
1280
|
"children",
|
|
1237
1281
|
"dismiss",
|
|
1238
1282
|
"secondary",
|
|
@@ -1253,7 +1297,7 @@ var Drawer = forwardRef12(
|
|
|
1253
1297
|
const handleBackdropMouseDown = (e) => {
|
|
1254
1298
|
if (closable && e.target === e.currentTarget) handleClose();
|
|
1255
1299
|
};
|
|
1256
|
-
const showHeader = Boolean(title || subtitle || closable);
|
|
1300
|
+
const showHeader = header != null ? header : Boolean(title || subtitle || closable);
|
|
1257
1301
|
const showFooter = Boolean(dismiss || secondary || confirm);
|
|
1258
1302
|
const allActions = Boolean(dismiss && secondary && confirm);
|
|
1259
1303
|
return createPortal2(
|
|
@@ -1278,54 +1322,84 @@ var Drawer = forwardRef12(
|
|
|
1278
1322
|
"relative flex h-full w-full flex-col overflow-hidden bg-dialog-background-primary",
|
|
1279
1323
|
"transition-transform duration-300",
|
|
1280
1324
|
animate ? "translate-y-0" : "translate-y-full",
|
|
1281
|
-
"
|
|
1282
|
-
|
|
1283
|
-
|
|
1325
|
+
fullScreen ? "" : [
|
|
1326
|
+
"lg:translate-y-0",
|
|
1327
|
+
animate ? "lg:translate-x-0" : "lg:translate-x-full"
|
|
1328
|
+
].join(" "),
|
|
1329
|
+
fullScreen ? "lg:w-full" : "lg:w-480 lg:min-w-480 lg:max-w-640",
|
|
1284
1330
|
className
|
|
1285
1331
|
].filter(Boolean).join(" "),
|
|
1286
1332
|
onMouseDown: (e) => e.stopPropagation()
|
|
1287
1333
|
}, rest), {
|
|
1288
1334
|
children: [
|
|
1289
|
-
showHeader && /* @__PURE__ */ jsxs11(
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
{
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1335
|
+
showHeader && /* @__PURE__ */ jsxs11(
|
|
1336
|
+
"div",
|
|
1337
|
+
{
|
|
1338
|
+
className: [
|
|
1339
|
+
"flex shrink-0 items-center gap-8 border-b border-border-subtle bg-dialog-background-primary px-16 pb-12 pt-16",
|
|
1340
|
+
fullScreen ? "lg:gap-16 lg:px-112 lg:py-24" : "lg:px-24 lg:pb-16 lg:pt-20"
|
|
1341
|
+
].join(" "),
|
|
1342
|
+
children: [
|
|
1343
|
+
/* @__PURE__ */ jsxs11("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
|
|
1344
|
+
title && /* @__PURE__ */ jsx12("p", { className: "text-heading-3 text-dialog-text-primary lg:text-heading-3-md", children: title }),
|
|
1345
|
+
subtitle && /* @__PURE__ */ jsx12("p", { className: "text-body-small text-dialog-text-secondary", children: subtitle })
|
|
1346
|
+
] }),
|
|
1347
|
+
closable && /* @__PURE__ */ jsxs11(Fragment3, { children: [
|
|
1348
|
+
/* @__PURE__ */ jsx12(
|
|
1349
|
+
IconButton,
|
|
1350
|
+
{
|
|
1351
|
+
icon: /* @__PURE__ */ jsx12(CloseIcon3, { className: "h-20 w-20" }),
|
|
1352
|
+
size: "s",
|
|
1353
|
+
"aria-label": "\u0E1B\u0E34\u0E14",
|
|
1354
|
+
onClick: handleClose,
|
|
1355
|
+
className: "bg-icon-button-background-enabled lg:hidden!"
|
|
1356
|
+
}
|
|
1357
|
+
),
|
|
1358
|
+
/* @__PURE__ */ jsx12(
|
|
1359
|
+
IconButton,
|
|
1360
|
+
{
|
|
1361
|
+
icon: /* @__PURE__ */ jsx12(CloseIcon3, { className: "h-24 w-24" }),
|
|
1362
|
+
size: fullScreen ? "l" : "m",
|
|
1363
|
+
"aria-label": "\u0E1B\u0E34\u0E14",
|
|
1364
|
+
onClick: handleClose,
|
|
1365
|
+
className: "hidden! bg-icon-button-background-enabled lg:inline-flex!"
|
|
1366
|
+
}
|
|
1367
|
+
)
|
|
1368
|
+
] })
|
|
1369
|
+
]
|
|
1370
|
+
}
|
|
1371
|
+
),
|
|
1372
|
+
/* @__PURE__ */ jsx12(
|
|
1373
|
+
"div",
|
|
1374
|
+
{
|
|
1375
|
+
className: [
|
|
1376
|
+
"flex-1 overflow-y-auto p-16 text-body-regular text-dialog-text-primary",
|
|
1377
|
+
background === "secondary" ? "bg-drawer-background-secondary" : "bg-dialog-background-primary",
|
|
1378
|
+
fullScreen ? "lg:px-112 lg:py-24" : "lg:p-24"
|
|
1379
|
+
].join(" "),
|
|
1380
|
+
children
|
|
1381
|
+
}
|
|
1382
|
+
),
|
|
1383
|
+
showFooter && /* @__PURE__ */ jsx12(
|
|
1384
|
+
"div",
|
|
1385
|
+
{
|
|
1386
|
+
className: [
|
|
1387
|
+
"flex shrink-0 flex-col gap-8 border-t border-border-subtle bg-dialog-background-primary px-16 pb-16 pt-12 lg:flex-row lg:items-center lg:justify-end",
|
|
1388
|
+
fullScreen ? "lg:gap-16 lg:px-112 lg:py-24" : "lg:px-24 lg:pb-24 lg:pt-16"
|
|
1389
|
+
].join(" "),
|
|
1390
|
+
children: allActions ? /* @__PURE__ */ jsxs11(Fragment3, { children: [
|
|
1391
|
+
/* @__PURE__ */ jsx12(DrawerAction, { action: dismiss, variant: "tertiary", orderClass: "order-3 lg:order-1" }),
|
|
1392
|
+
/* @__PURE__ */ jsxs11("div", { className: "contents gap-8 lg:order-2 lg:ml-auto lg:flex lg:items-center", children: [
|
|
1393
|
+
/* @__PURE__ */ jsx12(DrawerAction, { action: secondary, variant: "secondary", orderClass: "order-1" }),
|
|
1394
|
+
/* @__PURE__ */ jsx12(DrawerAction, { action: confirm, variant: "primary", orderClass: "order-2" })
|
|
1395
|
+
] })
|
|
1396
|
+
] }) : /* @__PURE__ */ jsxs11(Fragment3, { children: [
|
|
1397
|
+
/* @__PURE__ */ jsx12(DrawerAction, { action: secondary, variant: "secondary", orderClass: "order-1 lg:order-2" }),
|
|
1398
|
+
/* @__PURE__ */ jsx12(DrawerAction, { action: confirm, variant: "primary", orderClass: "order-2 lg:order-3" }),
|
|
1399
|
+
/* @__PURE__ */ jsx12(DrawerAction, { action: dismiss, variant: "tertiary", orderClass: "order-3 lg:order-1" })
|
|
1400
|
+
] })
|
|
1401
|
+
}
|
|
1402
|
+
)
|
|
1329
1403
|
]
|
|
1330
1404
|
})
|
|
1331
1405
|
)
|
package/dist/theme.css
CHANGED
|
@@ -496,6 +496,7 @@
|
|
|
496
496
|
--color-dialog-icon-warning: var(--color-amber-500);
|
|
497
497
|
--color-drawer-background-primary: var(--color-white-100);
|
|
498
498
|
--color-drawer-background-backdrop: var(--color-black-20);
|
|
499
|
+
--color-drawer-background-secondary: var(--color-gray-50);
|
|
499
500
|
--color-drawer-text-secondary: var(--color-gray-600);
|
|
500
501
|
--color-drawer-text-primary: var(--color-gray-900);
|
|
501
502
|
--color-loading-primary: var(--color-blue-600);
|