New Card and FormFieldSet components

cmp/card/Card.scss

@@ -0,0 +1,57 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2026 Extremely Heavy Industries Inc.
+ */
+
+.xh-card {
+  border-color: var(--xh-border-color);
+  border-width: var(--xh-border-width-px);
+
+  &--collapsed {
+    border-bottom: none;
+    border-left: none;
+    border-right: none;
+  }
+
+  &--intent-primary {
+    border-color: var(--xh-card-primary-color);
+  }
+
+  &--intent-success {
+    border-color: var(--xh-card-success-color);
+  }
+
+  &--intent-warning {
+    border-color: var(--xh-card-warning-color);
+  }
+
+  &--intent-danger {
+    border-color: var(--xh-card-danger-color);
+  }
+
+  &__header {
+    align-items: center;
+    display: flex;
+    gap: 8px;
+    min-height: 30px;
+    padding: var(--xh-pad-half-px) var(--xh-pad-half-px);
+
+    &--intent-primary {
+      color: var(--xh-card-primary-color);
+    }
+
+    &--intent-success {
+      color: var(--xh-card-success-color);
+    }
+
+    &--intent-warning {
+      color: var(--xh-card-warning-color);
+    }
+
+    &--intent-danger {
+      color: var(--xh-card-danger-color);
+    }
+  }
+}

cmp/card/Card.ts

@@ -0,0 +1,167 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2026 Extremely Heavy Industries Inc.
+ */
+
+import {box, div, fieldset, legend} from '@xh/hoist/cmp/layout';
+import {
+    BoxProps,
+    hoistCmp,
+    HoistProps,
+    Intent,
+    LayoutProps,
+    TestSupportProps,
+    uses,
+    XH
+} from '@xh/hoist/core';
+import {collapseToggleButton as desktopCollapseToggleButtonImpl} from '@xh/hoist/dynamics/desktop';
+import {collapseToggleButton as mobileCollapseToggleButtonImpl} from '@xh/hoist/dynamics/mobile';
+import {tooltip as bpTooltip} from '@xh/hoist/kit/blueprint';
+import {mergeDeep, TEST_ID} from '@xh/hoist/utils/js';
+import {splitLayoutProps} from '@xh/hoist/utils/react';
+import classNames from 'classnames';
+import {castArray} from 'lodash';
+import {type ReactElement, type ReactNode, useRef} from 'react';
+import {CardModel} from './CardModel';
+
+import './Card.scss';
+
+export interface CardProps extends HoistProps<CardModel>, TestSupportProps, LayoutProps {
+    /** An icon placed left of the title. */
+    icon?: ReactElement;
+    /** Intent to apply to the inline header and border. */
+    intent?: Intent;
+    /** The title to display. */
+    title?: ReactNode;
+    /** Tooltip to show when hovering over the inline header. */
+    tooltip?: ReactElement | string;
+    /** Additional props to pass to the inner content box. */
+    innerBoxProps?: BoxProps;
+}
+
+/**
+ * A bounded container for grouping related content, with optional inline header and collapsibility.
+ * Children are arranged vertically in a flexbox container by default. innerBoxProps can be
+ * passed to control the flex direction and other layout aspects of the inner container.
+ */
+export const [Card, card] = hoistCmp.withFactory<CardProps>({
+    displayName: 'Card',
+    model: uses(CardModel, {
+        fromContext: false,
+        publishMode: 'limited',
+        createDefault: true
+    }),
+    className: 'xh-card',
+    render({
+        icon,
+        title,
+        tooltip,
+        intent,
+        children,
+        className,
+        innerBoxProps = {},
+        model,
+        ...rest
+    }) {
+        const wasDisplayed = useRef(false),
+            {collapsible, collapsed, renderMode} = model;
+
+        let [layoutProps, {testId, ...restProps}] = splitLayoutProps(rest);
+
+        restProps = mergeDeep({style: layoutProps}, {[TEST_ID]: testId}, restProps);
+
+        const items = castArray(children),
+            classes = [];
+
+        if (collapsed) {
+            classes.push('xh-card--collapsed');
+        } else {
+            classes.push('xh-card--expanded');
+        }
+
+        if (intent) {
+            classes.push(`xh-card--intent-${intent}`);
+        } else {
+            classes.push(`xh-card--intent-none`);
+        }
+
+        const collapseToggleButton = XH.isMobileApp
+            ? mobileCollapseToggleButtonImpl
+            : desktopCollapseToggleButtonImpl;
+
+        if (collapsed) {
+            classes.push('xh-card--collapsed');
+        } else {
+            wasDisplayed.current = true;
+        }
+
+        let content: ReactNode[];
+        switch (renderMode) {
+            case 'always':
+                content = items;
+                classes.push('xh-card--render-mode-always');
+                break;
+
+            case 'lazy':
+                content = collapsed && !wasDisplayed.current ? [] : items;
+                classes.push('xh-card--render-mode-lazy');
+                break;
+
+            // unmountOnHide
+            default:
+                content = collapsed ? [] : items;
+                classes.push('xh-card--render-mode-unmount-on-hide');
+                break;
+        }
+
+        return fieldset({
+            className: classNames(className, classes),
+            items: [
+                collapsible
+                    ? collapseToggleButton({
+                          icon,
+                          text: title,
+                          tooltip,
+                          intent,
+                          cardModel: model
+                      })
+                    : cardTitle({icon, title, tooltip, intent}),
+                box({
+                    className: 'xh-card__inner',
+                    items: content,
+                    display: collapsed ? 'none' : 'flex',
+                    flexDirection: 'column',
+                    flexWrap: 'wrap',
+                    ...innerBoxProps
+                })
+            ],
+            ...restProps
+        });
+    }
+});
+
+interface CardTitleProps extends HoistProps {
+    icon?: ReactElement;
+    intent?: Intent;
+    title?: ReactNode;
+    tooltip?: ReactElement | string;
+}
+
+const cardTitle = hoistCmp.factory<CardTitleProps>({
+    displayName: 'CardTitle',
+    className: 'xh-card__header',
+    model: false,
+
+    render({className, icon, intent, title, tooltip}) {
+        if (!icon && !title) return null;
+
+        const header = div({
+            className: classNames(className, `xh-card__header--intent-${intent ?? 'none'}`),
+            items: [icon, title]
+        });
+
+        return legend(tooltip ? bpTooltip({item: header, content: tooltip, intent}) : header);
+    }
+});

