@openmrs/esm-styleguide 8.0.1-pre.3581 → 8.0.1-pre.3592

package/dist/pagination/index.d.ts

@@ -0,0 +1 @@
+export * from './pagination.component';

package/dist/pagination/pagination.component.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { type PaginationProps as CarbonPaginationProps } from '@carbon/react';
+export interface PaginationProps {
+    /** The count of current items displayed */
+    currentItems: number;
+    /** The count of total items displayed */
+    totalItems: number;
+    /** The current page number */
+    pageNumber: number;
+    /** The size of each page */
+    pageSize: number;
+    /** A callback to be called when the page changes */
+    onPageNumberChange?: CarbonPaginationProps['onChange'];
+    /** An optional URL the user should be directed to if they click on the link to see all results */
+    dashboardLinkUrl?: string;
+    /** Optional text to display instead of the default "See all" */
+    dashboardLinkLabel?: string;
+}
+/**
+ * Re-usable pagination bar
+ */
+export declare const Pagination: React.FC<PaginationProps>;

package/dist/public.d.ts

@@ -1,24 +1,26 @@
-export { showNotification, showActionableNotification } from './notifications';
-export { type NotificationDescriptor, type InlineNotificationType } from './notifications/notification.component';
-export { type ActionableNotificationDescriptor, type ActionableNotificationType, } from './notifications/actionable-notification.component';
-export { showToast } from './toasts';
-export { showModal } from './modals';
-export * from './workspaces/public';
-export { type ToastDescriptor, type ToastType, type ToastNotificationMeta } from './toasts/toast.component';
-export { showSnackbar } from './snackbars';
-export { type SnackbarDescriptor, type SnackbarType, type SnackbarMeta } from './snackbars/snackbar.component';
-export * from './left-nav';
+export { type StyleguideConfigObject } from './config-schema';
+export * from './cards';
+export * from './custom-overflow-menu';
 export * from './dashboard-extension';
-export * from './error-state';
 export * from './datepicker';
-export * from './responsive-wrapper';
-export * from './patient-banner';
-export * from './patient-photo';
-export * from './custom-overflow-menu';
+export * from './diagnosis-tags';
+export * from './empty-card';
+export * from './error-state';
+export * from './error-card';
 export * from './icons/icons';
+export * from './left-nav';
+export * from './location-picker';
+export { showModal } from './modals';
+export { showNotification, showActionableNotification } from './notifications';
+export { type ActionableNotificationDescriptor, type ActionableNotificationType, } from './notifications/actionable-notification.component';
+export { type NotificationDescriptor, type InlineNotificationType } from './notifications/notification.component';
 export * from './page-header';
+export * from './pagination';
+export * from './patient-banner';
+export * from './patient-photo';
 export * from './pictograms/pictograms';
-export { type StyleguideConfigObject } from './config-schema';
-export * from './location-picker';
-export * from './diagnosis-tags';
+export * from './responsive-wrapper';
+export { showSnackbar, type SnackbarDescriptor, type SnackbarType, type SnackbarMeta } from './snackbars';
+export { showToast, type ToastDescriptor, type ToastType, type ToastNotificationMeta } from './toasts';
+export * from './workspaces/public';
 export { launchWorkspace2, launchWorkspaceGroup2, closeWorkspaceGroup2, getRegisteredWorkspace2Names, useWorkspace2Context, ActionMenuButton2, Workspace2, type Workspace2Definition, type Workspace2DefinitionProps, } from './workspaces2';

package/dist/snackbars/active-snackbar.component.d.ts

@@ -0,0 +1,9 @@
+/** @module @category UI */
+import React from 'react';
+import type { Subject } from 'rxjs';
+import type { SnackbarMeta } from './snackbar.component';
+interface ActiveSnackbarProps {
+    subject: Subject<SnackbarMeta>;
+}
+declare const ActiveSnackbars: React.FC<ActiveSnackbarProps>;
+export default ActiveSnackbars;

package/dist/snackbars/index.d.ts

