@sesionario/blocks

Shared UI components for Sesionario applications.

This package is the Sesionario-specific successor to @algenium/blocks. It ships only the components, hooks, and data the five Sesionario apps (admin, app, auth, backoffice, pharma) actually use, plus shadcn Empty primitives under the hood of EmptyState.

Shared feedback patterns include ConfirmDestructiveDialog (confirm before delete/mute and similar irreversible actions).

Read-first editable sections (EditableSection, DataList, FieldMessage)

Settings and profile data should be readable by default, then turn into a real <form> when the person chooses Edit. The primitives are chrome-free — no Card, border, or title — so you place actions in your own layout (CardAction, page header, dialog, or a bare section).

import {
	EditableSection,
	DataList,
	DataListItem,
	FieldMessage,
} from "@sesionario/blocks";

<EditableSection
	labelledBy="fiscal-title"
	isDirty={dirty}
	onDiscard={() => reset()}
	onSave={async () => {
		/* throw on validation/API failure so edit mode stays open */
		await save();
	}}
	labels={{
		edit: t("edit"),
		save: t("save"),
		saving: t("saving"),
		cancel: t("cancel"),
		saved: t("saved"),
	}}
	readView={() => (
		<DataList>
			<DataListItem label="RFC">{rfc}</DataListItem>
		</DataList>
	)}
	editView={() => (
		<div className="flex flex-col gap-1.5">
			<label htmlFor="rfc">RFC</label>
			<input id="rfc" value={rfc} onChange={...} aria-invalid={!!error} aria-describedby="rfc-err" />
			<FieldMessage id="rfc-err">{error}</FieldMessage>
		</div>
	)}
>
	{({ actions, content, status }) => (
		<Card>
			<CardHeader>
				<CardTitle id="fiscal-title">Datos fiscales</CardTitle>
				<CardAction>{actions}</CardAction>
			</CardHeader>
			<CardContent>
				{content}
				{status}
			</CardContent>
		</Card>
	)}
</EditableSection>

Headless alternative: useEditableSection for card-less surfaces (dialogs, table rows, page headers).

Optional progressive-enhancement CSS for a smoother height change (Chromium 129+; no-op elsewhere). Honor reduced motion:

@supports (interpolate-size: allow-keywords) {
	.sesionario-editable-section-content {
		interpolate-size: allow-keywords;
		transition: min-height 200ms ease;
	}
}
@media (prefers-reduced-motion: reduce) {
	.sesionario-editable-section-content {
		transition: none;
	}
}

Pass stableHeight for small (1–2 field) sections if you want later toggles to keep a cached min-height.

Install

pnpm add @sesionario/blocks

The main entry is a Client Component boundary. Pure helpers that must run in React Server Components (e.g. avatar initials/colors) should be imported from the server-safe subpath:

import { avatarFallbackStyle, getInitials } from "@sesionario/blocks/avatar";

Peer dependencies (install in the consuming app as needed):

• react, react-dom
• lucide-react
• next-themes (ThemeSwitcher)
• framer-motion (Theme/Language switchers, AvatarEditorDialog)
• react-phone-number-input (PhoneInput — also import its CSS in your app layout)
• hls.js (optional — VideoPlayer)

Payment icons (PaymentIcon)

Vendored flat-rounded brand marks (Aaron Fagan’s svg-credit-card-payment-icons, Apache-2.0). Pass a Stripe card.brand code:

import { PaymentIcon, formatPaymentCardBrand } from "@sesionario/blocks";

<PaymentIcon brand="amex" />
<span>{formatPaymentCardBrand("amex")}</span> {/* American Express */}

Unknown or null brands render the Generic mark. Regenerate icons after updating the upstream SVGs:

pnpm payment-icons:generate

See NOTICE for artwork attribution.

Chat UI (MessageScroller, ChatMessageList, …)

Apps that render chat scrollers should define this utility in global CSS (used by MessageScrollerViewport):

.scroll-fade-b {
	mask-image: linear-gradient(
		to bottom,
		#000 0%,
		#000 calc(100% - 1.5rem),
		transparent 100%
	);
}

Development

pnpm install
pnpm build
pnpm typecheck
pnpm lint
pnpm test

Release

Pushes to main / dev / features/* run semantic-release and publish to npm via OIDC trusted publishing (see .github/workflows/release.yml). Configure the npm package for trusted publishing against the Docufacil/blocks GitHub repository before the first release.