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

package/src/components/DateSelector/DateSelector.css

@@ -31,44 +31,43 @@
 .memori--date-selector__mobile-label {
     display: block;
     width: 100%;
-    margin-bottom: 0.5rem;
-    color: #374151;
+    margin-bottom: var(--memori-spacing-sm);
+    color: var(--memori-text-color);
     font-size: 0.95rem;
-    font-weight: 500;
+    font-weight: var(--memori-text-weight-medium);
     text-align: left;
 }
 
 .memori--date-selector__mobile-input {
     width: 100%;
     max-width: 100%;
-    min-height: 48px;
+    min-height: var(--memori-spacing-3xl);
     box-sizing: border-box;
-    padding: 0.875rem 1rem;
+    padding: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs)) var(--memori-spacing-lg);
     border: 1px solid #e5e7eb;
-    border-radius: 0.5rem;
+    border-radius: var(--memori-radius-box);
     -webkit-appearance: none;
     appearance: none;
-    background: #ffffff;
     /* Touch-friendly */
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-    color: #1f2937;
-    font-size: 1rem;
+    color: var(--memori-text-color);
+    font-size: var(--memori-text-size-base);
     transition: all 0.2s ease;
 }
 
 .memori--date-selector__mobile-input:focus {
-    border-color: var(--memori-primary, #9333ea);
+    border-color: var(--memori-primary);
     box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
     outline: none;
 }
 
 .memori--date-selector__mobile-input:active {
-    border-color: var(--memori-primary, #9333ea);
+    border-color: var(--memori-primary);
 }
 
 .memori--date-selector__mobile-input:disabled {
     background-color: #f9fafb;
-    color: #9ca3af;
+    color: var(--memori-text-color);
     cursor: not-allowed;
     opacity: 0.6;
 }
@@ -78,12 +77,12 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    gap: 1rem;
+    gap: var(--memori-spacing-md);
 }
 
 .memori--date-selector__input-group {
     display: flex;
-    min-width: 80px;
+    min-width: var(--memori-spacing-5xl);
     /* flex: 1; */
     flex-direction: column;
 }
@@ -95,9 +94,9 @@
 .memori--date-selector__label {
     display: inline-block;
     margin-bottom: 0.5rem;
-    color: #4b5563;
-    font-size: 0.875rem;
-    font-weight: 500;
+    color: var(--memori-text-color);
+    font-size: var(--memori-text-size-small);
+    font-weight: var(--memori-text-weight-medium);
     letter-spacing: 0.01em;
 }
 
@@ -105,12 +104,11 @@
     width: 100%;
     padding: 0.75rem 1rem;
     border: 2px solid #e5e7eb;
-    border-radius: 0.75rem;
+    border-radius: var(--memori-radius-box);
     -moz-appearance: textfield;
     appearance: textfield;
     /* Remove spinner buttons */
-    background: #ffffff;
-    color: #1f2937;
+    color: var(--memori-text-color);
     font-size: 0.95rem;
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -123,7 +121,7 @@
 
 .memori--date-selector__input:focus {
     border-color: var(--memori-primary);
-  box-shadow: 0 0 0 4px rgba(var(--memori-primary-rgb), 0.1);
+  box-shadow: 0 0 0 4px color-mix(in oklch, var(--memori-primary), transparent 90%);
     outline: none;
     transform: translateY(-1px);
 }
@@ -131,13 +129,13 @@
 .memori--date-selector__input:disabled {
     border-color: #e5e7eb;
     background: #f9fafb;
-    color: #9ca3af;
+    color: var(--memori-text-color);
     cursor: not-allowed;
     opacity: 0.6;
 }
 
 .memori--date-selector__input::placeholder {
-    color: #9ca3af;
+    color: var(--memori-text-color);
 }
 
 /* Responsive adjustments */
@@ -153,6 +151,6 @@
 
     .memori--date-selector__mobile-input {
         min-height: 44px;
-        font-size: 16px; /* Prevents zoom on iOS */
+        font-size: var(--memori-text-size-base); /* Prevents zoom on iOS */
     }
 }

package/src/components/DateSelector/DateSelector.tsx

