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

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

@@ -2,11 +2,12 @@
 
 exports[`renders BlockedMemoriBadge for not enough credits unchanged 1`] = `
 <div>
-  <div
-    class="memori-tooltip memori-tooltip--align-right blocked-memori-badge--tooltip"
+  <span
+    class="styles-module__root___-ALla blocked-memori-badge--tooltip"
   >
-    <div
-      class="memori-tooltip--trigger"
+    <span
+      class="styles-module__trigger___V2aIF"
+      id="base-ui-:r9:"
     >
       <div
         class="blocked-memori-badge--wrapper"
@@ -15,33 +16,42 @@ exports[`renders BlockedMemoriBadge for not enough credits unchanged 1`] = `
           class="blocked-memori-badge "
         >
           <svg
-            aria-hidden="true"
-            class="blocked-memori-badge--icon"
-            color="currentColor"
-            focusable="false"
-            role="img"
-            viewBox="0 0 1024 1024"
+            class="lucide lucide-triangle-alert blocked-memori-badge--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="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"
-              fill="currentColor"
+              d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
+            />
+            <path
+              d="M12 9v4"
+            />
+            <path
+              d="M12 17h.01"
             />
           </svg>
         </div>
       </div>
-    </div>
-  </div>
+    </span>
+  </span>
 </div>
 `;
 
 exports[`renders BlockedMemoriBadge unchanged 1`] = `
 <div>
-  <div
-    class="memori-tooltip memori-tooltip--align-right blocked-memori-badge--tooltip"
+  <span
+    class="styles-module__root___-ALla blocked-memori-badge--tooltip"
   >
-    <div
-      class="memori-tooltip--trigger"
+    <span
+      class="styles-module__trigger___V2aIF"
+      id="base-ui-:r1:"
     >
       <div
         class="blocked-memori-badge--wrapper"
@@ -50,33 +60,42 @@ exports[`renders BlockedMemoriBadge unchanged 1`] = `
           class="blocked-memori-badge "
         >
           <svg
-            aria-hidden="true"
-            class="blocked-memori-badge--icon"
-            color="currentColor"
-            focusable="false"
-            role="img"
-            viewBox="0 0 1024 1024"
+            class="lucide lucide-triangle-alert blocked-memori-badge--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="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"
-              fill="currentColor"
+              d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
+            />
+            <path
+              d="M12 9v4"
+            />
+            <path
+              d="M12 17h.01"
             />
           </svg>
         </div>
       </div>
-    </div>
-  </div>
+    </span>
+  </span>
 </div>
 `;
 
 exports[`renders BlockedMemoriBadge with giver info unchanged 1`] = `
 <div>
-  <div
-    class="memori-tooltip memori-tooltip--align-right blocked-memori-badge--tooltip"
+  <span
+    class="styles-module__root___-ALla blocked-memori-badge--tooltip"
   >
-    <div
-      class="memori-tooltip--trigger"
+    <span
+      class="styles-module__trigger___V2aIF"
+      id="base-ui-:r3:"
     >
       <div
         class="blocked-memori-badge--wrapper"
@@ -85,33 +104,42 @@ exports[`renders BlockedMemoriBadge with giver info unchanged 1`] = `
           class="blocked-memori-badge "
         >
           <svg
-            aria-hidden="true"
-            class="blocked-memori-badge--icon"
-            color="currentColor"
-            focusable="false"
-            role="img"
-            viewBox="0 0 1024 1024"
+            class="lucide lucide-triangle-alert blocked-memori-badge--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="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"
-              fill="currentColor"
+              d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
+            />
+            <path
+              d="M12 9v4"
+            />
+            <path
+              d="M12 17h.01"
             />
           </svg>
         </div>
       </div>
-    </div>
-  </div>
+    </span>
+  </span>
 </div>
 `;
 
 exports[`renders BlockedMemoriBadge with margin left unchanged 1`] = `
 <div>
-  <div
-    class="memori-tooltip memori-tooltip--align-right blocked-memori-badge--tooltip"
+  <span
+    class="styles-module__root___-ALla blocked-memori-badge--tooltip"
   >
-    <div
-      class="memori-tooltip--trigger"
+    <span
+      class="styles-module__trigger___V2aIF"
+      id="base-ui-:r7:"
     >
       <div
         class="blocked-memori-badge--wrapper"
