@getsoren/design-system 4.63.0 → 4.64.0

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

@@ -1,6 +1,7 @@
 import { AiAssistantFabProps } from '../types';
 /**
- * The assistant's floating action button — a liquid orb: iridescent gradient flow,
+ * The assistant's floating action button — a liquid orb: brand gradient flow (Soren orange
+ * dissolving into black),
  * blob morph, breath and pulsing aura while idle; calm circle with a close glyph when
  * the panel is open. The animations live on a ::before layer so the hit-box never
  * moves (reliable clicks, stable e2e).

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

@@ -1,9 +1,9 @@
 import { AiAssistantThinkingOrbProps } from '../types';
 /**
- * Living mini-orb shown while the assistant thinks — same visual language as the FAB
- * orb: iridescent flow, blob morph, breath and pulsing aura (aura spread scales with
- * size). Emotion emits @keyframes globally, hence the size-suffixed aura name (its
- * content differs per size — the same name would collide).
+ * Living mini-orb shown while the assistant thinks — same visual language as the FAB orb: the brand
+ * orange flowing into black, blob morph, breath and pulsing aura (aura spread scales with size).
+ * Emotion emits @keyframes globally, hence the size-suffixed aura name (its content differs per
+ * size — the same name would collide).
  */
 declare const AiAssistantThinkingOrb: ({ size }: AiAssistantThinkingOrbProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default AiAssistantThinkingOrb;

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

@@ -0,0 +1,11 @@
+import { PaletteMode } from '@mui/material';
+/** Flowing gradient of the floating bubble and the thinking orb (animated background position). */
+export declare const assistantOrbGradient: (mode: PaletteMode) => string;
+/** Stops of the spark glyph, from the orange to the dark end. */
+export declare const assistantSparkStops: (mode: PaletteMode) => ({
+    color: string;
+    offset: undefined;
+} | {
+    color: string;
+    offset: string;
+})[];

package/dist/src/components/DataDisplay/Icons/ArrowUpwardRoundedIcon.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from '@mui/material/SvgIcon';
+declare const ArrowUpwardRoundedIcon: (props: SvgIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default ArrowUpwardRoundedIcon;

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

@@ -1,3 +1,3 @@
 import { PlanningTimelineGroup, PlanningTimelineProps, PlanningTimelineResource, PlanningTimelineTask } from './types';
-declare const PlanningTimeline: <G extends PlanningTimelineGroup, R extends PlanningTimelineResource, T extends PlanningTimelineTask>({ groups, resources, tasks, isLoading, onTaskClick, onResourceClick, onGroupClick, onBarResize, renderGroup, renderResource, renderBar, renderTooltip, isTaskSelected, recenterKey, toolbarActions, sidebarTitle, locale, labels, localStorageKeys, defaultViewMode, sidebarWidth, rowHeight, }: PlanningTimelineProps<G, R, T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const PlanningTimeline: <G extends PlanningTimelineGroup, R extends PlanningTimelineResource, T extends PlanningTimelineTask>({ groups, resources, tasks, isLoading, onTaskClick, onResourceClick, onGroupClick, onBarResize, renderGroup, renderResource, renderBar, renderTooltip, isTaskSelected, recenterKey, toolbarActions, toolbarLeadingActions, sidebarTitle, locale, labels, localStorageKeys, defaultViewMode, sidebarWidth, rowHeight, }: PlanningTimelineProps<G, R, T>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default PlanningTimeline;

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

@@ -9,6 +9,9 @@ export type PlanningTimelineStatusColor = "default" | "error" | "info" | "succes
  * An incident (e.g. a breakdown) rendered as a hatched day-wide segment on the bar.
  */
 export interface PlanningTimelineIncident {
+    /**
+     * Day the incident occurred — the whole day is hatched on the bar
+     */
     incidentDate: string | Date;
 }
 /**
@@ -16,7 +19,13 @@ export interface PlanningTimelineIncident {
  * to attach your own domain data and get it back, typed, in `renderGroup` and `onGroupClick`.
  */
 export interface PlanningTimelineGroup {
+    /**
+     * Unique id, referenced by resources via their `groupId`
+     */
     id: string;
+    /**
+     * Text displayed in the group header
+     */
     name: string;
     /**
      * Whether the group's resources are hidden. Toggle it from `onGroupClick` to make headers collapsible.
@@ -38,7 +47,13 @@ export interface PlanningTimelineGroup {
  * `renderResource` and `onResourceClick`.
  */
 export interface PlanningTimelineResource {
+    /**
+     * Unique id, referenced by tasks via their `resourceId`
+     */
     id: string;
+    /**
+     * Text displayed in the left-column cell
+     */
     name: string;
     /**
      * Id of the `groups` entry this resource belongs to; omit for an ungrouped top-level resource.
@@ -51,13 +66,25 @@ export interface PlanningTimelineResource {
  * back, typed, in every render prop and callback.
  */
 export interface PlanningTimelineTask {
+    /**
+     * Unique id of the task
+     */
     id: string;
     /**
      * Id of the `resources` entry this bar is drawn on.
      */
     resourceId: string;
+    /**
+     * Text displayed inside the bar (default `renderBar` content)
+     */
     name: string;
+    /**
+     * Start of the bar
+     */
     start: Date;
+    /**
+     * End of the bar
+     */
     end: Date;
     /**
      * Incidents rendered as red hatched day-wide segments on the bar.
@@ -84,6 +111,9 @@ export interface PlanningTimelineGroupContext<G extends PlanningTimelineGroup =
      * Forwarded `onGroupClick` — call it to make the whole header clickable (e.g. a collapse toggle).
      */
     onJump: (group: G) => void;
+    /**
+     * True when the left column is folded away
+     */
     sidebarCollapsed: boolean;
     /**
      * `group.childCount` when set, otherwise the number of resources in the group.
@@ -102,6 +132,9 @@ export interface PlanningTimelineResourceContext<R extends PlanningTimelineResou
      * True when one of the resource's tasks is selected (`isTaskSelected`).
      */
     selected: boolean;
+    /**
+     * True when the left column is folded away
+     */
     sidebarCollapsed: boolean;
     /**
      * The resource's tasks (its bars), e.g. to summarize them in the cell.
@@ -112,6 +145,9 @@ export interface PlanningTimelineResourceContext<R extends PlanningTimelineResou
  * Context given to `renderBar` for a bar's inner content.
  */
 export interface PlanningTimelineBarContext {
+    /**
+     * True when the left column is folded away
+     */
     sidebarCollapsed: boolean;
 }
 /**
@@ -127,12 +163,38 @@ export interface PlanningTimelineLocalStorageKeys {
  * Built-in UI strings; each falls back to the design-system locale (en/fr) when not overridden.
  */
 export interface PlanningTimelineLabels {
+    /**
+     * "Day" option of the view-mode toggle
+     */
     day: string;
+    /**
+     * "Week" option of the view-mode toggle
+     */
     week: string;
+    /**
+     * "Month" option of the view-mode toggle
+     */
     month: string;
+    /**
+     * "Year" option of the view-mode toggle
+     */
     year: string;
+    /**
+     * Toolbar button that re-centres the timeline on today
+     */
     today: string;
+    /**
+     * Message displayed when there is no resource to show
+     */
     noResult: string;
+    /**
+     * Accessible name of the button that folds the left column away
+     */
+    collapseSidebar: string;
+    /**
+     * Accessible name of the button that brings the left column back
+     */
+    expandSidebar: string;
 }
 export interface PlanningTimelineProps<G extends PlanningTimelineGroup = PlanningTimelineGroup, R extends PlanningTimelineResource = PlanningTimelineResource, T extends PlanningTimelineTask = PlanningTimelineTask> {
     /**
@@ -179,6 +241,9 @@ export interface PlanningTimelineProps<G extends PlanningTimelineGroup = Plannin
      * Inner content of a bar. Defaults to the task name.
      */
     renderBar?: (task: T, context: PlanningTimelineBarContext) => ReactNode;
+    /**
+     * Content of the tooltip shown while hovering a bar. Omit to disable the tooltip.
+     */
     renderTooltip?: (task: T) => ReactNode;
     /**
      * Whether a task is the currently selected one (e.g. its detail view is open).
@@ -193,7 +258,12 @@ export interface PlanningTimelineProps<G extends PlanningTimelineGroup = Plannin
      */
     toolbarActions?: ReactNode;
     /**
-     * Title of the left (frozen) column, also used as the collapse button tooltip.
+     * Extra content rendered in the toolbar right after the "today" button (e.g. the view's filters),
+     * where it reads as part of the date controls instead of crowding the view-mode toggle.
+     */
+    toolbarLeadingActions?: ReactNode;
+    /**
+     * Title of the left (frozen) column.
      */
     sidebarTitle?: string;
     /**

package/dist/src/components/Navigation/NavigationMenu/NavLinkItem/NavLinkItem.d.ts

@@ -1,5 +1,5 @@
 import { MouseEvent, ReactNode } from 'react';
-import { NavLinkProps, ObjectNavigationItem } from '..';
+import { NavLinkProps, ObjectNavigationItem } from '../NavigationMenu';
 interface NavLinkItemProps extends Omit<ObjectNavigationItem, "label"> {
     children?: ReactNode;
     component?: (props: NavLinkProps) => ReactNode;

package/dist/src/components/Navigation/NavigationMenu/NavigationMenu.d.ts

@@ -1,21 +1,65 @@
 import { ChipProps } from '@mui/material';
 import { MouseEvent, ReactElement, ReactNode } from 'react';
+import { NavigationDensity } from './utils/navigationDensity';
+export * from './utils/navigationDensity';
 export type ObjectNavigationItem = {
+    /**
+     * Destination URL of the link
+     */
     url?: string;
+    /**
+     * Text displayed for the link
+     */
     label?: string;
+    /**
+     * Number displayed in a chip next to the label
+     */
     count?: number;
+    /**
+     * Color of the `count` chip
+     */
     countColor?: ChipProps["color"];
-    /** Small highlight chip rendered next to the label (e.g. "New"). Hidden when the sidebar is collapsed to the icon rail. */
+    /**
+     * Small highlight chip rendered next to the label (e.g. "New").
+     * Hidden when the sidebar is collapsed to the icon rail.
+     */
     tag?: string;
-    /** Color of the `tag` chip. @default "info" */
+    /**
+     * Color of the `tag` chip
+     * @default "info"
+     */
     tagColor?: ChipProps["color"];
+    /**
+     * Icon displayed before the label
+     */
     icon?: ReactNode;
+    /**
+     * Force the active state of the link
+     */
     active?: boolean;
+    /**
+     * State passed to the router NavLink
+     */
     state?: any;
+    /**
+     * Only mark the link active on an exact URL match (react-router NavLink `end` prop)
+     */
     end?: boolean;
+    /**
+     * Disable the link
+     */
     disabled?: boolean;
+    /**
+     * Hide the link on mobile
+     */
     hideOnMobile?: boolean;
+    /**
+     * Hide the link when the user has no access to it
+     */
     hasAccess?: boolean;
+    /**
+     * Target attribute of the link (e.g. "_blank")
+     */
     target?: string;
 };
 export type NavigationGroupItem = {
@@ -48,29 +92,77 @@ export type NavigationGroupItem = {
     hasAccess?: boolean;
 };
 export interface BottomLinkProps {
+    /**
+     * Destination URL of the link
+     */
     url?: string;
+    /**
+     * State passed to the router NavLink
+     */
     state?: any;
+    /**
+     * Only mark the link active on an exact URL match (react-router NavLink `end` prop)
+     */
     end?: boolean;
+    /**
+     * Content displayed for the link
+     */
     label?: ReactNode;
+    /**
+     * Force the active state of the link
+     */
     active?: boolean;
+    /**
+     * Icon displayed before the label
+     */
     icon?: ReactNode;
+    /**
+     * Disable the link
+     */
     disabled?: boolean;
+    /**
+     * Callback fired when the link is clicked
+     */
     onClick?: (e?: MouseEvent) => void;
+    /**
+     * Target attribute of the link (e.g. "_blank")
+     */
     target?: string;
 }
 export interface NavLinkProps {
+    /**
+     * Class name applied to the link, or a function receiving the link state and returning it
+     */
     className?: string | ((props: {
         isActive: boolean;
         isPending: boolean;
     }) => string | undefined);
+    /**
+     * Callback fired when the link is clicked
+     */
     onClick?: () => void;
+    /**
+     * Destination URL of the link
+     */
     to: string;
+    /**
+     * Only mark the link active on an exact URL match (react-router NavLink `end` prop)
+     */
     end?: boolean;
+    /**
+     * Content of the link, or a function receiving the link state and returning it
+     */
     children?: ReactNode | ((props: {
         isActive: boolean;
         isPending: boolean;
     }) => ReactNode);
+    /**
+     * State passed to the router NavLink
+     */
     state?: any;
+    /**
+     * Target attribute of the link (e.g. "_blank")
+     */
     target?: string;
 }
 export type NavigationItem = ObjectNavigationItem | NavigationGroupItem | ReactNode;
@@ -80,10 +172,7 @@ export interface NavigationMenuProps {
      */
     items?: NavigationItem[];
     /**
-     * Override the default translations
-     */
-    /**
-     * Enabler search field focus shortcut when pressing "ctrl + f" or "cmd + f"
+     * Enable search field focus shortcut when pressing "ctrl + f" or "cmd + f"
      */
     enableSearchFocusShortcut?: boolean;
     /**
@@ -124,7 +213,7 @@ export interface NavigationMenuProps {
      */
     AppBar?: ReactElement;
     /**
-     * Search component
+     * Footer component displayed at the bottom of the sidebar
      */
     Footer?: ReactNode;
     /**
@@ -132,9 +221,17 @@ export interface NavigationMenuProps {
      * @default "soren-navigation-menu-collapsed"
      */
     storageKey?: string;
+    /**
+     * Vertical density of the navigation. A closed set owned by the design system: "compact" only
+     * tightens the vertical rhythm (row height, paddings, gaps between blocks). Font size, horizontal
+     * gutters, icon gutter and collapsed rail are identical in both densities.
+     * @default "standard"
+     */
+    density?: NavigationDensity;
 }
 declare const DEFAULT_CONTEXT_VALUE: {
     closeDrawerMenu: () => void;
+    density: NavigationDensity;
     isCollapsed: boolean;
     isDrawerOpen: boolean;
     isMobile: boolean;
@@ -144,5 +241,5 @@ declare const DEFAULT_CONTEXT_VALUE: {
 };
 type NavigationMenuContextValue = NavigationMenuProps & typeof DEFAULT_CONTEXT_VALUE;
 export declare const NavigationMenuContext: import('react').Context<NavigationMenuContextValue>;
-declare const _default: import('react').MemoExoticComponent<({ AppBar, NavLink, Search, Logo, Footer, items, enableSearchFocusShortcut, disableResponsive, hideSearchDesktop, bottomLink, sideBarWidth, storageKey, }: NavigationMenuProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+declare const _default: import('react').MemoExoticComponent<({ AppBar, NavLink, Search, Logo, Footer, items, enableSearchFocusShortcut, disableResponsive, hideSearchDesktop, bottomLink, sideBarWidth, storageKey, density, }: NavigationMenuProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
 export default _default;

package/dist/src/components/Navigation/NavigationMenu/SideBarMenu/SideBarMenu.d.ts

@@ -1,4 +1,4 @@
-import { NavigationItem } from '..';
+import { NavigationItem } from '../NavigationMenu';
 export interface SideBarMenuProps {
     items?: NavigationItem[];
 }

package/dist/src/components/Navigation/NavigationMenu/utils/navigationDensity.d.ts

@@ -0,0 +1,32 @@
+export type NavigationDensity = "standard" | "compact";
+export interface NavigationDensityTokens {
+    /** Vertical padding of a bottom link row */
+    bottomLinkPaddingY: number;
+    /** Vertical padding of the block wrapping the bottom links */
+    bottomLinkWrapperPaddingY: number;
+    /** Vertical padding of the collapse button (its horizontal padding never changes) */
+    collapseButtonPaddingY: number;
+    /** Minimum height of a group header */
+    groupHeaderMinHeight: number;
+    /** Space above a group of items */
+    groupItemMarginTop: number;
+    /** Minimum height of a menu row. Never below 36: our users are on site, with gloves. */
+    itemMinHeight: number;
+    /** Vertical padding of a menu row */
+    itemPaddingY: number;
+    /** Vertical padding of the list item wrapping each row */
+    listItemPaddingY: number;
+    /** Space above the menu list */
+    listMarginTop: number;
+    /** Vertical padding of the logo block */
+    logoPaddingY: number;
+    /** Vertical padding of the search block */
+    searchPaddingY: number;
+}
+/**
+ * Density only changes the vertical rhythm. Deliberately absent from this table, and therefore
+ * identical in every density: the font size, the horizontal gutters, the icon gutter, the
+ * icon-to-label spacing, the border radius, the colours and the width of the collapsed rail.
+ * Shrinking the text is not an option — density comes from the spacings.
+ */
+export declare const NAVIGATION_DENSITY_TOKENS: Record<NavigationDensity, NavigationDensityTokens>;

package/dist/src/components/Surface/AppBar/AppBar.d.ts

@@ -1,7 +1,7 @@
 import { AvatarProps, ButtonProps, SxProps, TextFieldProps } from '@mui/material';
 import { MouseEventHandler, PropsWithChildren, ReactNode } from 'react';
 import { LogoProps } from '../../DataDisplay/Logo';
-import { NavigationItem, NavLinkProps } from '../../Navigation/NavigationMenu';
+import { NavigationItem, NavLinkProps } from '../../Navigation/NavigationMenu/NavigationMenu';
 interface AppBarProps extends PropsWithChildren {
     NavLink?: (props: NavLinkProps) => ReactNode;
     Avatar?: ReactNode;

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

@@ -4,8 +4,10 @@ declare const _default: {
     clickToUpload: string;
     close: string;
     closed: string;
+    collapseSidebar: string;
     day: string;
     escape: string;
+    expandSidebar: string;
     files: string;
     month: string;
     noResult: string;

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

@@ -4,8 +4,10 @@ declare const _default: {
     clickToUpload: string;
     close: string;
     closed: string;
+    collapseSidebar: string;
     day: string;
     escape: string;
+    expandSidebar: string;
     files: string;
     month: string;
     noResult: string;

package/dist/src/main.d.ts

@@ -75,8 +75,8 @@ export * from './components/Layout/Backoffice';
 export { default as Backoffice } from './components/Layout/Backoffice';
 export { default as CollapsingHeader } from './components/Layout/CollapsingHeader/CollapsingHeader';
 export * from './components/Layout/CollapsingHeader/types';
-export * from './components/Navigation/NavigationMenu';
-export { default as NavigationMenu } from './components/Navigation/NavigationMenu';
+export * from './components/Navigation/NavigationMenu/NavigationMenu';
+export { default as NavigationMenu } from './components/Navigation/NavigationMenu/NavigationMenu';
 export * from './components/Navigation/TabPanel';
 export { default as TabPanel } from './components/Navigation/TabPanel';
 export * from './components/Navigation/Tabs/LinkTab';

package/package.json

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

package/dist/src/components/Navigation/NavigationMenu/index.d.ts

@@ -1,3 +0,0 @@
-import { default as NavigationMenu } from './NavigationMenu';
-export default NavigationMenu;
-export * from './NavigationMenu';