@tomny-dev/uzi 0.2.7-pr.23.75.1.b9b3694 → 0.2.7-pr.23.76.1.ea6567c

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.
@@ -1 +1 @@
1
- {"version":3,"file":"index12.js","names":[],"sources":["../src/components/modal/modal.module.css"],"sourcesContent":[".portalLayer {\n position: fixed;\n inset: 0;\n z-index: 100;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px;\n}\n\n.backdrop {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.55);\n}\n\n.backdrop[data-state=\"open\"] {\n animation: backdropFadeIn 160ms ease;\n}\n\n.backdrop[data-state=\"closed\"] {\n animation: backdropFadeOut 140ms ease;\n}\n\n.overlayContent {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n max-width: 100%;\n max-height: 100%;\n outline: none;\n}\n\n.overlayContent[data-state=\"open\"] {\n animation: modalContentIn 180ms ease;\n}\n\n.overlayContent[data-state=\"closed\"] {\n animation: modalContentOut 140ms ease;\n}\n\n.modal {\n background: var(--background);\n border: 1px solid var(--border);\n border-radius: 14px;\n max-height: 100%;\n overflow: hidden;\n box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n\n/* Size variants */\n.size-sm { width: min(380px, 100%); }\n.size-md { width: min(500px, 100%); }\n.size-lg { width: min(640px, 100%); }\n.size-xl { width: min(900px, 100%); }\n\n.header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 12px;\n padding: 24px 24px 0;\n margin-bottom: 16px;\n}\n\n.titles {\n display: flex;\n flex-direction: column;\n gap: 3px;\n}\n\n.title {\n font-weight: 700;\n font-size: 16px;\n color: var(--foreground);\n line-height: 1.3;\n}\n\n.subtitle {\n font-size: 13px;\n color: var(--muted-foreground);\n line-height: 1.4;\n}\n\n.closeButton {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n flex-shrink: 0;\n background: transparent;\n border: 1px solid transparent;\n border-radius: 6px;\n color: var(--muted-foreground);\n cursor: pointer;\n transition: background 0.12s, color 0.12s;\n padding: 0;\n}\n\n.closeButton:hover {\n background: color-mix(in srgb, var(--foreground) 7%, transparent);\n color: var(--foreground);\n}\n\n.closeButton:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--focus-ring-offset);\n}\n\n.body {\n display: flex;\n flex-direction: column;\n gap: 12px;\n min-height: 0;\n overflow-y: auto;\n padding: 0 24px;\n}\n\n.footer {\n display: flex;\n gap: 8px;\n padding: 0 24px 24px;\n margin-top: 20px;\n}\n\n@keyframes backdropFadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes backdropFadeOut {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n@keyframes modalContentIn {\n from {\n opacity: 0;\n transform: translateY(6px) scale(0.98);\n }\n\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n\n@keyframes modalContentOut {\n from {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n\n to {\n opacity: 0;\n transform: translateY(4px) scale(0.98);\n }\n}\n"],"mappings":""}
1
+ {"version":3,"file":"index12.js","names":[],"sources":["../src/components/modal/modal.module.css"],"sourcesContent":[".portalLayer {\n --uzi-modal-viewport-margin: 32px;\n\n position: fixed;\n inset: 0;\n z-index: 100;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px;\n}\n\n.backdrop {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.55);\n}\n\n.backdrop[data-state=\"open\"] {\n animation: backdropFadeIn 160ms ease;\n}\n\n.backdrop[data-state=\"closed\"] {\n animation: backdropFadeOut 140ms ease;\n}\n\n.overlayContent {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n max-width: 100%;\n max-height: 100%;\n outline: none;\n}\n\n.overlayContent[data-state=\"open\"] {\n animation: modalContentIn 180ms ease;\n}\n\n.overlayContent[data-state=\"closed\"] {\n animation: modalContentOut 140ms ease;\n}\n\n.modal {\n background: var(--background);\n border: 1px solid var(--border);\n border-radius: 14px;\n max-height: calc(100vh - var(--uzi-modal-viewport-margin));\n max-height: calc(100dvh - var(--uzi-modal-viewport-margin));\n overflow: hidden;\n box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n\n/* Size variants */\n.size-sm { width: min(380px, calc(100vw - var(--uzi-modal-viewport-margin))); }\n.size-md { width: min(500px, calc(100vw - var(--uzi-modal-viewport-margin))); }\n.size-lg { width: min(640px, calc(100vw - var(--uzi-modal-viewport-margin))); }\n.size-xl { width: min(900px, calc(100vw - var(--uzi-modal-viewport-margin))); }\n\n.header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 12px;\n padding: 24px 24px 0;\n margin-bottom: 16px;\n}\n\n.titles {\n display: flex;\n flex-direction: column;\n gap: 3px;\n}\n\n.title {\n font-weight: 700;\n font-size: 16px;\n color: var(--foreground);\n line-height: 1.3;\n}\n\n.subtitle {\n font-size: 13px;\n color: var(--muted-foreground);\n line-height: 1.4;\n}\n\n.closeButton {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n flex-shrink: 0;\n background: transparent;\n border: 1px solid transparent;\n border-radius: 6px;\n color: var(--muted-foreground);\n cursor: pointer;\n transition: background 0.12s, color 0.12s;\n padding: 0;\n}\n\n.closeButton:hover {\n background: color-mix(in srgb, var(--foreground) 7%, transparent);\n color: var(--foreground);\n}\n\n.closeButton:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--focus-ring-offset);\n}\n\n.body {\n display: flex;\n flex-direction: column;\n gap: 12px;\n min-height: 0;\n overflow-y: auto;\n padding: 0 24px;\n}\n\n.body:last-child {\n padding-bottom: 24px;\n}\n\n.footer {\n display: flex;\n gap: 8px;\n padding: 0 24px 24px;\n margin-top: 20px;\n}\n\n@keyframes backdropFadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes backdropFadeOut {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n@keyframes modalContentIn {\n from {\n opacity: 0;\n transform: translateY(6px) scale(0.98);\n }\n\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n\n@keyframes modalContentOut {\n from {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n\n to {\n opacity: 0;\n transform: translateY(4px) scale(0.98);\n }\n}\n"],"mappings":""}
@@ -1 +1 @@
1
- {"version":3,"file":"index13.cjs","names":[],"sources":["../src/components/modal/modal.module.css"],"sourcesContent":[".portalLayer {\n position: fixed;\n inset: 0;\n z-index: 100;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px;\n}\n\n.backdrop {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.55);\n}\n\n.backdrop[data-state=\"open\"] {\n animation: backdropFadeIn 160ms ease;\n}\n\n.backdrop[data-state=\"closed\"] {\n animation: backdropFadeOut 140ms ease;\n}\n\n.overlayContent {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n max-width: 100%;\n max-height: 100%;\n outline: none;\n}\n\n.overlayContent[data-state=\"open\"] {\n animation: modalContentIn 180ms ease;\n}\n\n.overlayContent[data-state=\"closed\"] {\n animation: modalContentOut 140ms ease;\n}\n\n.modal {\n background: var(--background);\n border: 1px solid var(--border);\n border-radius: 14px;\n max-height: 100%;\n overflow: hidden;\n box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n\n/* Size variants */\n.size-sm { width: min(380px, 100%); }\n.size-md { width: min(500px, 100%); }\n.size-lg { width: min(640px, 100%); }\n.size-xl { width: min(900px, 100%); }\n\n.header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 12px;\n padding: 24px 24px 0;\n margin-bottom: 16px;\n}\n\n.titles {\n display: flex;\n flex-direction: column;\n gap: 3px;\n}\n\n.title {\n font-weight: 700;\n font-size: 16px;\n color: var(--foreground);\n line-height: 1.3;\n}\n\n.subtitle {\n font-size: 13px;\n color: var(--muted-foreground);\n line-height: 1.4;\n}\n\n.closeButton {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n flex-shrink: 0;\n background: transparent;\n border: 1px solid transparent;\n border-radius: 6px;\n color: var(--muted-foreground);\n cursor: pointer;\n transition: background 0.12s, color 0.12s;\n padding: 0;\n}\n\n.closeButton:hover {\n background: color-mix(in srgb, var(--foreground) 7%, transparent);\n color: var(--foreground);\n}\n\n.closeButton:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--focus-ring-offset);\n}\n\n.body {\n display: flex;\n flex-direction: column;\n gap: 12px;\n min-height: 0;\n overflow-y: auto;\n padding: 0 24px;\n}\n\n.footer {\n display: flex;\n gap: 8px;\n padding: 0 24px 24px;\n margin-top: 20px;\n}\n\n@keyframes backdropFadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes backdropFadeOut {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n@keyframes modalContentIn {\n from {\n opacity: 0;\n transform: translateY(6px) scale(0.98);\n }\n\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n\n@keyframes modalContentOut {\n from {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n\n to {\n opacity: 0;\n transform: translateY(4px) scale(0.98);\n }\n}\n"],"mappings":""}
1
+ {"version":3,"file":"index13.cjs","names":[],"sources":["../src/components/modal/modal.module.css"],"sourcesContent":[".portalLayer {\n --uzi-modal-viewport-margin: 32px;\n\n position: fixed;\n inset: 0;\n z-index: 100;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px;\n}\n\n.backdrop {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.55);\n}\n\n.backdrop[data-state=\"open\"] {\n animation: backdropFadeIn 160ms ease;\n}\n\n.backdrop[data-state=\"closed\"] {\n animation: backdropFadeOut 140ms ease;\n}\n\n.overlayContent {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n max-width: 100%;\n max-height: 100%;\n outline: none;\n}\n\n.overlayContent[data-state=\"open\"] {\n animation: modalContentIn 180ms ease;\n}\n\n.overlayContent[data-state=\"closed\"] {\n animation: modalContentOut 140ms ease;\n}\n\n.modal {\n background: var(--background);\n border: 1px solid var(--border);\n border-radius: 14px;\n max-height: calc(100vh - var(--uzi-modal-viewport-margin));\n max-height: calc(100dvh - var(--uzi-modal-viewport-margin));\n overflow: hidden;\n box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n\n/* Size variants */\n.size-sm { width: min(380px, calc(100vw - var(--uzi-modal-viewport-margin))); }\n.size-md { width: min(500px, calc(100vw - var(--uzi-modal-viewport-margin))); }\n.size-lg { width: min(640px, calc(100vw - var(--uzi-modal-viewport-margin))); }\n.size-xl { width: min(900px, calc(100vw - var(--uzi-modal-viewport-margin))); }\n\n.header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 12px;\n padding: 24px 24px 0;\n margin-bottom: 16px;\n}\n\n.titles {\n display: flex;\n flex-direction: column;\n gap: 3px;\n}\n\n.title {\n font-weight: 700;\n font-size: 16px;\n color: var(--foreground);\n line-height: 1.3;\n}\n\n.subtitle {\n font-size: 13px;\n color: var(--muted-foreground);\n line-height: 1.4;\n}\n\n.closeButton {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n flex-shrink: 0;\n background: transparent;\n border: 1px solid transparent;\n border-radius: 6px;\n color: var(--muted-foreground);\n cursor: pointer;\n transition: background 0.12s, color 0.12s;\n padding: 0;\n}\n\n.closeButton:hover {\n background: color-mix(in srgb, var(--foreground) 7%, transparent);\n color: var(--foreground);\n}\n\n.closeButton:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--focus-ring-offset);\n}\n\n.body {\n display: flex;\n flex-direction: column;\n gap: 12px;\n min-height: 0;\n overflow-y: auto;\n padding: 0 24px;\n}\n\n.body:last-child {\n padding-bottom: 24px;\n}\n\n.footer {\n display: flex;\n gap: 8px;\n padding: 0 24px 24px;\n margin-top: 20px;\n}\n\n@keyframes backdropFadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes backdropFadeOut {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n@keyframes modalContentIn {\n from {\n opacity: 0;\n transform: translateY(6px) scale(0.98);\n }\n\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n\n@keyframes modalContentOut {\n from {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n\n to {\n opacity: 0;\n transform: translateY(4px) scale(0.98);\n }\n}\n"],"mappings":""}
package/dist/style.css CHANGED
@@ -435,6 +435,8 @@ body {
435
435
  gap: 4px;
436
436
  }
