@memori.ai/memori-react 8.38.5 → 9.0.0-alpha.0

package/src/components/UploadButton/__snapshots__/UploadButton.test.tsx.snap

@@ -12,40 +12,48 @@ exports[`renders UploadButton unchanged 1`] = `
       style="display: none;"
       type="file"
     />
-    <button
-      class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button memori--unified-upload-button"
-      title="upload.uploadFiles"
+    <span
+      class="styles-module__root___-ALla"
     >
-      <svg
-        class="memori--upload-icon"
-        fill="none"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
+      <span
+        class="styles-module__trigger___V2aIF"
+        id="base-ui-:r1:"
       >
-        <path
-          d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="1.5"
-        />
-        <path
-          d="M17 8L12 3L7 8"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="1.5"
-        />
-        <path
-          d="M12 3V15"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="1.5"
-        />
-      </svg>
-    </button>
+        <button
+          aria-label="upload.uploadFilesOrImages"
+          class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button memori--unified-upload-button"
+          type="button"
+        >
+          <svg
+            class="lucide lucide-upload memori--upload-icon"
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+            />
+            <polyline
+              points="17 8 12 3 7 8"
+            />
+            <line
+              x1="12"
+              x2="12"
+              y1="3"
+              y2="15"
+            />
+          </svg>
+        </button>
+      </span>
+    </span>
     <div
+      aria-hidden="true"
       class="memori--hidden-uploader"
     >
       <div
@@ -58,55 +66,44 @@ exports[`renders UploadButton unchanged 1`] = `
           type="file"
         />
         <button
+          aria-label="upload.addDocument"
           class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button memori--document-upload-button"
-          title="Upload documents"
+          type="button"
         >
           <svg
-            class="memori--upload-icon"
+            aria-hidden="true"
+            class="lucide lucide-file-text memori--upload-icon"
             fill="none"
+            height="24"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
             viewBox="0 0 24 24"
+            width="24"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M14 2.5H6C5.60218 2.5 5.22064 2.65804 4.93934 2.93934C4.65804 3.22064 4.5 3.60218 4.5 4V20C4.5 20.3978 4.65804 20.7794 4.93934 21.0607C5.22064 21.342 5.60218 21.5 6 21.5H18C18.3978 21.5 18.7794 21.342 19.0607 21.0607C19.342 20.7794 19.5 20.3978 19.5 20V8L14 2.5Z"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
+              d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
             />
             <path
-              d="M14 2.5V8H19.5"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
+              d="M14 2v4a2 2 0 0 0 2 2h4"
             />
             <path
-              d="M16 13H8"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
+              d="M10 9H8"
             />
             <path
-              d="M16 17H8"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
+              d="M16 13H8"
             />
             <path
-              d="M10 9H8"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
+              d="M16 17H8"
             />
           </svg>
         </button>
       </div>
     </div>
     <div
+      aria-hidden="true"
       class="memori--hidden-uploader"
     >
       <div
@@ -120,46 +117,44 @@ exports[`renders UploadButton unchanged 1`] = `
           type="file"
         />
         <button
+          aria-label="upload.addImage"
           class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button memori--image-upload-button"
           disabled=""
+          type="button"
         >
           <svg
-            class="memori--upload-icon"
+            aria-hidden="true"
+            class="lucide lucide-image memori--upload-icon"
             fill="none"
+            height="24"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
             viewBox="0 0 24 24"
+            width="24"
             xmlns="http://www.w3.org/2000/svg"
           >
             <rect
               height="18"
               rx="2"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
+              ry="2"
               width="18"
               x="3"
               y="3"
             />
             <circle
-              cx="8.5"
-              cy="8.5"
-              fill="currentColor"
-              r="1.5"
+              cx="9"
+              cy="9"
+              r="2"
             />
             <path
-              d="M21 15L16 10L5 21"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
+              d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
             />
           </svg>
         </button>
       </div>
     </div>
-    <div
-      class="memori--error-message-container"
-    />
   </div>
 </div>
 `;

package/src/components/VenueWidget/VenueWidget.css

@@ -1,65 +1,141 @@
 .memori--venue-widget {
+    display: flex;
+    max-width: 100%;
+    flex-direction: column;
     padding: 0;
     border: 0;
     margin: 0;
+    gap: 0;
 }
 
