@diwauhris/ui 1.7.39 → 1.7.41

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 (4) hide show
  1. package/lib/assets/ui.css +8 -0
  2. package/lib/index.cjs +66 -63
  3. package/lib/index.mjs +66 -63
  4. package/package.json +1 -1
package/lib/assets/ui.css CHANGED
@@ -250,6 +250,10 @@
250
250
  pointer-events: none;
251
251
  }
252
252
 
253
+ .pointer-events-auto {
254
+ pointer-events: auto;
255
+ }
256
+
253
257
  .\!visible {
254
258
  visibility: visible !important;
255
259
  }
@@ -2564,6 +2568,10 @@
2564
2568
  background-color: rgb(0 55 123 / 0.5);
2565
2569
  }
2566
2570
 
2571
+ .bg-brand-navy\/60 {
2572
+ background-color: rgb(0 55 123 / 0.6);
2573
+ }
2574
+
2567
2575
  .bg-brand-navy\/\[0\.03\] {
2568
2576
  background-color: rgb(0 55 123 / 0.03);
2569
2577
  }
package/lib/index.cjs CHANGED
@@ -2462,73 +2462,76 @@ function Modal({ isOpen, onClose, title, children, icon, subtitle, headerMeta, f
2462
2462
  onOpenChange: (isOpen) => {
2463
2463
  if (!isOpen && !preventClose) onClose();
2464
2464
  },
2465
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Overlay, { className: "fixed inset-0 z-50 bg-brand-navy/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 duration-200" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Content, {
2466
- className: cn("fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2", "flex w-full flex-col", "rounded-lg border border-slate-200 bg-white shadow-xl", "max-h-[85vh] outline-none", maxWidth, "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0", "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95", "duration-200"),
2467
- style: { padding: 0 },
2468
- onOpenAutoFocus,
2469
- onCloseAutoFocus,
2470
- onEscapeKeyDown: preventClose ? (e) => e.preventDefault() : onEscapeKeyDown,
2471
- onInteractOutside: (e) => {
2472
- if (e.target?.closest(".pis-datepicker-popover")) {
2473
- e.preventDefault();
2474
- return;
2475
- }
2476
- if (preventClose) {
2477
- e.preventDefault();
2478
- return;
2479
- }
2480
- onInteractOutside?.(e);
2481
- },
2482
- children: [
2483
- !preventClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Close, {
2484
- asChild: true,
2485
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
2486
- type: "button",
2487
- "aria-label": closeLabel,
2488
- className: "absolute right-4 top-4 rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
2489
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
2490
- size: 16,
2491
- "aria-hidden": "true"
2465
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Overlay, { className: "fixed inset-0 z-50 bg-brand-navy/60" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2466
+ className: "pointer-events-none fixed inset-0 z-50 flex items-center justify-center p-4",
2467
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Content, {
2468
+ className: cn("pointer-events-auto relative", "flex w-full flex-col", "rounded-lg border border-slate-200 bg-white shadow-xl", "max-h-[85vh] outline-none", maxWidth),
2469
+ style: { padding: 0 },
2470
+ onOpenAutoFocus,
2471
+ onCloseAutoFocus,
2472
+ onEscapeKeyDown: preventClose ? (e) => e.preventDefault() : onEscapeKeyDown,
2473
+ onInteractOutside: (e) => {
2474
+ if (e.target?.closest(".pis-datepicker-popover")) {
2475
+ e.preventDefault();
2476
+ return;
2477
+ }
2478
+ if (preventClose) {
2479
+ e.preventDefault();
2480
+ return;
2481
+ }
2482
+ onInteractOutside?.(e);
2483
+ },
2484
+ children: [
2485
+ !preventClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Close, {
2486
+ asChild: true,
2487
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
2488
+ type: "button",
2489
+ "aria-label": closeLabel,
2490
+ className: "absolute right-4 top-4 rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
2491
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
2492
+ size: 16,
2493
+ "aria-hidden": "true"
2494
+ })
2492
2495
  })
2493
- })
2494
- }),
2495
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2496
- className: "px-6 pt-6 pb-4 border-b-2 border-slate-100",
2497
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2498
- className: "flex items-center gap-2.5",
2499
- children: [icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2500
- className: iconBadgeClass,
2501
- children: icon
2502
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Title, {
2503
- className: cn(typography.titleOverlay, danger ? "text-rose-700" : "text-slate-900"),
2504
- children: title
2505
- }), subtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Description, {
2506
- className: "text-xs text-slate-500 mt-0.5",
2507
- children: subtitle
2508
- })] })]
2509
- }), headerMeta && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2510
- className: "mt-2",
2511
- children: headerMeta
2512
- })]
2513
- }),
2514
- onSubmit ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
2515
- onSubmit,
2516
- className: "flex flex-col min-h-0 flex-1",
2517
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2496
+ }),
2497
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2498
+ className: "px-6 pt-6 pb-4 border-b-2 border-slate-100",
2499
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
2500
+ className: "flex items-center gap-2.5",
2501
+ children: [icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2502
+ className: iconBadgeClass,
2503
+ children: icon
2504
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Title, {
2505
+ className: cn(typography.titleOverlay, danger ? "text-rose-700" : "text-slate-900"),
2506
+ children: title
2507
+ }), subtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Description, {
2508
+ className: "text-xs text-slate-500 mt-0.5",
2509
+ children: subtitle
2510
+ })] })]
2511
+ }), headerMeta && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2512
+ className: "mt-2",
2513
+ children: headerMeta
2514
+ })]
2515
+ }),
2516
+ onSubmit ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
2517
+ onSubmit,
2518
+ className: "flex flex-col min-h-0 flex-1",
2519
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2520
+ className: "flex-1 overflow-y-auto px-6 py-5",
2521
+ children: bodyContent
2522
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2523
+ className: "px-6 py-4 border-t border-slate-100",
2524
+ children: resolvedFooter
2525
+ })]
2526
+ }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2518
2527
  className: "flex-1 overflow-y-auto px-6 py-5",