@@ -0,0 +1,13 @@
+import type { SnackbarDescriptor } from './snackbar.component';
+export { type SnackbarDescriptor, type SnackbarType, type SnackbarMeta } from './snackbar.component';
+/**
+ * Starts a rendering host for snack bar notifications. Should only be used by the app shell.
+ * Under normal conditions there is no need to use this function.
+ * @param target The container target that hosts the snack bar notifications.
+ */
+export declare function renderSnackbars(target: HTMLElement | null): void;
+/**
+ * Displays a snack bar notification in the UI.
+ * @param snackbar The description of the snack bar to display.
+ */
+export declare function showSnackbar(snackbar: SnackbarDescriptor): void;

package/dist/snackbars/snackbar.component.d.ts

@@ -0,0 +1,22 @@
+/** @module @category UI */
+import React from 'react';
+export interface SnackbarProps {
+    snackbar: SnackbarMeta;
+    closeSnackbar(): void;
+}
+export interface SnackbarDescriptor {
+    actionButtonLabel?: string;
+    isLowContrast?: boolean;
+    kind?: SnackbarType | string;
+    onActionButtonClick?: () => void;
+    progressActionLabel?: string;
+    subtitle?: React.ReactNode;
+    timeoutInMs?: number;
+    autoClose?: boolean;
+    title: string;
+}
+export interface SnackbarMeta extends SnackbarDescriptor {
+    id: number;
+}
+export type SnackbarType = 'error' | 'info' | 'info-square' | 'success' | 'warning' | 'warning-alt';
+export declare const Snackbar: React.FC<SnackbarProps>;

package/dist/toasts/active-toasts.component.d.ts

@@ -0,0 +1,9 @@
+/** @module @category UI */
+import React from 'react';
+import type { Subject } from 'rxjs';
+import type { ToastNotificationMeta } from './toast.component';
+interface ActiveToastsProps {
+    subject: Subject<ToastNotificationMeta>;
+}
+declare const ActiveToasts: React.FC<ActiveToastsProps>;
+export default ActiveToasts;

package/dist/toasts/index.d.ts

@@ -0,0 +1,13 @@
+import type { ToastDescriptor } from './toast.component';
+export { type ToastDescriptor, type ToastType, type ToastNotificationMeta } from './toast.component';
+/**
+ * Starts a rendering host for toast notifications. Should only be used by the app shell.
+ * Under normal conditions there is no need to use this function.
+ * @param target The container target that hosts the toast notifications.
+ */
+export declare function renderToasts(target: HTMLElement | null): void;
+/**
+ * Displays a toast notification in the UI.
+ * @param toast The description of the toast to display.
+ */
+export declare function showToast(toast: ToastDescriptor): void;

package/dist/toasts/toast.component.d.ts

@@ -0,0 +1,19 @@
+/** @module @category UI */
+import React from 'react';
+export interface ToastProps {
+    toast: ToastNotificationMeta;
+    closeToast(): void;
+}
+export interface ToastDescriptor {
+    description: React.ReactNode;
+    onActionButtonClick?: () => void;
+    actionButtonLabel?: string;
+    kind?: ToastType;
+    critical?: boolean;
+    title?: string;
+}
+export interface ToastNotificationMeta extends ToastDescriptor {
+    id: number;
+}
+export type ToastType = 'error' | 'info' | 'info-square' | 'success' | 'warning' | 'warning-alt';
+export declare const Toast: React.FC<ToastProps>;

package/dist/workspaces/action-menu-button/action-menu-button.component.d.ts

@@ -0,0 +1,11 @@
+/** @module @category Workspace */
+import React from 'react';
+export interface ActionMenuButtonProps {
+    getIcon: (props: object) => JSX.Element;
+    label: string;
+    iconDescription: string;
+    handler: () => void;
+    type: string;
+    tagContent?: string | React.ReactNode;
+}
+export declare const ActionMenuButton: React.FC<ActionMenuButtonProps>;

package/dist/workspaces/container/action-menu.component.d.ts

@@ -0,0 +1,9 @@
+/** @module @category Workspace */
+import React from 'react';
+export interface ActionMenuProps {
+    isWithinWorkspace?: boolean;
+    name?: string;
+    actionMenuProps?: Record<string, unknown>;
+}
+export declare function ActionMenu({ isWithinWorkspace, name, actionMenuProps }: ActionMenuProps): React.JSX.Element;
+export default ActionMenu;

