feat: establish shared Ekklesia design system

2026-09-30 18:21:09 -05:00
parent 3ca6b2cb32
commit 3a26ef49ad
9 changed files with 336 additions and 110 deletions
@@ -50,6 +50,34 @@ export interface ToastProps {
  readonly children?: ReactNode;
 }

+export interface InlineNoticeProps {
+  readonly tone?: EkklesiaStatusTone;
+  readonly title?: ReactNode;
+  readonly className?: string;
+  readonly children?: ReactNode;
+}
+
+/** A calm in-flow status or explanation that should not interrupt the current task. */
+export function InlineNotice(props: InlineNoticeProps): ReactElement {
+  const tone = props.tone ?? "info";
+  return (
+    <div
+      className={classNames("ek-notice", `ek-notice--${tone}`, props.className)}
+      role={tone === "danger" ? "alert" : "status"}
+    >
+      <span aria-hidden="true" className="ek-notice__symbol">
+        {statusSymbols[tone]}
+      </span>
+      <div className="ek-notice__body">
+        {props.title === undefined ? undefined : (
+          <strong className="ek-notice__title">{props.title}</strong>
+        )}
+        {props.children}
+      </div>
+    </div>
+  );
+}
+
 /**
 * One notification's presentation — and only its presentation.
 *