@@ -120,33 +148,42 @@ exports[`renders BlockedMemoriBadge with margin left unchanged 1`] = `
           class="blocked-memori-badge  margin-left"
         >
           <svg
-            aria-hidden="true"
-            class="blocked-memori-badge--icon"
-            color="currentColor"
-            focusable="false"
-            role="img"
-            viewBox="0 0 1024 1024"
+            class="lucide lucide-triangle-alert blocked-memori-badge--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="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"
-              fill="currentColor"
+              d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
+            />
+            <path
+              d="M12 9v4"
+            />
+            <path
+              d="M12 17h.01"
             />
           </svg>
         </div>
       </div>
-    </div>
-  </div>
+    </span>
+  </span>
 </div>
 `;
 
 exports[`renders BlockedMemoriBadge with title unchanged 1`] = `
 <div>
-  <div
-    class="memori-tooltip memori-tooltip--align-right blocked-memori-badge--tooltip"
+  <span
+    class="styles-module__root___-ALla blocked-memori-badge--tooltip"
   >
-    <div
-      class="memori-tooltip--trigger"
+    <span
+      class="styles-module__trigger___V2aIF"
+      id="base-ui-:r5:"
     >
       <div
         class="blocked-memori-badge--wrapper"
@@ -155,17 +192,25 @@ exports[`renders BlockedMemoriBadge with title unchanged 1`] = `
           class="blocked-memori-badge "
         >
           <svg
-            aria-hidden="true"
-            class="blocked-memori-badge--icon"
-            color="currentColor"
-            focusable="false"
-            role="img"
-            viewBox="0 0 1024 1024"
+            class="lucide lucide-triangle-alert blocked-memori-badge--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="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"
-              fill="currentColor"
+              d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
+            />
+            <path
+              d="M12 9v4"
+            />
+            <path
+              d="M12 17h.01"
             />
           </svg>
         </div>
@@ -175,7 +220,7 @@ exports[`renders BlockedMemoriBadge with title unchanged 1`] = `
           memoriBlockedTitle
         </span>
       </div>
-    </div>
-  </div>
+    </span>
+  </span>
 </div>
 `;

package/src/components/ChangeMode/ChangeMode.css

@@ -1,6 +1,8 @@
 .memori--changeMode-instruct {
+    display: flex;
     padding: 1rem;
-    border-radius: 5px;
+    border-radius: var(--memori-radius-box);
+    gap: var(--memori-spacing-sm);
 }
 
 .memori--changeMode-instruct-radio {
@@ -18,5 +20,5 @@
 }
 
 .memori--changeMode-instruct-radio-button[data-headlessui-state='checked'] button {
-    font-weight: 600;
+    font-weight: var(--memori-text-weight-semibold);
 }

package/src/components/ChangeMode/ChangeMode.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { RadioGroup } from '@headlessui/react';
 import { useTranslation } from 'react-i18next';