package/dist/workspaces/container/workspace-container.component.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+export interface WorkspaceContainerProps {
+    contextKey: string;
+    overlay?: boolean;
+    showSiderailAndBottomNav?: boolean;
+    additionalWorkspaceProps?: object;
+    actionMenuProps?: Record<string, unknown>;
+}
+/**
+ * Use this component to render the [workspace window](https://zeroheight.com/23a080e38/p/483a22-workspace)
+ * in an app such as the patient chart, or a workspace overlay in an app such as the clinic dashboard.
+ * This allows workspaces to be opened on the page where this component is mounted. This component
+ * must not be mounted multiple times on the same page. If there are multiple apps on a page, only
+ * one of those apps should use this component—it "hosts" the workspaces.
+ *
+ * Workspaces may be opened with the [[launchWorkspace]] function from `@openmrs/esm-framework`
+ * (among other options).
+ *
+ * The `overlay` prop determines whether the workspace is rendered as an overlay or a window.
+ * When a workspace window is opened, the other content on the screen will be pushed to the left.
+ * When an overlay is opened, it will cover other content on the screen.
+ *
+ * The context key is a string that appears in the URL, which defines the pages on which workspaces
+ * are valid. If the URL changes in a way such that it no longer contains the context key, then
+ * all workspaces will be closed. This ensures that, for example, workspaces on the home page do
+ * not stay open when the user transitions to the patient dashboard; and also that workspaces do
+ * not stay open when the user navigates to a different patient. The context key must be a valid
+ * sub-path of the URL, with no initial or trailing slash. So if the URL is
+ * `https://example.com/patient/123/foo`, then `patient` and `patient/123` and `123/foo` are valid
+ * context keys, but `patient/12` and `pati` are not.
+ *
+ * An extension slot is provided in the workspace header. Its name is derived from the `featureName` of
+ * the top-level component in which it is defined (feature names are generally provided in the lifecycle
+ * functions in an app's `index.ts` file). The slot is named `workspace-header-${featureName}-slot`.
+ * For the patient chart, this is `workspace-header-patient-chart-slot`.
+ *
+ * This component also provides the [Siderail and Bottom Nav](https://zeroheight.com/23a080e38/p/948cf1-siderail-and-bottom-nav/b/86907e).
+ * To use this, pass the `showSiderailAndBottomNav` prop. The Siderail is rendered on the right side of the screen
+ * on desktop, and the Bottom Nav is rendered at the bottom of the screen on tablet or mobile. The sidebar/bottom-nav
+ * menu provides an extension slot, to which buttons are attached as extensions. The slot
+ * derives its name from the `featureName` of the top-level component in which this `WorkspaceContainer`
+ * appears (feature names are generally provided in the lifecycle functions in an app's `index.ts` file).
+ * The slot is named `action-menu-${featureName}-items-slot`. For the patient chart, this is
+ * `action-menu-patient-chart-items-slot`.
+ *
+ * This component also provides everything needed for workspace notifications to be rendered.
+ *
+ * @param props.contextKey The context key (explained above)
+ * @param props.additionalWorkspaceProps Additional props to pass to the workspace. Using this is
+ *          unusual; you will generally want to pass props to the workspace when you open it, using
+ *          `launchWorkspace`. Use this only for props that will apply to every workspace launched
+ *          on the page where this component is mounted.
+ */
+export declare function WorkspaceContainer({ contextKey, overlay, showSiderailAndBottomNav, additionalWorkspaceProps, actionMenuProps, }: WorkspaceContainerProps): React.JSX.Element;

package/dist/workspaces/container/workspace-renderer.component.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type OpenWorkspace } from '../workspaces';
+interface WorkspaceRendererProps {
+    workspace: OpenWorkspace;
+    additionalPropsFromPage?: object;
+}
+export declare function WorkspaceRenderer({ workspace, additionalPropsFromPage }: WorkspaceRendererProps): React.JSX.Element;
+export {};

