@getsoren/design-system 4.89.0 → 4.91.0

package/dist/src/components/DataDisplay/AiAssistant/AiAssistant.d.ts

@@ -5,10 +5,10 @@
  * Chat.MessageBubble / Chat.MessageInput / Chat.VoiceRecorder for the thread.
  */
 declare const AiAssistant: {
-    Avatar: ({ variant, isWorking }: import('./types').AiAssistantAvatarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Avatar: ({ portrait: livePortrait, variant, isWorking, rounded, size, }: import('./types').AiAssistantAvatarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
     ConfirmationCard: ({ heading, summary, details, status, onAccept, onDecline, labels, icon, onOpen, links, dataTestId, }: import('./types').AiAssistantConfirmationCardProps) => import("@emotion/react/jsx-runtime").JSX.Element;
     EmptyState: ({ title, icon, children }: import('./types').AiAssistantEmptyStateProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-    Fab: ({ onClick, label, dataTestId, ...dataAttributes }: import('./types').AiAssistantFabProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Fab: ({ onClick, label, portrait, dataTestId, ...dataAttributes }: import('./types').AiAssistantFabProps) => import("@emotion/react/jsx-runtime").JSX.Element;
     Header: ({ title, tag, onClose, docked, onToggleDocked, onNewConversation, labels }: import('./types').AiAssistantHeaderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
     Mark: ({ size, color, isWorking }: import('./types').AiAssistantMarkProps) => import("@emotion/react/jsx-runtime").JSX.Element;
     Nudge: ({ open, title, onClose, content, children, activeStep, onStepChange, labels, dataTestId, }: import('./types').AiAssistantNudgeProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/src/components/DataDisplay/AiAssistant/components/AiAssistantAvatar.d.ts

@@ -1,4 +1,4 @@
 import { AiAssistantAvatarProps } from '../types';
-/** The assistant's mark in a round: grey in the thread, or the flowing brand gradient where it stands for the brand. */
-declare const AiAssistantAvatar: ({ variant, isWorking }: AiAssistantAvatarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+/** The assistant's portrait on a grey round; where it stands for the brand, the brand's colours cross it now and then. */
+declare const AiAssistantAvatar: ({ portrait: livePortrait, variant, isWorking, rounded, size, }: AiAssistantAvatarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default AiAssistantAvatar;

package/dist/src/components/DataDisplay/AiAssistant/components/AiAssistantFab.d.ts

@@ -3,5 +3,5 @@ import { AiAssistantFabProps } from '../types';
  * The assistant's entry point, a pill in the bottom-right corner: its avatar and a call to ask it.
  * The host app hides it while the panel is open, the panel taking its corner.
  */
-declare const AiAssistantFab: ({ onClick, label, dataTestId, ...dataAttributes }: AiAssistantFabProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const AiAssistantFab: ({ onClick, label, portrait, dataTestId, ...dataAttributes }: AiAssistantFabProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default AiAssistantFab;

package/dist/src/components/DataDisplay/AiAssistant/constants.d.ts

@@ -19,5 +19,5 @@ export declare const AI_ASSISTANT_DOCKED_GAP = 4;
 export declare const AI_ASSISTANT_DOCKED_SPACE: number;
 /** Diameter of the avatar, in px: the Fab pill, the thread and the thinking row line up on it */
 export declare const AI_ASSISTANT_AVATAR_SIZE = 28;
-/** Glow colours of the mark and of the pill's working outline, from the head of the light to its tail */
+/** The assistant's light, from its head to its tail: its mark and its avatar, and what the host app paints with it (its name) */
 export declare const AI_ASSISTANT_GLOW_COLORS: readonly ["#FF5A1F", "#FFB547", "#FFC4A3", "#FF7EB3"];

package/dist/src/components/DataDisplay/AiAssistant/types.d.ts

@@ -4,8 +4,10 @@ import { DataAttributes } from '../../../types/dataAttributes';
 export interface AiAssistantFabProps extends DataAttributes {
     /** Opens the panel — the host app owns the open state, and hides the Fab while the panel is open */
     onClick: () => void;
-    /** Call to ask the assistant, next to its avatar (e.g. "Ask Soren") */
-    label: string;
+    /** Call to ask the assistant, next to its avatar (e.g. "Ask Soren") — its text names the button */
+    label: ReactNode;
+    /** Replaces the avatar's still portrait, e.g. a video of it */
+    portrait?: ReactNode;
     /** Test hook on the Fab button (defaults to "assistantFab") */
     dataTestId?: string;
 }
@@ -17,9 +19,17 @@ export interface AiAssistantMarkProps {
     /** The ellipse turns with two satellites, then settles back into its pose once false */
     isWorking?: boolean;
 }
-export interface AiAssistantAvatarProps extends Pick<AiAssistantMarkProps, "isWorking"> {
-    /** "subtle" (default): a grey round, e.g. beside a reply; "brand": the brand gradient with a white mark, e.g. on the Fab */
+export interface AiAssistantAvatarProps {
+    /** "subtle" (default): a grey round, e.g. beside a reply; "brand": the brand's colours cross it now and then, e.g. on the Fab */
     variant?: "subtle" | "brand";
+    /** A light turns around it while the assistant works */
+    isWorking?: boolean;
+    /** Side in px (defaults to AI_ASSISTANT_AVATAR_SIZE) */
+    size?: number;
+    /** A square with soft corners instead of a round, e.g. above a welcome */
+    rounded?: boolean;
+    /** Replaces the still portrait, e.g. a video of it on a transparent background */
+    portrait?: ReactNode;
 }
 export interface AiAssistantNudgeProps {
     /** Bubble visibility — animated in/out of the Fab corner, unmounted when closed */
@@ -67,7 +77,7 @@ export interface AiAssistantPanelProps {
 }
 export interface AiAssistantHeaderProps {
     /** Product name of the assistant — a brand chosen by the host app */
-    title: string;
+    title: ReactNode;
     /** Small uppercase tag after the title (e.g. "Beta") */
     tag?: string;
     /** Close action of the panel — rendered as the trailing icon button */
@@ -89,7 +99,7 @@ export interface AiAssistantHeaderProps {
 export interface AiAssistantEmptyStateProps {
     /** Question to the user (e.g. "What do you want to do today?") */
     title: string;
-    /** Shown above the title, on the logo's silhouette */
+    /** Shown above the title, e.g. the assistant's avatar */
     icon?: ReactNode;
     /** Rendered under the title — typically AiAssistant.Suggestion entries */
     children?: ReactNode;

package/dist/src/components/DataDisplay/AiAssistant/utils/gradient.d.ts

@@ -1,6 +1,3 @@
-import { Palette } from '@mui/material/styles';
-/** Flowing gradient of the brand avatar (animated background position). */
-export declare const assistantOrbGradient: ({ mode, secondary }: Palette) => string;
 /** Stops of the mark's glow, evenly spread and back to the first colour so the turning gradient has no seam. */
 export declare const assistantGlowStops: {
     color: "#FF5A1F" | "#FFB547" | "#FFC4A3" | "#FF7EB3";

package/dist/src/components/DataDisplay/Chat/components/ChatVoiceRecorder.d.ts

@@ -5,5 +5,5 @@ import { ChatVoiceRecorderProps } from '../types';
  * the recorded audio Blob to `onRecorded`; transcription/upload is the caller's job
  * (drive `isProcessing` while it runs).
  */
-export declare const ChatVoiceRecorder: ({ onRecorded, onError, labels, isProcessing, disabled, autoSubmitOnSilence, maxDurationMs, silenceTimeoutMs, }: ChatVoiceRecorderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ChatVoiceRecorder: ({ onRecorded, onError, labels, isProcessing, disabled, isHighlighted, startLabel, autoSubmitOnSilence, maxDurationMs, silenceTimeoutMs, }: ChatVoiceRecorderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default ChatVoiceRecorder;

package/dist/src/components/DataDisplay/Chat/types.d.ts

@@ -163,6 +163,14 @@ export interface ChatVoiceRecorderProps {
      * Disables the mic button (e.g. the chat is busy sending) — no recording can be started
      */
     disabled?: boolean;
+    /**
+     * Fills the mic like a ready send button, with a slow halo: the action to take, e.g. while a guide asks for a spoken message
+     */
+    isHighlighted?: boolean;
+    /**
+     * Written next to the mic, which then reads as a call to action (e.g. « Try your voice » in a guide)
+     */
+    startLabel?: string;
     /**
      * Hard stop: past this duration the take is validated automatically (default 2 min)
      */

package/dist/src/components/DataDisplay/Logo/Logo.d.ts

@@ -58,5 +58,5 @@ type ImgLogoProps = CommonLogoProps & {
     component?: "img";
 };
 export type LogoProps = SvgLogoProps | ImgLogoProps;
-declare const _default: import('react').ForwardRefExoticComponent<LogoProps & import('react').RefAttributes<SVGSVGElement | HTMLDivElement | HTMLImageElement>>;
+declare const _default: import('react').ForwardRefExoticComponent<LogoProps & import('react').RefAttributes<HTMLDivElement | HTMLImageElement | SVGSVGElement>>;
 export default _default;

package/dist/src/components/Inputs/TextFieldPhone/TextFieldPhone.d.ts

@@ -0,0 +1,15 @@
+import { TextFieldProps } from '@mui/material';
+export interface TextFieldPhoneProps extends Omit<TextFieldProps, "type" | "value" | "onChange"> {
+    /** Number as displayed, e.g. "06 34 39 39 49" */
+    value: string;
+    /** Called with the formatted number on each change */
+    onChange: (value: string) => void;
+    /** Display of the digits left by an edit, e.g. to cap their count (defaults to `phoneNumberAdapter`: French pairs) */
+    format?: (digits: string) => string;
+}
+/**
+ * A phone number field formatted as it is typed ("06 34 39 39 49"), the caret kept after the digit it followed:
+ * reformatting would otherwise send it to the end on each edit in the middle of the number.
+ */
+declare const TextFieldPhone: ({ value, onChange, format, inputRef, slotProps, ...props }: TextFieldPhoneProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default TextFieldPhone;

package/dist/src/components/Inputs/TextFieldPhone/utils/computeNextPhone.d.ts

@@ -0,0 +1,23 @@
+export declare const toDigits: (value: string) => string;
+export interface NextPhoneParams {
+    /** Caret index in `rawValue` */
+    caret: number;
+    /** `InputEvent.inputType` — empty when the change was not a keystroke (autofill, a test harness) */
+    inputType: string;
+    /** Display value before the edit */
+    previous: string;
+    /** Input value as written by the browser, before formatting */
+    rawValue: string;
+    /** Display value of the digits left by the edit */
+    format: (digits: string) => string;
+}
+/**
+ * Pure transition of a phone field: previous value + raw input → next display value and caret.
+ * Reformatting rewrites the whole value, which would send the browser caret to the end: an edit in
+ * the middle of the number would then continue at the end. The caret is put back after the same
+ * count of digits it followed (spaces move, digits do not).
+ */
+export declare const computeNextPhone: ({ caret, inputType, previous, rawValue, format }: NextPhoneParams) => {
+    caret: number;
+    formatted: string;
+};

package/dist/src/locales/en.d.ts

@@ -1,29 +1,53 @@
 declare const _default: {
+    add: string;
+    addParticipant: string;
     anErrorOccurred: string;
     apply: string;
+    back: string;
+    cancel: string;
     clear: string;
     clickToUpload: string;
     close: string;
     closed: string;
     collapseSidebar: string;
+    copied: string;
+    copy: string;
+    createYourFirstConversation: string;
     day: string;
     decrement: string;
+    deleteConversation: string;
+    dock: string;
+    enterToSend: string;
     escape: string;
     expandSidebar: string;
     files: string;
+    helpful: string;
     increment: string;
+    messages: string;
     month: string;
+    newConversation: string;
     noResult: string;
+    notHelpful: string;
     oops: string;
     open: string;
     openFullPage: string;
     openFullScreen: string;
     orDragAndDrop: string;
+    participants: string;
+    recordVoiceMessage: string;
     reload: string;
     reset: string;
+    search: string;
+    searchContacts: string;
     selectAll: string;
+    send: string;
+    startConversation: string;
+    stop: string;
     today: string;
+    undock: string;
+    useRecording: string;
     week: string;
+    writeAMessage: string;
     year: string;
 };
 export default _default;

package/dist/src/locales/fr.d.ts

@@ -1,29 +1,53 @@
 declare const _default: {
+    add: string;
+    addParticipant: string;
     anErrorOccurred: string;
     apply: string;
+    back: string;
+    cancel: string;
     clear: string;
     clickToUpload: string;
     close: string;
     closed: string;
     collapseSidebar: string;
+    copied: string;
+    copy: string;
+    createYourFirstConversation: string;
     day: string;
     decrement: string;
+    deleteConversation: string;
+    dock: string;
+    enterToSend: string;
     escape: string;
     expandSidebar: string;
     files: string;
+    helpful: string;
     increment: string;
+    messages: string;
     month: string;
+    newConversation: string;
     noResult: string;
+    notHelpful: string;
     oops: string;
     open: string;
     openFullPage: string;
     openFullScreen: string;
     orDragAndDrop: string;
+    participants: string;
+    recordVoiceMessage: string;
     reload: string;
     reset: string;
+    search: string;
+    searchContacts: string;
     selectAll: string;
+    send: string;
+    startConversation: string;
+    stop: string;
     today: string;
+    undock: string;
+    useRecording: string;
     week: string;
+    writeAMessage: string;
     year: string;
 };
 export default _default;

package/dist/src/main.d.ts

@@ -7,7 +7,7 @@
 export * from '@mui/material';
 export * from '@mui/material/transitions';
 export { default as AiAssistant } from './components/DataDisplay/AiAssistant/AiAssistant';
-export { AI_ASSISTANT_DOCKED_SPACE } from './components/DataDisplay/AiAssistant/constants';
+export { AI_ASSISTANT_DOCKED_SPACE, AI_ASSISTANT_GLOW_COLORS } from './components/DataDisplay/AiAssistant/constants';
 export * from './components/DataDisplay/AiAssistant/types';
 export { getAiAssistantNeighbourSx } from './components/DataDisplay/AiAssistant/utils/docked';
 export * from './components/DataDisplay/ArticleImage/ArticleImage';
@@ -105,6 +105,8 @@ export * from './components/Inputs/TextFieldGroup/TextFieldGroup';
 export { default as TextFieldGroup } from './components/Inputs/TextFieldGroup/TextFieldGroup';
 export * from './components/Inputs/TextFieldPassword/TextFieldPassword';
 export { default as TextFieldPassword } from './components/Inputs/TextFieldPassword/TextFieldPassword';
+export * from './components/Inputs/TextFieldPhone/TextFieldPhone';
+export { default as TextFieldPhone } from './components/Inputs/TextFieldPhone/TextFieldPhone';
 export * from './components/Layout/Backoffice/Backoffice';
 export { default as Backoffice } from './components/Layout/Backoffice/Backoffice';
 export { default as CollapsingHeader } from './components/Layout/CollapsingHeader/CollapsingHeader';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@getsoren/design-system",
   "description": "Design System React library",
   "sideEffects": false,
-  "version": "4.89.0",
+  "version": "4.91.0",
   "license": "ISC",
   "type": "module",
   "types": "./dist/src/main.d.ts",

package/dist/src/components/DataDisplay/AiAssistant/components/AiAssistantShape.d.ts

@@ -1,3 +0,0 @@
-/** Logo silhouette filling its positioned parent; content on top must be positioned too. */
-declare const AiAssistantShape: () => import("@emotion/react/jsx-runtime").JSX.Element;
-export default AiAssistantShape;