cmp/card/CardModel.ts

@@ -0,0 +1,94 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2026 Extremely Heavy Industries Inc.
+ */
+
+import {
+    HoistModel,
+    Persistable,
+    PersistableState,
+    PersistenceProvider,
+    PersistOptions,
+    RenderMode
+} from '@xh/hoist/core';
+import {bindable, makeObservable} from '@xh/hoist/mobx';
+import {isNil} from 'lodash';
+
+export interface CardConfig {
+    /** Can card be collapsed? */
+    collapsible?: boolean;
+
+    /** Default collapsed state. */
+    defaultCollapsed?: boolean;
+
+    /** How should collapsed content be rendered? */
+    renderMode?: RenderMode;
+
+    /** Options governing persistence. */
+    persistWith?: PersistOptions;
+}
+
+export interface CardPersistState {
+    collapsed: boolean;
+}
+
+/**
+ * CardModel supports configuration and state-management for user-driven expand/collapse,
+ * along with support for saving this state via a configured PersistenceProvider.
+ */
+export class CardModel extends HoistModel implements Persistable<CardPersistState> {
+    declare config: CardConfig;
+
+    //-----------------------
+    // Immutable Properties
+    //-----------------------
+    readonly collapsible: boolean;
+    readonly defaultCollapsed: boolean;
+    readonly renderMode: RenderMode;
+
+    //---------------------
+    // Observable State
+    //---------------------
+    @bindable
+    collapsed: boolean = false;
+
+    constructor({
+        collapsible = true,
+        defaultCollapsed = false,
+        renderMode = 'unmountOnHide',
+        persistWith = null
+    }: CardConfig = {}) {
+        super();
+        makeObservable(this);
+
+        this.collapsible = collapsible;
+        this.collapsed = this.defaultCollapsed = collapsible && defaultCollapsed;
+        this.renderMode = renderMode;
+
+        if (persistWith) {
+            PersistenceProvider.create({
+                persistOptions: {
+                    path: 'card',
+                    ...persistWith
+                },
+                target: this
+            });
+        }
+    }
+
+    //---------------------
+    // Persistable Interface
+    //---------------------
+    getPersistableState(): PersistableState<CardPersistState> {
+        return new PersistableState({collapsed: this.collapsed});
+    }
+
+    setPersistableState(state: PersistableState<CardPersistState>) {
+        const {collapsed} = state.value;
+        if (!isNil(collapsed)) {
+            this.collapsed = collapsed;
+        }
+    }
+}

cmp/card/index.ts

@@ -0,0 +1,7 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2026 Extremely Heavy Industries Inc.
+ */
+export * from './Card';