package/dist/workspaces/notification/workspace-notification.component.d.ts

@@ -0,0 +1,6 @@
+/** @module @category Workspace */
+import React from 'react';
+export interface WorkspaceNotificationProps {
+    contextKey: string;
+}
+export declare function WorkspaceNotification({ contextKey }: WorkspaceNotificationProps): React.JSX.Element | null;

package/dist/workspaces/public.d.ts

@@ -0,0 +1,4 @@
+export * from './action-menu-button/action-menu-button.component';
+export * from './container/workspace-container.component';
+export { closeWorkspace, launchWorkspace, navigateAndLaunchWorkspace, useWorkspaces, launchWorkspaceGroup, } from './workspaces';
+export { type DefaultWorkspaceProps, type CloseWorkspaceOptions, type OpenWorkspace, type WorkspacesInfo, type Prompt, } from './workspaces';

package/dist/workspaces/workspace-sidebar-store/useWorkspaceGroupStore.d.ts

@@ -0,0 +1,11 @@
+/**
+ * This hook is used to interact with the store of a workspace store.
+ * A workspace store is defined as a group of workspaces that open in the same workspace group.
+ *
+ * In case a workspace group is not active, it will be considered as a standalone workspace, and hence this hook will return an empty object and updateFunction as an empty function.
+ *
+ * @internal
+ *
+ * @param {string} workspaceGroupName The workspaceGroupName of the workspace used when registering the workspace in the module's routes.json file.
+ */
+export declare function useWorkspaceGroupStore(workspaceGroupName?: string): object;

package/dist/workspaces/workspaces.d.ts