@@ -152,10 +152,11 @@ const DateSelector = memo(
 
       return (
         <div className="memori--date-selector memori--date-selector--mobile">
-          <label className="memori--date-selector__mobile-label">
+          <label htmlFor="birth-date-mobile" className="memori--date-selector__mobile-label">
             {t('birthDate') || 'Birth Date'}:
           </label>
           <input
+            id="birth-date-mobile"
             type="date"
             className="memori--date-selector__mobile-input"
             value={currentDate?.isValid ? currentDate.toISODate() || '' : ''}
@@ -173,12 +174,14 @@ const DateSelector = memo(
     return (
       <div className="memori--date-selector memori--date-selector--desktop">
         <div className="memori--date-selector__input-group">
-          <label className="memori--date-selector__label">
+          <label htmlFor="birth-day" className="memori--date-selector__label">
             {t('day') || 'Day'}
           </label>
           <input
+            id="birth-day"
             ref={dayRef}
             type="number"
+            inputMode="numeric"
             className="memori--date-selector__input"
             value={day}
             onChange={handleDayChange}
@@ -190,12 +193,14 @@ const DateSelector = memo(
         </div>
 
         <div className="memori--date-selector__input-group">
-          <label className="memori--date-selector__label">
+          <label htmlFor="birth-month" className="memori--date-selector__label">
             {t('month') || 'Month'}
           </label>
           <input
+            id="birth-month"
             ref={monthRef}
             type="number"
+            inputMode="numeric"
             className="memori--date-selector__input"
             value={month}
             onChange={handleMonthChange}
@@ -207,12 +212,14 @@ const DateSelector = memo(
         </div>
 
         <div className="memori--date-selector__input-group memori--date-selector__input-group--year">
-          <label className="memori--date-selector__label">
+          <label htmlFor="birth-year" className="memori--date-selector__label">
             {t('year') || 'Year'}
           </label>
           <input
+            id="birth-year"
             ref={yearRef}
             type="number"
+            inputMode="numeric"
             className="memori--date-selector__input"
             value={year}
             onChange={handleYearChange}

package/src/components/DrawerFooter/DrawerFooter.css

@@ -0,0 +1,62 @@
+.memori-drawer-footer {
+  flex-shrink: 0;
+  padding: var(--memori-spacing-md);
+  border-top: 1px solid var(--memori-border-color, #e5e7eb);
+  box-shadow: 0 -8px 24px -8px rgba(0, 0, 0, 0.06), 0 -2px 8px -2px rgba(0, 0, 0, 0.03);
+}
+
+.memori-drawer-footer__inner {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--memori-spacing-lg);
+}
+
+.memori-drawer-footer__start {
+  display: flex;
+  align-items: center;
+  gap: var(--memori-spacing-md);
+}
+
+.memori-drawer-footer__end {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-left: auto;
+  gap: var(--memori-spacing-md);
+}
+
+.memori-drawer-footer__end .memori-button {
+  min-height: 44px;
+  padding: 10px var(--memori-spacing-lg);
+  border-radius: 10px;
+  font-weight: 500;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.memori-drawer-footer__end .memori-button:hover:not([disabled]) {
+  transform: translateY(-1px);
+}
+
+.memori-drawer-footer__inner--centered {
+  justify-content: center;
+}
+
+@media (max-width: 768px) {
+  .memori-drawer-footer {
+    padding: var(--memori-spacing-md) var(--memori-spacing-lg);
+  }
+
+  .memori-drawer-footer__inner {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--memori-spacing-md);
+  }
+
+  .memori-drawer-footer__end {
+    justify-content: flex-end;
+    margin-left: 0;
+  }
+}

package/src/components/DrawerFooter/DrawerFooter.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Button } from '@memori.ai/ui';
+
+export interface DrawerFooterProps {
+  children?: React.ReactNode;
+  /** Content aligned to the start (left in LTR) */
+  start?: React.ReactNode;
+  /** Content aligned to the end (right in LTR) */
+  end?: React.ReactNode;
+  /** Content centered in the footer */
+  center?: React.ReactNode;
+  /** Optional close button label; when set, a close button is rendered in the end slot */
+  closeLabel?: string;
+  onClose?: () => void;
+  className?: string;
+}
+
+const DrawerFooter: React.FC<DrawerFooterProps> = ({
+  children,
+  start,
+  end,
+  center,
+  closeLabel,
+  onClose,
+  className = '',
+}) => {
+  const hasSlots = start != null || end != null || center != null || closeLabel != null;
+
+  return (
+    <footer className={`memori-drawer-footer ${className}`.trim()}>
+      {center != null ? (
+        <div className="memori-drawer-footer__inner memori-drawer-footer__inner--centered">
+          {center}
+        </div>
+      ) : children != null && !hasSlots ? (
+        <div className="memori-drawer-footer__inner memori-drawer-footer__inner--centered">
+          {children}
+        </div>
+      ) : (
+        <div className="memori-drawer-footer__inner">
+          {start != null && (
+            <div className="memori-drawer-footer__start">{start}</div>
+          )}
+          <div className="memori-drawer-footer__end">
+            {end}
+            {closeLabel != null && onClose != null && (
+              <Button variant="primary" onClick={onClose}>
+                {closeLabel}
+              </Button>
+            )}
+          </div>
+        </div>
+      )}
+    </footer>
+  );
+};
+
+export default DrawerFooter;

package/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Component, ErrorInfo, ReactNode } from 'react';
-import Button from '../ui/Button';
+import { Button } from '@memori.ai/ui';
 import { withTranslation, WithTranslation } from 'react-i18next';
 
 interface Props extends WithTranslation {
@@ -34,13 +34,13 @@ class ErrorBoundary extends Component<Props, State> {
         <div
           style={{
             background: 'rgba(255, 255, 255, 0.4)',
-            color: '#000',
+            color: 'var(--memori-text-color)',
             padding: '2rem',
             borderRadius: '10px',
           }}
         >
           <h2>{this.props.t('error.generic')}</h2>
-          <Button primary onClick={() => this.setState({ hasError: false })}>
+          <Button variant="primary" onClick={() => this.setState({ hasError: false })}>
             {this.props.t('error.tryAgain') || 'Try again'}
           </Button>
         </div>

package/src/components/ExpertsDrawer/ExpertsDrawer.css

@@ -1,6 +1,3 @@
-.memori--experts-drawer {
-    z-index: 1000;
-}
 
 .memori--experts-drawer .memori-drawer--panel {
     --memori-drawer--width: 100%;
@@ -11,7 +8,7 @@
 h2.memori--experts-drawer--title {
     margin: 0;
     font-size: inherit;
-    font-weight: 400;
+    font-weight: var(--memori-text-weight-normal);
     line-height: inherit;
 }
 
@@ -25,8 +22,8 @@ li.memori--experts-drawer--item {
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
+    margin-top: var(--memori-spacing-lg);
+    margin-bottom: var(--memori-spacing-lg);
 }
 
 figure.memori--experts-drawer--avatar {
@@ -54,14 +51,14 @@ figure.memori--experts-drawer--avatar img {
 
 h3.memori--experts-drawer--name {
     margin: 0;
-    font-size: 0.875rem;
-    font-weight: 400;
+    font-size: var(--memori-text-size-small);
+    font-weight: var(--memori-text-weight-normal);
     line-height: 1.25rem;
 }
 
 p.memori--experts-drawer--description {
     margin: 0;
     font-size: 0.75rem;
-    font-weight: 400;
+    font-weight: var(--memori-text-weight-normal);
     line-height: 1rem;
 }

package/src/components/ExpertsDrawer/ExpertsDrawer.tsx

@@ -2,7 +2,7 @@ import {
   ExpertReference,
   Tenant,
 } from '@memori.ai/memori-api-client/dist/types';
-import Drawer from '../ui/Drawer';
+import { Drawer } from '@memori.ai/ui';
 import { useTranslation } from 'react-i18next';
 import { getResourceUrl } from '../../helpers/media';
 

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

@@ -1,11 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ExpertsDrawer open unchanged 1`] = `
-<div>
-  <div
-    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;"
-  />
-</div>
+<div
+  aria-hidden="true"
+  data-base-ui-inert=""
+/>
 `;
 
 exports[`renders ExpertsDrawer unchanged 1`] = `<div />`;

package/src/components/ExportHistoryButton/ExportHistoryButton.css

@@ -3,12 +3,12 @@
     z-index: 10;
     right: 0.5rem;
     padding: var(--memori-button-padding);
-    border: 1px solid var(--memori-button-border-color);
-    border-radius: var(--memori-button-radius);
+    border: var(--memori-border) solid var(--memori-border-color);
+    border-radius: var(--memori-radius-box);
     margin-top: 0.5rem;
     background: #fff;
     box-shadow: var(--memori-button-box-shadow);
-    color: #000;
+    color: var(--memori-text-color);
     text-align: left;
 }
 

package/src/components/FeedbackButtons/FeedbackButtons.css

@@ -1,9 +1,13 @@
 .memori-chat--feedback button {
     padding: 0.5em;
-    color: #333;
+    color: var(--memori-text-color);
     transition: all 0.3s ease-in-out;
 }
 
+.memori-chat--feedback button.memori-header--button {
+    color: inherit;
+}
+
 .memori-chat--feedback button:hover,
 .memori-chat--feedback button:focus {
     opacity: 1;
@@ -20,6 +24,10 @@
     text-align: left;
 }
 
+.memori-chat--feedback-tooltip-trigger {
+    display: inline-flex;
+}
+
 .transition {
     transition-duration: 0.15s;
     transition-property: all;
@@ -59,17 +67,11 @@
 }
 
 .memori-chat--feedback-menu-items {
-    position: absolute;
-    top: calc(100% - 0.25rem);
-    right: -2rem;
     width: 14rem;
     border: 1px solid rgba(0, 0, 0, 0.05);
-    border-radius: 0.375rem;
-    margin-top: 0.5rem;
-    background-color: #fff;
+    border-radius: var(--memori-radius-box);
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
     outline: none;
-    transform-origin: top right;
 }
 
 .memori-chat--feedback-menu-items:focus {
@@ -77,23 +79,23 @@
 }
 
 .memori-chat--feedback-menu-items-container {
-    padding: 0.25rem;
+    padding: var(--memori-spacing-xs);
 }
 
 .memori-chat--feedback-menu-items button.memori-chat--feedback-menu-item {
     display: flex;
     width: 100%;
     align-items: center;
-    padding: 0.5rem;
+    padding: var(--memori-spacing-sm);
     border: none;
-    border-radius: 0.375rem;
+    border-radius: var(--memori-radius-box);
     margin: 0;
     background: none;
     box-shadow: none;
-    color: #333;
+    color: var(--memori-text-color);
     cursor: pointer;
     font-family: inherit;
-    font-size: 0.75em;
+    font-size: var(--memori-text-size-small);
     font-weight: inherit;
     line-height: inherit;
 }
@@ -102,6 +104,6 @@
 .memori-chat--feedback-menu-items button.memori-chat--feedback-menu-item:focus,
 .memori-chat--feedback-menu-items button.memori-chat--feedback-menu-item:active,
 .memori-chat--feedback-menu-items button.memori-chat--feedback-menu-item.memori-chat--feedback-menu-item-active {
-    background-color: var(--memori-primary, rgb(102, 103, 171));
-    color: var(--memori-primary-text, #fff);
+    background-color: var(--memori-primary);
+    color: var(--memori-primary-content);
 }

package/src/components/FeedbackButtons/FeedbackButtons.stories.tsx

@@ -5,6 +5,7 @@ import FeedbackButtons, { Props } from './FeedbackButtons';
 import { memori } from '../../mocks/data';
 
 import './FeedbackButtons.css';
+import { AlertProvider } from '@memori.ai/ui';
 
 const meta: Meta = {
   title: 'Feedback Buttons',
@@ -26,7 +27,9 @@ export default meta;
 
 const Template: Story<Props> = args => (
   <I18nWrapper>
-    <FeedbackButtons {...args} />
+    <AlertProvider defaultDuration={5000}>
+      <FeedbackButtons {...args} />
+    </AlertProvider>
   </I18nWrapper>
 );
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test

package/src/components/FeedbackButtons/FeedbackButtons.test.tsx

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