@rufous/ui 0.2.64 → 0.2.65

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.
Files changed (6) hide show
  1. package/dist/main.cjs +40 -27
  2. package/dist/main.css +1 -1
  3. package/dist/main.d.cts +6 -0
  4. package/dist/main.d.ts +6 -0
  5. package/dist/main.js +40 -27
  6. package/package.json +1 -1
package/dist/main.cjs CHANGED
@@ -1553,6 +1553,7 @@ var BaseDialog = ({
1553
1553
  dialogBodyStyle = {},
1554
1554
  size,
1555
1555
  sx,
1556
+ form,
1556
1557
  TransitionComponent,
1557
1558
  TransitionProps = {}
1558
1559
  }) => {
@@ -1566,15 +1567,27 @@ var BaseDialog = ({
1566
1567
  {
1567
1568
  className: "btn-cancel",
1568
1569
  onClick: onCancel || onClose,
1569
- disabled: isLoading || isButtonLoading
1570
+ disabled: isLoading || isButtonLoading,
1571
+ type: "button"
1570
1572
  },
1571
1573
  cancelText
1572
- ), onConfirm && /* @__PURE__ */ React65.createElement(
1574
+ ), form ? /* @__PURE__ */ React65.createElement(
1573
1575
  "button",
1574
1576
  {
1575
1577
  className: "btn-confirm",
1576
1578
  disabled: disableConfirmBtn || isButtonLoading,
1577
1579
  style: { position: "relative" },
1580
+ type: "submit"
1581
+ },
1582
+ /* @__PURE__ */ React65.createElement("span", { style: { visibility: isButtonLoading ? "hidden" : "visible" } }, submitText),
1583
+ isButtonLoading && /* @__PURE__ */ React65.createElement("span", { className: "spinner", style: { position: "absolute" } })
1584
+ ) : onConfirm && /* @__PURE__ */ React65.createElement(
1585
+ "button",
1586
+ {
1587
+ className: "btn-confirm",
1588
+ disabled: disableConfirmBtn || isButtonLoading,
1589
+ style: { position: "relative" },
1590
+ type: "button",
1578
1591
  onClick: async () => {
1579
1592
  setIsSubmitting(true);
1580
1593
  await onConfirm?.();
@@ -1584,37 +1597,37 @@ var BaseDialog = ({
1584
1597
  /* @__PURE__ */ React65.createElement("span", { style: { visibility: isButtonLoading ? "hidden" : "visible" } }, confirmText),
1585
1598
  isButtonLoading && /* @__PURE__ */ React65.createElement("span", { className: "spinner", style: { position: "absolute" } })
1586
1599
  ));
1587
- const dialogContent = /* @__PURE__ */ React65.createElement(
1600
+ const containerClass = ["dialog-container", size ? `size-${size}` : "", sxClass, className].filter(Boolean).join(" ");
1601
+ const containerStyle = { minWidth, minHeight };
1602
+ const dialogInner = /* @__PURE__ */ React65.createElement(React65.Fragment, null, /* @__PURE__ */ React65.createElement("div", { className: "dialog-title" }, /* @__PURE__ */ React65.createElement("h2", null, formatTitle ? title?.charAt(0).toUpperCase() + title?.slice(1) : title), showCloseButton && /* @__PURE__ */ React65.createElement("button", { className: "btn-close", type: "button", onClick: onClose }, /* @__PURE__ */ React65.createElement(
1603
+ import_lucide_react.X,
1604
+ {
1605
+ size: 18,
1606
+ color: themeConfig?.icon || "#666666"
1607
+ }
1608
+ ))), /* @__PURE__ */ React65.createElement("div", { className: "dialog-divider" }), /* @__PURE__ */ React65.createElement(
1588
1609
  "div",
1589
1610
  {
1590
- className: ["dialog-container", size ? `size-${size}` : "", sxClass, className].filter(Boolean).join(" "),
1611
+ className: "dialog-body",
1591
1612
  style: {
1592
- minWidth,
1593
- minHeight
1613
+ ...fullScreen ? { height: "100%" } : { maxHeight: "758px", minHeight },
1614
+ ...dialogBodyStyle
1594
1615
  }
1595
1616
  },
1596
- /* @__PURE__ */ React65.createElement("div", { className: "dialog-title" }, /* @__PURE__ */ React65.createElement("h2", null, formatTitle ? title?.charAt(0).toUpperCase() + title?.slice(1) : title), showCloseButton && /* @__PURE__ */ React65.createElement("button", { className: "btn-close", onClick: onClose }, /* @__PURE__ */ React65.createElement(
1597
- import_lucide_react.X,
1598
- {
1599
- size: 18,
1600
- color: themeConfig?.icon || "#666666"
1617
+ children
1618
+ ), /* @__PURE__ */ React65.createElement("div", { className: "dialog-divider" }), customButtons || renderButtons());
1619
+ const dialogContent = form ? /* @__PURE__ */ React65.createElement(
1620
+ "form",
1621
+ {
1622
+ className: containerClass,
1623
+ style: containerStyle,
1624
+ onSubmit: (e) => {
1625
+ e.preventDefault();
1626
+ form.handleSubmit?.(e);
1601
1627
  }
1602
- ))),
1603
- /* @__PURE__ */ React65.createElement("div", { className: "dialog-divider" }),
1604
- /* @__PURE__ */ React65.createElement(
1605
- "div",
1606
- {
1607
- className: "dialog-body",
1608
- style: {
1609
- ...fullScreen ? { height: "100%" } : { maxHeight: "758px", minHeight },
1610
- ...dialogBodyStyle
1611
- }
1612
- },
1613
- children
1614
- ),
1615
- /* @__PURE__ */ React65.createElement("div", { className: "dialog-divider" }),
1616
- customButtons || renderButtons()
1617
- );
1628
+ },
1629
+ dialogInner
1630
+ ) : /* @__PURE__ */ React65.createElement("div", { className: containerClass, style: containerStyle }, dialogInner);
1618
1631
  if (TransitionComponent) {
1619
1632
  return /* @__PURE__ */ React65.createElement(
1620
1633
  TransitionComponent,
package/dist/main.css CHANGED
@@ -72,7 +72,7 @@
72
72
  display: flex;
73
73
  justify-content: center;
74
74
  align-items: center;
75
- z-index: 99999;
75
+ z-index: 2000;
76
76
  backdrop-filter: blur(2px);
77
77
  }
78
78
  .dialog-container {
package/dist/main.d.cts CHANGED
@@ -457,6 +457,10 @@ interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElem
457
457
  }
458
458
  declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
459
459
 
460
+ interface BaseDialogForm {
461
+ handleSubmit?: (e: React.FormEvent) => void;
462
+ [key: string]: any;
463
+ }
460
464
  interface BaseDialogProps {
461
465
  open?: boolean;
462
466
  onConfirm?: () => Promise<void> | void;
@@ -484,6 +488,8 @@ interface BaseDialogProps {
484
488
  size?: "sm" | "md" | "lg" | "xl" | "fullScreen";
485
489
  /** Scoped style overrides. Supports nested CSS selectors with & */
486
490
  sx?: SxProp;
491
+ /** Form object — when provided, wraps dialog in a <form> and shows a submit button */
492
+ form?: BaseDialogForm;
487
493
  /** A transition component (e.g. Fade, Slide, Grow, Zoom) to animate the dialog container */
488
494
  TransitionComponent?: React.ComponentType<{
489
495
  in: boolean;
package/dist/main.d.ts CHANGED
@@ -457,6 +457,10 @@ interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElem
457
457
  }
458
458
  declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
459
459
 
460
+ interface BaseDialogForm {
461
+ handleSubmit?: (e: React.FormEvent) => void;
462
+ [key: string]: any;
463
+ }
460
464
  interface BaseDialogProps {
461
465
  open?: boolean;
462
466
  onConfirm?: () => Promise<void> | void;
@@ -484,6 +488,8 @@ interface BaseDialogProps {
484
488
  size?: "sm" | "md" | "lg" | "xl" | "fullScreen";
485
489
  /** Scoped style overrides. Supports nested CSS selectors with & */
486
490
  sx?: SxProp;
491
+ /** Form object — when provided, wraps dialog in a <form> and shows a submit button */
492
+ form?: BaseDialogForm;
487
493
  /** A transition component (e.g. Fade, Slide, Grow, Zoom) to animate the dialog container */
488
494
  TransitionComponent?: React.ComponentType<{
489
495
  in: boolean;
package/dist/main.js CHANGED
@@ -1381,6 +1381,7 @@ var BaseDialog = ({
1381
1381
  dialogBodyStyle = {},
1382
1382
  size,
1383
1383
  sx,
1384
+ form,
1384
1385
  TransitionComponent,
1385
1386
  TransitionProps = {}
1386
1387
  }) => {
@@ -1394,15 +1395,27 @@ var BaseDialog = ({
1394
1395
  {
1395
1396
  className: "btn-cancel",
1396
1397
  onClick: onCancel || onClose,
1397
- disabled: isLoading || isButtonLoading
1398
+ disabled: isLoading || isButtonLoading,
1399
+ type: "button"
1398
1400
  },
1399
1401
  cancelText
1400
- ), onConfirm && /* @__PURE__ */ React65.createElement(
1402
+ ), form ? /* @__PURE__ */ React65.createElement(
1401
1403
  "button",
1402
1404
  {
1403
1405
  className: "btn-confirm",
1404
1406
  disabled: disableConfirmBtn || isButtonLoading,
1405
1407
  style: { position: "relative" },
1408
+ type: "submit"
1409
+ },
1410
+ /* @__PURE__ */ React65.createElement("span", { style: { visibility: isButtonLoading ? "hidden" : "visible" } }, submitText),
1411
+ isButtonLoading && /* @__PURE__ */ React65.createElement("span", { className: "spinner", style: { position: "absolute" } })
1412
+ ) : onConfirm && /* @__PURE__ */ React65.createElement(
1413
+ "button",
1414
+ {
1415
+ className: "btn-confirm",
1416
+ disabled: disableConfirmBtn || isButtonLoading,
1417
+ style: { position: "relative" },
1418
+ type: "button",
1406
1419
  onClick: async () => {
1407
1420
  setIsSubmitting(true);
1408
1421
  await onConfirm?.();
@@ -1412,37 +1425,37 @@ var BaseDialog = ({
1412
1425
  /* @__PURE__ */ React65.createElement("span", { style: { visibility: isButtonLoading ? "hidden" : "visible" } }, confirmText),
1413
1426
  isButtonLoading && /* @__PURE__ */ React65.createElement("span", { className: "spinner", style: { position: "absolute" } })
1414
1427
  ));
1415
- const dialogContent = /* @__PURE__ */ React65.createElement(
1428
+ const containerClass = ["dialog-container", size ? `size-${size}` : "", sxClass, className].filter(Boolean).join(" ");
1429
+ const containerStyle = { minWidth, minHeight };
1430
+ const dialogInner = /* @__PURE__ */ React65.createElement(React65.Fragment, null, /* @__PURE__ */ React65.createElement("div", { className: "dialog-title" }, /* @__PURE__ */ React65.createElement("h2", null, formatTitle ? title?.charAt(0).toUpperCase() + title?.slice(1) : title), showCloseButton && /* @__PURE__ */ React65.createElement("button", { className: "btn-close", type: "button", onClick: onClose }, /* @__PURE__ */ React65.createElement(
1431
+ X,
1432
+ {
1433
+ size: 18,
1434
+ color: themeConfig?.icon || "#666666"
1435
+ }
1436
+ ))), /* @__PURE__ */ React65.createElement("div", { className: "dialog-divider" }), /* @__PURE__ */ React65.createElement(
1416
1437
  "div",
1417
1438
  {
1418
- className: ["dialog-container", size ? `size-${size}` : "", sxClass, className].filter(Boolean).join(" "),
1439
+ className: "dialog-body",
1419
1440
  style: {
1420
- minWidth,
1421
- minHeight
1441
+ ...fullScreen ? { height: "100%" } : { maxHeight: "758px", minHeight },
1442
+ ...dialogBodyStyle
1422
1443
  }
1423
1444
  },
1424
- /* @__PURE__ */ React65.createElement("div", { className: "dialog-title" }, /* @__PURE__ */ React65.createElement("h2", null, formatTitle ? title?.charAt(0).toUpperCase() + title?.slice(1) : title), showCloseButton && /* @__PURE__ */ React65.createElement("button", { className: "btn-close", onClick: onClose }, /* @__PURE__ */ React65.createElement(
1425
- X,
1426
- {
1427
- size: 18,
1428
- color: themeConfig?.icon || "#666666"
1445
+ children
1446
+ ), /* @__PURE__ */ React65.createElement("div", { className: "dialog-divider" }), customButtons || renderButtons());
1447
+ const dialogContent = form ? /* @__PURE__ */ React65.createElement(
1448
+ "form",
1449
+ {
1450
+ className: containerClass,
1451
+ style: containerStyle,
1452
+ onSubmit: (e) => {
1453
+ e.preventDefault();
1454
+ form.handleSubmit?.(e);
1429
1455
  }
1430
- ))),
1431
- /* @__PURE__ */ React65.createElement("div", { className: "dialog-divider" }),
1432
- /* @__PURE__ */ React65.createElement(
1433
- "div",
1434
- {
1435
- className: "dialog-body",
1436
- style: {
1437
- ...fullScreen ? { height: "100%" } : { maxHeight: "758px", minHeight },
1438
- ...dialogBodyStyle
1439
- }
1440
- },
1441
- children
1442
- ),
1443
- /* @__PURE__ */ React65.createElement("div", { className: "dialog-divider" }),
1444
- customButtons || renderButtons()
1445
- );
1456
+ },
1457
+ dialogInner
1458
+ ) : /* @__PURE__ */ React65.createElement("div", { className: containerClass, style: containerStyle }, dialogInner);
1446
1459
  if (TransitionComponent) {
1447
1460
  return /* @__PURE__ */ React65.createElement(
1448
1461
  TransitionComponent,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@rufous/ui",
3
3
  "private": false,
4
- "version": "0.2.64",
4
+ "version": "0.2.65",
5
5
  "type": "module",
6
6
  "description": "Experimental: A lightweight React UI component library (Beta)",
7
7
  "style": "./dist/main.css",