@@ -0,0 +1,236 @@
+/** @module @category Workspace */
+import { type ReactNode } from 'react';
+import type { StoreApi } from 'zustand/vanilla';
+import { type WorkspaceRegistration } from '@openmrs/esm-extensions';
+import { type WorkspaceWindowState } from '@openmrs/esm-globals';
+export interface CloseWorkspaceOptions {
+    /**
+     * Whether to close the workspace ignoring all the changes present in the workspace.
+     *
+     * If ignoreChanges is true, the user will not be prompted to save changes before closing
+     * even if the `testFcn` passed to `promptBeforeClosing` returns `true`.
+     */
+    ignoreChanges?: boolean;
+    /**
+     * If you want to take an action after the workspace is closed, you can pass your function as
+     * `onWorkspaceClose`. This function will be called only after the workspace is closed, given
+     * that the user might be shown a prompt.
+     * @returns void
+     */
+    onWorkspaceClose?: () => void;
+    /**
+     * Controls whether the workspace group should be closed and store to be
+     * cleared when this workspace is closed.
+     * Defaults to true except when opening a new workspace of the same group.
+     *
+     * @default true
+     */
+    closeWorkspaceGroup?: boolean;
+}
+/** The default parameters received by all workspaces */
+export interface DefaultWorkspaceProps {
+    /**
+     * Call this function to close the workspace. This function will prompt the user
+     * if there are any unsaved changes to workspace.
+     *
+     * You can pass `onWorkspaceClose` function to be called when the workspace is finally
+     * closed, given the user forcefully closes the workspace.
+     */
+    closeWorkspace(closeWorkspaceOptions?: CloseWorkspaceOptions): void;
+    /**
+     * Call this with a no-args function that returns true if the user should be prompted before
+     * this workspace is closed; e.g. if there is unsaved data.
+     */
+    promptBeforeClosing(testFcn: () => boolean): void;
+    /**
+     * Call this function to close the workspace after the form is saved. This function
+     * will directly close the workspace without any prompt
+     */
+    closeWorkspaceWithSavedChanges(closeWorkspaceOptions?: CloseWorkspaceOptions): void;
+    /**
+     * Use this to set the workspace title if it needs to be set dynamically.
+     *
+     * Workspace titles generally are set in the workspace declaration in the routes.json file. They can also
+     * be set by the workspace launcher by passing `workspaceTitle` in the `additionalProps`
+     * parameter of the `launchWorkspace` function. This function is useful when the workspace
+     * title needs to be set dynamically.
+     *
+     * @param title The title to set. If using titleNode, set this to a human-readable string
+     *        which will identify the workspace in notifications and other places.
+     * @param titleNode A React object to put in the workspace header in place of the title. This
+     *        is useful for displaying custom elements in the header. Note that custom header
+     *        elements can also be attached to the workspace header extension slots.
+     */
+    setTitle(title: string, titleNode?: ReactNode): void;
+}
+export interface WorkspaceWindowSize {
+    size: WorkspaceWindowState;
+}
+export interface WorkspaceWindowSizeProviderProps {
+    children?: React.ReactNode;
+}
+export interface WorkspaceWindowSizeContext {
+    windowSize: WorkspaceWindowSize;
+    updateWindowSize?(value: WorkspaceWindowState): any;
+    active: boolean;
+}
+export interface Prompt {
+    title: string;
+    body: string;
+    /** Defaults to "Confirm" */
+    confirmText?: string;
+    onConfirm(): void;
+    /** Defaults to "Cancel" */
+    cancelText?: string;
+}
+export interface WorkspaceStoreState {
+    context: string | null;
+    openWorkspaces: Array<OpenWorkspace>;
+    prompt: Prompt | null;
+    workspaceWindowState: WorkspaceWindowState;
+    workspaceGroup?: {
+        name: string;
+        members: Array<string>;
+        cleanup?(): void;
+    };
+}
+export interface OpenWorkspace extends WorkspaceRegistration, DefaultWorkspaceProps {
+    additionalProps: object;
+    currentWorkspaceGroup?: string;
+}
+/**
+ *
+ * @param name Name of the workspace
+ * @param ignoreChanges If set to true, the "unsaved changes" modal will never be shown, even if the `promptBeforeClosing` function returns true. The user will not be prompted before closing.
+ * @returns true if the workspace can be closed.
+ */
+export declare function canCloseWorkspaceWithoutPrompting(name: string, ignoreChanges?: boolean): boolean;
+interface LaunchWorkspaceGroupArg {
+    state: Record<string | symbol | number, any>;
+    onWorkspaceGroupLaunch?(): void;
+    workspaceGroupCleanup?(): void;
+    workspaceToLaunch?: {
+        name: string;
+        additionalProps?: Record<string | symbol | number, any>;
+    };
+}
+/**
+ * Launches a workspace group with the specified name and configuration.
+ * If there are any open workspaces, it will first close them before launching the new workspace group.
+ *
+ * @param groupName - The name of the workspace group to launch
+ * @param args - Configuration object for launching the workspace group
+ * @param args.state - The initial state for the workspace group
+ * @param args.onWorkspaceGroupLaunch - Optional callback function to be executed after the workspace group is launched
+ * @param args.workspaceGroupCleanup - Optional cleanup function to be executed when the workspace group is closed
+ *
+ * @example
+ * launchWorkspaceGroup("myGroup", {
+ *   state: initialState,
+ *   onWorkspaceGroupLaunch: () => console.log("Workspace group launched"),
+ *   workspaceGroupCleanup: () => console.log("Cleaning up workspace group")
+ * });
+ */
+export declare function launchWorkspaceGroup(groupName: string, args: LaunchWorkspaceGroupArg): void;
+/**
+ * This launches a workspace by its name. The workspace must have been registered.
+ * Workspaces should be registered in the `routes.json` file.
+ *
+ * For the workspace to appear, there must be either a `<WorkspaceOverlay />` or
+ * a `<WorkspaceWindow />` component rendered.
+ *
+ * The behavior of this function is as follows:
+ *
+ * - If no workspaces are open, or if no other workspaces with the same type are open,
+ *   it will be opened and focused.
+ * - If a workspace with the same name is already open, it will be displayed/focused,
+ *   if it was not already.
+ * - If a workspace is launched and a workspace which cannot be hidden is already open,
+ *  a confirmation modal will pop up warning about closing the currently open workspace.
+ * - If another workspace with the same type is open, the workspace will be brought to
+ *   the front and then a confirmation modal will pop up warning about closing the opened
+ *   workspace
+ *
+ * Note that this function just manipulates the workspace store. The UI logic is handled
+ * by the components that display workspaces.
+ *
+ * Additional props can be passed to the workspace component being launched. Passing a
+ * prop named `workspaceTitle` will override the title of the workspace.
+ *
+ * @param name The name of the workspace to launch
+ * @param additionalProps Props to pass to the workspace component being launched. Passing
+ *          a prop named `workspaceTitle` will override the title of the workspace.
+ */
+export declare function launchWorkspace<T extends DefaultWorkspaceProps | object = DefaultWorkspaceProps & {
+    [key: string]: any;
+}>(name: string, additionalProps?: Omit<T, keyof DefaultWorkspaceProps> & {
+    workspaceTitle?: string;
+}): void;
+/**
+ * Use this function to navigate to a new page and launch a workspace on that page.
+ *
+ * @param options.targetUrl: The URL to navigate to. Will be passed to [[navigate]].
+ * @param options.contextKey: The context key used by the target page.
+ * @param options.workspaceName: The name of the workspace to launch.
+ * @param options.additionalProps: Additional props to pass to the workspace component being launched.
+ */
+export declare function navigateAndLaunchWorkspace({ targetUrl, contextKey, workspaceName, additionalProps, }: {
+    targetUrl: string;
+    contextKey: string;
+    workspaceName: string;
+    additionalProps?: object;
+}): void;
+export declare function promptBeforeClosing(workspaceName: string, testFcn: () => boolean): void;
+export declare function getPromptBeforeClosingFcn(workspaceName: string): any;
+export declare function cancelPrompt(): void;
+/**
+ * Function to close an opened workspace
+ * @param name Workspace registration name
+ * @param options Options to close workspace
+ */
+export declare function closeWorkspace(name: string, options?: CloseWorkspaceOptions): boolean;
+/**
+ * The set of workspaces is specific to a particular page. This function
+ * should be used when transitioning to a new page. If the current
+ * workspace data is for a different page, the workspace state is cleared.
+ *
+ * This is called by the workspace components when they mount.
+ * @internal
+ *
+ * @param contextKey An arbitrary key to identify the current page
+ */
+export declare function changeWorkspaceContext(contextKey: string | null): void;
+export declare const workspaceStore: StoreApi<WorkspaceStoreState>;
+export declare function getWorkspaceStore(): StoreApi<WorkspaceStoreState>;
+export declare function updateWorkspaceWindowState(value: WorkspaceWindowState): void;
+export declare function closeAllWorkspaces(onClosingWorkspaces?: () => void, filter?: (workspace: OpenWorkspace) => boolean): void;
+export interface WorkspacesInfo {
+    active: boolean;
+    prompt: Prompt | null;
+    workspaceWindowState: WorkspaceWindowState;
+    workspaces: Array<OpenWorkspace>;
+    workspaceGroup?: WorkspaceStoreState['workspaceGroup'];
+}
+export declare function useWorkspaces(): WorkspacesInfo;
+type PromptType = 'closing-workspace' | 'closing-all-workspaces' | 'closing-workspace-launching-new-workspace';
+/**
+ * Sets the current prompt according to the prompt type.
+ * @param promptType Determines the text and behavior of the prompt
+ * @param onConfirmation Function to be called after the user confirms to close the workspace
+ * @param workspaceTitle Workspace title to be shown in the prompt
+ * @returns
+ */
+export declare function showWorkspacePrompts(promptType: PromptType, onConfirmation?: () => void, workspaceTitle?: string): void;
+export declare function resetWorkspaceStore(): void;
+/**
+ * The workspace group store is a store that is specific to the workspace group.
+ * If the workspace has its own sidebar, the store will be created.
+ * This store can be used to store data that is specific to the workspace group.
+ * The store will be same for all the workspaces with same group name.
+ *
+ * For workspaces launched without a group, the store will be undefined.
+ *
+ * The store will be cleared when all the workspaces with the store's group name are closed.
+ */
+export declare function getWorkspaceGroupStore(workspaceGroupName: string | undefined, additionalProps?: object): StoreApi<object> | undefined;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-styleguide",
-  "version": "8.0.1-pre.3581",
+  "version": "8.0.1-pre.3592",
   "license": "MPL-2.0",
   "description": "The styleguide for OpenMRS SPA",
   "main": "dist/openmrs-esm-styleguide.js",