2519
2528
  children: bodyContent
2520
2529
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2521
2530
  className: "px-6 py-4 border-t border-slate-100",
2522
2531
  children: resolvedFooter
2523
- })]
2524
- }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2525
- className: "flex-1 overflow-y-auto px-6 py-5",
2526
- children: bodyContent
2527
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
2528
- className: "px-6 py-4 border-t border-slate-100",
2529
- children: resolvedFooter
2530
- })] })
2531
- ]
2532
+ })] })
2533
+ ]
2534
+ })
2532
2535
  })] })
2533
2536
  });
2534
2537
  }
@@ -2589,8 +2592,8 @@ function Dialog({ open, onClose, title, description, preventClose = false, size
2589
2592
  onOpenChange: (isOpen) => {
2590
2593
  if (!isOpen && !preventClose) onClose();
2591
2594
  },
2592
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Overlay, { className: "fixed inset-0 z-50 bg-brand-navy/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 duration-200" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Content, {
2593
- className: cn("fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2", "flex w-full flex-col overflow-hidden", "rounded-lg bg-white shadow-xl", "max-h-[90vh] outline-none", SIZE_CLASS[size], "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0", "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95", "duration-200"),
2595
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Overlay, { className: "fixed inset-0 z-50 bg-brand-navy/60" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Content, {
2596
+ className: cn("fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2", "flex w-full flex-col overflow-hidden", "rounded-lg bg-white shadow-xl", "max-h-[90vh] outline-none", SIZE_CLASS[size]),
2594
2597
  onEscapeKeyDown: preventClose ? (e) => e.preventDefault() : onEscapeKeyDown,
2595
2598
  onInteractOutside: (e) => {
2596
2599
  if (e.target?.closest(".pis-datepicker-popover")) {
package/lib/index.mjs CHANGED
@@ -2438,73 +2438,76 @@ function Modal({ isOpen, onClose, title, children, icon, subtitle, headerMeta, f
2438
2438
  onOpenChange: (isOpen) => {
2439
2439
  if (!isOpen && !preventClose) onClose();
2440
2440
  },
2441
- children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [/* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: "fixed inset-0 z-50 bg-brand-navy/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 duration-200" }), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
2442
- className: cn("fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2", "flex w-full flex-col", "rounded-lg border border-slate-200 bg-white shadow-xl", "max-h-[85vh] outline-none", maxWidth, "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0", "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95", "duration-200"),
2443
- style: { padding: 0 },
2444
- onOpenAutoFocus,
2445
- onCloseAutoFocus,
2446
- onEscapeKeyDown: preventClose ? (e) => e.preventDefault() : onEscapeKeyDown,
2447
- onInteractOutside: (e) => {
2448
- if (e.target?.closest(".pis-datepicker-popover")) {
2449
- e.preventDefault();
2450
- return;
2451
- }
2452
- if (preventClose) {
2453
- e.preventDefault();
2454
- return;
2455
- }
2456
- onInteractOutside?.(e);
2457
- },
2458
- children: [
2459
- !preventClose && /* @__PURE__ */ jsx(DialogPrimitive.Close, {
2460
- asChild: true,
2461
- children: /* @__PURE__ */ jsx("button", {
2462
- type: "button",
2463
- "aria-label": closeLabel,
2464
- className: "absolute right-4 top-4 rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
2465
- children: /* @__PURE__ */ jsx(X, {
2466
- size: 16,
2467
- "aria-hidden": "true"
2441
+ children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [/* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: "fixed inset-0 z-50 bg-brand-navy/60" }), /* @__PURE__ */ jsx("div", {
2442
+ className: "pointer-events-none fixed inset-0 z-50 flex items-center justify-center p-4",
2443
+ children: /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
2444
+ className: cn("pointer-events-auto relative", "flex w-full flex-col", "rounded-lg border border-slate-200 bg-white shadow-xl", "max-h-[85vh] outline-none", maxWidth),
2445
+ style: { padding: 0 },
2446
+ onOpenAutoFocus,
2447
+ onCloseAutoFocus,
2448
+ onEscapeKeyDown: preventClose ? (e) => e.preventDefault() : onEscapeKeyDown,
2449
+ onInteractOutside: (e) => {
2450
+ if (e.target?.closest(".pis-datepicker-popover")) {
2451
+ e.preventDefault();
2452
+ return;
2453
+ }
2454
+ if (preventClose) {
2455
+ e.preventDefault();
2456
+ return;
2457
+ }
2458
+ onInteractOutside?.(e);
2459
+ },
2460
+ children: [
2461
+ !preventClose && /* @__PURE__ */ jsx(DialogPrimitive.Close, {
2462
+ asChild: true,
2463
+ children: /* @__PURE__ */ jsx("button", {
2464
+ type: "button",
2465
+ "aria-label": closeLabel,
2466
+ className: "absolute right-4 top-4 rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
2467
+ children: /* @__PURE__ */ jsx(X, {
2468
+ size: 16,
2469
+ "aria-hidden": "true"
2470
+ })
2468
2471
  })
2469
- })
2470
- }),
2471
- /* @__PURE__ */ jsxs("div", {
2472
- className: "px-6 pt-6 pb-4 border-b-2 border-slate-100",
2473
- children: [/* @__PURE__ */ jsxs("div", {
2474
- className: "flex items-center gap-2.5",
2475
- children: [icon && /* @__PURE__ */ jsx("div", {
2476
- className: iconBadgeClass,
2477
- children: icon
2478
- }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(DialogPrimitive.Title, {
2479
- className: cn(typography.titleOverlay, danger ? "text-rose-700" : "text-slate-900"),
2480
- children: title
2481
- }), subtitle && /* @__PURE__ */ jsx(DialogPrimitive.Description, {
2482
- className: "text-xs text-slate-500 mt-0.5",
2483
- children: subtitle
2484
- })] })]
2485
- }), headerMeta && /* @__PURE__ */ jsx("div", {
2486
- className: "mt-2",
2487
- children: headerMeta
2488
- })]
2489
- }),
2490
- onSubmit ? /* @__PURE__ */ jsxs("form", {
2491
- onSubmit,
2492
- className: "flex flex-col min-h-0 flex-1",
2493
- children: [/* @__PURE__ */ jsx("div", {
2472
+ }),
2473
+ /* @__PURE__ */ jsxs("div", {
2474
+ className: "px-6 pt-6 pb-4 border-b-2 border-slate-100",
2475
+ children: [/* @__PURE__ */ jsxs("div", {
2476
+ className: "flex items-center gap-2.5",
2477
+ children: [icon && /* @__PURE__ */ jsx("div", {
2478
+ className: iconBadgeClass,
2479
+ children: icon
2480
+ }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(DialogPrimitive.Title, {
2481
+ className: cn(typography.titleOverlay, danger ? "text-rose-700" : "text-slate-900"),
2482
+ children: title
2483
+ }), subtitle && /* @__PURE__ */ jsx(DialogPrimitive.Description, {
2484
+ className: "text-xs text-slate-500 mt-0.5",
2485
+ children: subtitle
2486
+ })] })]
2487
+ }), headerMeta && /* @__PURE__ */ jsx("div", {
2488
+ className: "mt-2",
2489
+ children: headerMeta
2490
+ })]
2491
+ }),
2492
+ onSubmit ? /* @__PURE__ */ jsxs("form", {
2493
+ onSubmit,
2494
+ className: "flex flex-col min-h-0 flex-1",
2495
+ children: [/* @__PURE__ */ jsx("div", {
2496
+ className: "flex-1 overflow-y-auto px-6 py-5",
2497
+ children: bodyContent
2498
+ }), /* @__PURE__ */ jsx("div", {
2499
+ className: "px-6 py-4 border-t border-slate-100",
2500
+ children: resolvedFooter
2501
+ })]
2502
+ }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
2494
2503
  className: "flex-1 overflow-y-auto px-6 py-5",
2495
2504
  children: bodyContent
2496
2505
  }), /* @__PURE__ */ jsx("div", {
2497
2506
  className: "px-6 py-4 border-t border-slate-100",
2498
2507
  children: resolvedFooter
2499
- })]
2500
- }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
2501
- className: "flex-1 overflow-y-auto px-6 py-5",
2502
- children: bodyContent
2503
- }), /* @__PURE__ */ jsx("div", {
2504
- className: "px-6 py-4 border-t border-slate-100",
2505
- children: resolvedFooter
2506
- })] })
2507
- ]
2508
+ })] })
2509
+ ]
2510
+ })
2508
2511
  })] })