-import Button from '../ui/Button';
+import { Button } from '@memori.ai/ui';
+import cx from 'classnames';
 
 export interface Props {
   instruct?: boolean;
@@ -15,35 +15,36 @@ const ChangeMode: React.FC<Props> = ({
   onChangeMode,
 }) => {
   const { t } = useTranslation();
+  const value = instruct ? 'instruct' : 'test';
 
   return canInstruct ? (
-    <div className="memori--changeMode-instruct">
-      <RadioGroup
-        name="instruct"
-        value={instruct ? 'instruct' : 'test'}
-        defaultValue={instruct ? 'instruct' : 'test'}
-        className="memori--changeMode-instruct-radio"
-        onChange={onChangeMode}
+    <div
+      className="memori--changeMode-instruct"
+      role="radiogroup"
+      aria-label={t('widget.instruct') || 'Mode'}
+    >
+      <Button
+        role="radio"
+        aria-checked={value === 'instruct'}
+        variant={value === 'instruct' ? 'primary' : 'outline'}
+        className={cx('memori--changeMode-instruct-radio-button', {
+          'memori--changeMode-instruct-radio-button--selected': value === 'instruct',
+        })}
+        onClick={() => onChangeMode('instruct')}
       >
-        <RadioGroup.Option
-          value="instruct"
-          className="memori--changeMode-instruct-radio-button"
-        >
-          {({ checked }) => (
-            <Button primary={checked}>
-              {t('widget.instruct') || 'Instruct'}
-            </Button>
-          )}
-        </RadioGroup.Option>
-        <RadioGroup.Option
-          value="test"
-          className="memori--changeMode-instruct-radio-button"
-        >
-          {({ checked }) => (
-            <Button primary={checked}>{t('widget.test') || 'Test'}</Button>
-          )}
-        </RadioGroup.Option>
-      </RadioGroup>
+        {t('widget.instruct') || 'Instruct'}
+      </Button>
+      <Button
+        role="radio"
+        aria-checked={value === 'test'}
+        variant={value === 'test' ? 'primary' : 'outline'}
+        className={cx('memori--changeMode-instruct-radio-button', {
+          'memori--changeMode-instruct-radio-button--selected': value === 'test',
+        })}
+        onClick={() => onChangeMode('test')}
+      >
+        {t('widget.test') || 'Test'}
+      </Button>
     </div>
   ) : null;
 };

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

@@ -3,51 +3,36 @@
 exports[`renders ChangeMode in instruct mode unchanged 1`] = `
 <div>
   <div
+    aria-label="widget.instruct"
     class="memori--changeMode-instruct"
+    role="radiogroup"
   >
-    <input
-      checked=""
-      hidden=""
-      name="instruct"
-      readonly=""
-      style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-      type="radio"
-      value="instruct"
-    />
-    <div
-      class="memori--changeMode-instruct-radio"
-      id="headlessui-radiogroup-:r3:"
-      role="radiogroup"
+    <button
+      aria-checked="true"
+      class="memori-button memori-button--primary memori-button--md memori--changeMode-instruct-radio-button memori--changeMode-instruct-radio-button--selected"
+      role="radio"
+      tabindex="0"
+      type="button"
     >
-      <div
-        aria-checked="true"
-        class="memori--changeMode-instruct-radio-button"
-        data-headlessui-state="checked"
-        id="headlessui-radiogroup-option-:r4:"
-        role="radio"
-        tabindex="0"
+      <span
+        class="memori-button__content"
       >
-        <button
-          class="memori-button memori-button--primary memori-button--rounded memori-button--padded"
-        >
-          widget.instruct
-        </button>
-      </div>
-      <div
-        aria-checked="false"
-        class="memori--changeMode-instruct-radio-button"
-        data-headlessui-state=""
-        id="headlessui-radiogroup-option-:r5:"
-        role="radio"
-        tabindex="-1"
+        widget.instruct
+      </span>
+    </button>
+    <button
+      aria-checked="false"
+      class="memori-button memori-button--outline memori-button--md memori--changeMode-instruct-radio-button"
+      role="radio"
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="memori-button__content"
       >
-        <button
-          class="memori-button memori-button--rounded memori-button--padded"
-        >
-          widget.test
-        </button>
-      </div>
-    </div>
+        widget.test
+      </span>
+    </button>
   </div>
 </div>
 `;
@@ -55,51 +40,36 @@ exports[`renders ChangeMode in instruct mode unchanged 1`] = `
 exports[`renders ChangeMode in test mode unchanged 1`] = `
 <div>
   <div
+    aria-label="widget.instruct"
     class="memori--changeMode-instruct"
+    role="radiogroup"
   >
-    <input
-      checked=""
-      hidden=""
-      name="instruct"
-      readonly=""
-      style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-      type="radio"
-      value="test"
-    />
-    <div
-      class="memori--changeMode-instruct-radio"
-      id="headlessui-radiogroup-:r0:"
-      role="radiogroup"
+    <button
+      aria-checked="false"
+      class="memori-button memori-button--outline memori-button--md memori--changeMode-instruct-radio-button"
+      role="radio"
+      tabindex="0"
+      type="button"
     >
-      <div
-        aria-checked="false"
-        class="memori--changeMode-instruct-radio-button"
-        data-headlessui-state=""
-        id="headlessui-radiogroup-option-:r1:"
-        role="radio"
-        tabindex="-1"
+      <span
+        class="memori-button__content"
       >
-        <button
-          class="memori-button memori-button--rounded memori-button--padded"
-        >
-          widget.instruct
-        </button>
-      </div>
-      <div
-        aria-checked="true"
-        class="memori--changeMode-instruct-radio-button"
-        data-headlessui-state="checked"
-        id="headlessui-radiogroup-option-:r2:"
-        role="radio"
-        tabindex="0"
+        widget.instruct
+      </span>
+    </button>
+    <button
+      aria-checked="true"
+      class="memori-button memori-button--primary memori-button--md memori--changeMode-instruct-radio-button memori--changeMode-instruct-radio-button--selected"
+      role="radio"
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="memori-button__content"
       >
-        <button
-          class="memori-button memori-button--primary memori-button--rounded memori-button--padded"
-        >
-          widget.test
-        </button>
-      </div>
-    </div>
+        widget.test
+      </span>
+    </button>
   </div>
 </div>
 `;