@@ -98,17 +98,17 @@
     "swr": "2.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "8.0.1-pre.3581",
-    "@openmrs/esm-config": "8.0.1-pre.3581",
-    "@openmrs/esm-emr-api": "8.0.1-pre.3581",
-    "@openmrs/esm-error-handling": "8.0.1-pre.3581",
-    "@openmrs/esm-extensions": "8.0.1-pre.3581",
-    "@openmrs/esm-globals": "8.0.1-pre.3581",
-    "@openmrs/esm-navigation": "8.0.1-pre.3581",
-    "@openmrs/esm-react-utils": "8.0.1-pre.3581",
-    "@openmrs/esm-state": "8.0.1-pre.3581",
-    "@openmrs/esm-translations": "8.0.1-pre.3581",
-    "@openmrs/esm-utils": "8.0.1-pre.3581",
+    "@openmrs/esm-api": "8.0.1-pre.3592",
+    "@openmrs/esm-config": "8.0.1-pre.3592",
+    "@openmrs/esm-emr-api": "8.0.1-pre.3592",
+    "@openmrs/esm-error-handling": "8.0.1-pre.3592",
+    "@openmrs/esm-extensions": "8.0.1-pre.3592",
+    "@openmrs/esm-globals": "8.0.1-pre.3592",
+    "@openmrs/esm-navigation": "8.0.1-pre.3592",
+    "@openmrs/esm-react-utils": "8.0.1-pre.3592",
+    "@openmrs/esm-state": "8.0.1-pre.3592",
+    "@openmrs/esm-translations": "8.0.1-pre.3592",
+    "@openmrs/esm-utils": "8.0.1-pre.3592",
     "@rspack/cli": "^1.3.11",
     "@rspack/core": "^1.3.11",
     "@types/geopattern": "^1.2.9",