-.memori--venue-widget__uncertainty {
-    margin-inline: 0.5em;
+/* Form sections: consistent vertical rhythm */
+.memori--venue-widget__form-item {
+    margin-bottom: var(--memori-spacing-xl);
 }
 
-.memori--venue-widget__map {
+.memori--venue-widget__form-item:last-child {
+    margin-bottom: 0;
+}
+
+/* Controls block: search + actions + uncertainty */
+.memori--venue-widget__controls {
+    display: flex;
+    flex-direction: column;
+    gap: var(--memori-spacing-lg);
+}
+
+.memori--venue-widget__geosuggest {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--memori-spacing-md);
+}
+
+.memori--venue-widget__search-wrap {
+    min-width: 0;
+    flex: 1 1 auto;
+}
+
+.memori--venue-widget__gps-button {
+    flex-shrink: 0;
+    padding: var(--memori-spacing-sm) var(--memori-spacing-lg);
+}
+
+.memori--venue-widget__updating-message {
+    padding: var(--memori-spacing-sm) 0;
+    margin: 0;
+}
+
+.memori--venue-widget__actions {
+    margin-top: 0;
+}
+
+.memori--venue-widget__no-location-button {
     width: 100%;
-    height: 250px;
+    max-width: 20rem;
 }
 
-.memori--venue-widget__form-item {
-    margin-bottom: 1rem;
+.memori--venue-widget__uncertainty-wrap {
+    margin-top: 0;
 }
 
 .memori--venue-widget__select-label {
     display: inline-flex;
     align-items: center;
+    gap: var(--memori-spacing-xs);
 }
 
-.memori--venue-widget__geosuggest {
-    position: relative;
-    display: flex;
-    align-items: center;
-    margin-bottom: 1rem;
+.memori--venue-widget__uncertainty {
+    margin-inline: 0;
 }
 
 @media (max-width: 640px) {
     .memori--venue-widget__geosuggest {
         flex-direction: column;
-        align-items: flex-start;
+        align-items: stretch;
+        gap: var(--memori-spacing-sm);
+    }
+
+    .memori--venue-widget__gps-button {
+        width: 100%;
+    }
+
+    .memori--venue-widget__no-location-button {
+        max-width: none;
     }
 }
 
+/* Map section */
+.memori--venue-widget__map-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--memori-spacing-md);
+}
+
+.memori--venue-widget__place-name {
+    padding: var(--memori-spacing-sm) 0;
+    margin: 0;
+    font-size: var(--memori-text-size-base);
+    line-height: var(--memori-text-line-normal);
+}
+
+.memori--venue-widget__map-container {
+    overflow: hidden;
+    width: 100%;
+    min-height: 200px;
+    border-radius: var(--memori-radius-box);
+}
+
+.memori--venue-widget__map {
+    width: 100%;
+    height: 280px;
+}
+
 .memori--venue-widget-search {
     z-index: 1001;
 }
 
 .memori--venue-widget-search--label {
     display: inline-block;
-    margin-bottom: 0.25rem;
+    margin-bottom: var(--memori-spacing-sm);
 }
 
 .memori--venue-widget-search input,
 .memori--venue-widget-search .memori--venue-widget-search--input {
     flex: 1 1 auto;
-    padding: 10px;
-    border: 1px solid var(--memori-button-border-color, #ccc);
-    border-radius: 5px;
+    padding: calc(var(--memori-spacing-sm) + 2px);
+    border: var(--memori-border) solid var(--memori-border-color);
+    border-radius: var(--memori-radius-box);
     margin: 0;
-    font-size: 16px;
-    line-height: 1.5;
+    font-size: var(--memori-text-size-base);
+    line-height: var(--memori-text-line-normal);
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 
 .memori--venue-widget-search .memori--venue-widget-search--input.memori--venue-widget-search--input-disabled {
     background-color: #f7fafc;
-    color: #a0aec0;
+    color: var(--memori-text-color);
     cursor: not-allowed;
 }
 
@@ -83,12 +159,12 @@ ul.memori--venue-widget-search--options {
     width: 100%;
     max-width: min(18rem, 30%);
     max-height: 15rem;
-    padding-top: 0.25rem;
+    padding-top: var(--memori-spacing-sm);
     padding-right: 0;
     padding-bottom: 0.25rem;
     padding-left: 0;
-    border-radius: 0.375rem;
-    margin-top: 0.25rem;
+    border-radius: var(--memori-radius-box);
+    margin-top: var(--memori-spacing-sm);
     margin-right: 0;
     margin-bottom: 0;
     margin-left: 0;
@@ -100,8 +176,8 @@ ul.memori--venue-widget-search--options {
 
 @media (min-width: 640px) {
     .memori--venue-widget-search--options {
-        font-size: 0.875rem;
-        line-height: 1.25rem;
+        font-size: var(--memori-text-size-small);
+        line-height: var(--memori-text-line-tight);
     }
 }
 
@@ -111,7 +187,7 @@ ul.memori--venue-widget-search--options {
     padding-right: 1rem;
     padding-bottom: 0.5rem;
     padding-left: 1rem;
-    color: rgb(17 24 39/1);
+    color: var(--memori-text-color);
     touch-action: none;
     user-select: none;
 }
@@ -144,20 +220,4 @@ li.memori--venue-widget-search--option--active {
     align-items: center;
     justify-content: center;
     text-align: center;
-}
-
-.memori--venue--widget__place-name {
-    margin: 0 0 1rem;
-}
-
-.memori--venue-widget__gps-button {
-    padding: 0.5rem 1rem;
-    margin-left: 1rem;
-}
-
-@media (max-width: 640px) {
-    .memori--venue-widget__gps-button {
-        margin-top: 0.5rem;
-        margin-left: 0;
-    }
 }

package/src/components/VenueWidget/VenueWidget.stories.tsx

@@ -4,6 +4,7 @@ import I18nWrapper from '../../I18nWrapper';
 import VenueWidget, { Props } from './VenueWidget';
 import { venue } from '../../mocks/data';
 import './VenueWidget.css';
+import { AlertProvider } from '@memori.ai/ui';
 
 const meta: Meta = {
   title: 'Widget/VenueWidget',
@@ -19,7 +20,9 @@ const Template: Story<Props> = args => {
   const [venue, setVenue] = React.useState(args.venue);
   return (
     <I18nWrapper>
-      <VenueWidget {...args} venue={venue} setVenue={setVenue} />
+      <AlertProvider defaultDuration={5000}>
+        <VenueWidget {...args} venue={venue} setVenue={setVenue} />
+      </AlertProvider>
     </I18nWrapper>
   );
 };

package/src/components/VenueWidget/VenueWidget.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render } from '../../testUtils';
 import VenueWidget from './VenueWidget';
 import { venue } from '../../mocks/data';