437
437
  .uzi-modal-module__portalLayer__t7blc {
438
+ --uzi-modal-viewport-margin: 32px;
439
+
438
440
  position: fixed;
439
441
  inset: 0;
440
442
  z-index: 100;
@@ -464,8 +466,6 @@ body {
464
466
  display: flex;
465
467
  align-items: center;
466
468
  justify-content: center;
467
- width: 100%;
468
- height: 100%;
469
469
  max-width: 100%;
470
470
  max-height: 100%;
471
471
  outline: none;
@@ -483,7 +483,8 @@ body {
483
483
  background: var(--background);
484
484
  border: 1px solid var(--border);
485
485
  border-radius: 14px;
486
- max-height: 100%;
486
+ max-height: calc(100vh - var(--uzi-modal-viewport-margin));
487
+ max-height: calc(100dvh - var(--uzi-modal-viewport-margin));
487
488
  overflow: hidden;
488
489
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
489
490
  display: flex;
@@ -492,10 +493,10 @@ body {
492
493
  }
493
494
 
494
495
  /* Size variants */
495
- .uzi-modal-module__size-sm__Uu9je { width: min(380px, 100%); }
496
- .uzi-modal-module__size-md__TiiWy { width: min(500px, 100%); }
497
- .uzi-modal-module__size-lg__BrTIO { width: min(640px, 100%); }
498
- .uzi-modal-module__size-xl__sj0mh { width: min(900px, 100%); }
496
+ .uzi-modal-module__size-sm__Uu9je { width: min(380px, calc(100vw - var(--uzi-modal-viewport-margin))); }
497
+ .uzi-modal-module__size-md__TiiWy { width: min(500px, calc(100vw - var(--uzi-modal-viewport-margin))); }
498
+ .uzi-modal-module__size-lg__BrTIO { width: min(640px, calc(100vw - var(--uzi-modal-viewport-margin))); }
499
+ .uzi-modal-module__size-xl__sj0mh { width: min(900px, calc(100vw - var(--uzi-modal-viewport-margin))); }
499
500
 
500
501
  .uzi-modal-module__header__PmCaO {
501
502
  display: flex;
@@ -560,6 +561,10 @@ body {
560
561
  padding: 0 24px;
561
562
  }
562
563
 
564
+ .uzi-modal-module__body__km6FQ:last-child {
565
+ padding-bottom: 24px;
566
+ }
567
+
563
568
  .uzi-modal-module__footer__jWLTv {
564
569
  display: flex;
565
570
  gap: 8px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tomny-dev/uzi",
3
- "version": "0.2.7-pr.23.75.1.b9b3694",
3
+ "version": "0.2.7-pr.23.76.1.ea6567c",
4
4
  "description": "Rapid-fire React UI components. Ship faster, build more.",
5
5
  "type": "module",
6
6
  "publishConfig": {