package/src/cards/card-header.component.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useLayoutType } from '@openmrs/esm-react-utils';
+import styles from './card-header.module.scss';
+
+export interface CardHeaderProps {
+  /** The title for this card. This must be a pre-translated string. */
+  title: string;
+  /** The contents of the card header to render if any. */
+  children?: React.ReactNode;
+}
+
+/**
+ * Re-usable header component for O3-style cards, like those found on the patient chart
+ */
+export function CardHeader({ title, children }: CardHeaderProps) {
+  const isTablet = useLayoutType() === 'tablet';
+
+  return (
+    <div
+      className={classNames({
+        [styles.tabletHeader]: isTablet,
+        [styles.desktopHeader]: !isTablet,
+      })}
+    >
+      <h4>{title}</h4>
+      {children}
+    </div>
+  );
+}

package/src/cards/card-header.module.scss

@@ -0,0 +1,45 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '../vars' as *;
+
+.desktopHeader,
+.tabletHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: layout.$spacing-04 0 layout.$spacing-04 layout.$spacing-05;
+  background-color: $ui-background;
+
+  h4:after {
+    content: '';
+    display: block;
+    width: layout.$spacing-07;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
+.desktopHeader {
+  height: layout.$spacing-09;
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeader {
+  height: 4.5rem;
+  h4 {
+    @include type.type-style('heading-03');
+    color: $text-02;
+  }
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .desktopHeader,
+  .tabletHeader {
+    text-align: right;
+    padding: layout.$spacing-04 layout.$spacing-05 layout.$spacing-04 0;
+  }
+}

package/src/cards/index.ts

@@ -0,0 +1 @@
+export { CardHeader, type CardHeaderProps } from './card-header.component';

package/src/declarations.d.ts

@@ -1,5 +1,17 @@
-declare module '*.css';
-declare module '*.scss';
+declare module '*.css' {
+  interface Styles {
+    [key: string]: string;
+  }
+  const content: Styles;
+  export default content;
+}
+declare module '*.scss' {
+  interface Styles {
+    [key: string]: string;
+  }
+  const content: Styles;
+  export default content;
+}
 declare module '*.svg' {
   const content: string;
   export default content;