@diwauhris/ui 1.7.39 → 1.7.40

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 +21 -0
  2. package/lib/index.cjs +64 -61
  3. package/lib/index.mjs +64 -61
  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
  }
@@ -4161,6 +4169,11 @@
4161
4169
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
4162
4170
  }
4163
4171
 
4172
+ .backdrop-blur {
4173
+ --tw-backdrop-blur: blur(8px);
4174
+ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
4175
+ }
4176
+
4164
4177
  .backdrop-blur-sm {
4165
4178
  --tw-backdrop-blur: blur(4px);
4166
4179
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@@ -4236,6 +4249,14 @@
4236
4249
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
4237
4250
  }
4238
4251
 
4252
+ .will-change-\[opacity\] {
4253
+ will-change: opacity;
4254
+ }
4255
+
4256
+ .will-change-\[transform\2c opacity\] {
4257
+ will-change: transform,opacity;
4258
+ }
4259
+
4239
4260
  @keyframes enter {
4240
4261
  from {
4241
4262
  opacity: var(--tw-enter-opacity, 1);
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 will-change-[opacity] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 duration-150 ease-out" }), /* @__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, "will-change-[transform,opacity]", "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-150 ease-out"),
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
  }
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 will-change-[opacity] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 duration-150 ease-out" }), /* @__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, "will-change-[transform,opacity]", "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-150 ease-out"),
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
  }
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.40",
5
5
  "type": "module",
6
6
  "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
7
7
  "keywords": [