2509
2512
  });
2510
2513
  }
@@ -2565,8 +2568,8 @@ function Dialog({ open, onClose, title, description, preventClose = false, size
2565
2568
  onOpenChange: (isOpen) => {
2566
2569
  if (!isOpen && !preventClose) onClose();
2567
2570
  },
2568
- children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [/* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: "fixed inset-0 z-50 bg-brand-navy/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 duration-200" }), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
2569
- className: cn("fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2", "flex w-full flex-col overflow-hidden", "rounded-lg bg-white shadow-xl", "max-h-[90vh] outline-none", SIZE_CLASS[size], "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0", "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95", "duration-200"),
2571
+ children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [/* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: "fixed inset-0 z-50 bg-brand-navy/60" }), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
2572
+ className: cn("fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2", "flex w-full flex-col overflow-hidden", "rounded-lg bg-white shadow-xl", "max-h-[90vh] outline-none", SIZE_CLASS[size]),
2570
2573
  onEscapeKeyDown: preventClose ? (e) => e.preventDefault() : onEscapeKeyDown,
2571
2574
  onInteractOutside: (e) => {
2572
2575
  if (e.target?.closest(".pis-datepicker-popover")) {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@diwauhris/ui",
3
3
  "private": false,
4
- "version": "1.7.39",
4
+ "version": "1.7.41",
5
5
  "type": "module",
6
6
  "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
7
7
  "keywords": [