allaw-ui 4.1.3 → 4.1.4

package/dist/components/molecules/proSwitch/proSwitchModal.module.css

@@ -0,0 +1,370 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(23, 30, 37, 0.45);
+  z-index: 3000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal {
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 8px 32px rgba(23, 30, 37, 0.18);
+  width: 96vw;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 20px 24px 12px 24px;
+  border-bottom: 1px solid #e6edf5;
+  background: #fff;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+.searchContainer {
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-width: 0;
+}
+
+.buttonContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-width: 85px;
+  gap: 0;
+}
+
+.reorderContainer,
+.closeContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.reorderBtn,
+.closeBtn {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2rem;
+  color: #728ea7;
+  background: transparent;
+  border: none;
+  padding: 0;
+  border-radius: 50%;
+  z-index: 2;
+  pointer-events: auto;
+  transition: background 0.15s;
+}
+
+.reorderBtn {
+  margin-right: 8px;
+}
+
+.reorderBtn[aria-pressed="true"] {
+  color: #000;
+  /* background-color: #d1dce8; */
+  border: 1px solid #25beeb;
+}
+
+.reorderBtn:hover,
+.closeBtn:hover {
+  background: #e6edf5;
+  color: #171e25;
+}
+
+.reorderBtn:hover {
+  /* border: 1px solid #25beeb; */
+  cursor: pointer;
+}
+
+.reorderBtn i,
+.closeBtn i {
+  display: block;
+  width: 1em;
+  height: 1em;
+  font-size: inherit;
+  color: inherit;
+}
+
+.closeBtn i {
+  font-size: 0.9rem;
+}
+
+.body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+  background: #f8fafc;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 8px 16px;
+  align-items: flex-start;
+  justify-items: center;
+  width: 100%;
+}
+
+.gridItem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 4px;
+  width: 120px;
+  height: 132px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  cursor: pointer;
+  position: relative;
+  background-color: transparent;
+  padding: 8px;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+}
+
+.gridItem:hover:not(.dragging) {
+  background-color: var(--color-grey-50, #f8fafc);
+}
+
+/* Hover spécifique en mode reorder */
+.reorderMode .gridItem:hover:not(.dragging) {
+  background: #fff;
+  border: 1px solid #25beeb;
+}
+
+.gridItem.dragging {
+  opacity: 0.5;
+  z-index: 1000;
+  cursor: grabbing;
+}
+
+/* Animation wiggle désactivée temporairement */
+.gridItem.wiggle {
+  /* animation: wiggle 0.6s ease-in-out infinite alternate; */
+}
+
+.gridItemContainer {
+  position: relative;
+  width: 120px;
+  height: 132px;
+}
+
+.dropSlot {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 120px;
+  height: 132px;
+  border: 2px dashed #25beeb;
+  border-radius: 12px;
+  background: rgba(37, 190, 235, 0.05);
+  box-sizing: border-box;
+  pointer-events: none;
+  z-index: 10;
+}
+
+/* Keyframes wiggle désactivées temporairement */
+@keyframes wiggle {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(1.02);
+  }
+}
+
+.avatarWrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.name {
+  margin-top: 10px;
+  font-size: 15px;
+  font-family: var(--font-open-sans, "Open Sans");
+  color: #171e25;
+  text-align: center;
+  width: 100%;
+  padding: 0 8px;
+  box-sizing: border-box;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  white-space: normal;
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+  padding: 16px 24px;
+  border-top: 1px solid #e6edf5;
+  background: #fff;
+  position: sticky;
+  bottom: 0;
+  z-index: 2;
+}
+
+.cancelBtn,
+.validateBtn {
+  padding: 8px 24px;
+  border-radius: 8px;
+  font-size: 15px;
+  font-family: var(--font-open-sans, "Open Sans");
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.cancelBtn {
+  background: #f6fcfe;
+  color: #728ea7;
+}
+
+.cancelBtn:hover {
+  background: #e6edf5;
+}
+
+.validateBtn {
+  background: var(--bleu-allaw, #25beeb);
+  color: #fff;
+}
+
+.validateBtn:hover {
+  background: #1ca6d6;
+}
+
+/* Scrollbar custom */
+.body::-webkit-scrollbar {
+  width: 8px;
+}
+.body::-webkit-scrollbar-thumb {
+  background: #e6edf5;
+  border-radius: 4px;
+}
+.body::-webkit-scrollbar-track {
+  background: #f8fafc;
+}
+
+/* Responsive */
+@media (max-width: 600px) {
+  .modal {
+    max-width: 98vw;
+    padding: 0;
+  }
+  .header,
+  .footer {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+  .body {
+    padding: 12px;
+  }
+  .grid {
+    gap: 16px 8px;
+  }
+}
+
+.selectionInfo {
+  text-align: left;
+  color: #728ea7;
+  font-size: 15px;
+  padding: 28px 0 29px 16px;
+  font-family: var(--font-open-sans, "Open Sans");
+  font-weight: 500;
+  position: sticky;
+  bottom: 0;
+  background: #f8fafc;
+  z-index: 1;
+}
+
+.reorderInfo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 12px;
+  background: #fff;
+  border: 1px solid #25beeb;
+  border-radius: 8px;
+  gap: 8px;
+  font-size: 14px;
+  color: #171e25;
+  margin: 20px auto;
+  width: fit-content;
+}
+
+@media (max-width: 834px) {
+  .overlay {
+    align-items: flex-end;
+    justify-content: center;
+  }
+  .modal {
+    max-width: 100vw;
+    width: 100vw;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: auto;
+    border-radius: 18px 18px 0 0;
+    padding-bottom: env(safe-area-inset-bottom, 0);
+  }
+}
+
+/* DragOverlay styles */
+.dragOverlay {
+  width: 120px;
+  height: 132px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  border-radius: 8px;
+  background-color: #fff;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  transform: rotate(3deg) scale(1.05);
+  pointer-events: none;
+  z-index: 9999;
+  padding: 8px;
+  box-sizing: border-box;
+}
+
+.headerReorderActions {
+  display: flex;
+  gap: 8px;
+  flex: 1;
+  justify-content: flex-end;
+  align-items: center;
+  margin: 4px auto;
+  padding-bottom: 1px;
+}
+
+.headerReorderLabel {
+  min-height: 0;
+  margin: 0;
+}

package/dist/styles/icons.css

@@ -384,3 +384,6 @@ li {
 .allaw-icon-x-small:before {
   content: "\e97c";
 }
+.allaw-icon-drag:before {
+  content: "\e97e";
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "4.1.3",
+  "version": "4.1.4",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -40,6 +40,9 @@
     "access": "public"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
     "allaw-ui": "^3.5.5",
     "date-fns": "^4.1.0",
     "next": "14.2.5",