@hintoric/email 0.2.0 → 0.3.0

package/README.md

@@ -15,12 +15,13 @@
 Mail clients understand neither Tailwind classes nor CSS variables, and run no JavaScript, so
 `@hintoric/ui`'s components can't be sent as they are. `@hintoric/email` has email counterparts of
 the most important ones — `Typography`, `Button`, `Link`, `Divider`,
-`Card`, `Avatar` and `Chip` — with the same `variant`, `color` and `size` props,
+`Card`, `Avatar`, `Chip` and `Alert` — with the same `variant`, `color` and `size` props,
 rendered as tables and inline styles. A visual test suite compares every variant × colour of each
 against its web component in light and dark.
 
 It also ships `Layout` (a message framed like hintoric's auth screens), `renderEmail` and
-ready-made templates such as `SecurityActivityAlertEmail`.
+ready-made templates such as `SecurityActivityAlertEmail` and `AuthCodeEmail` (the one-time
+codes of Kratos' sign-in flows).
 
 ## Install
 

package/dist/alertIcons.d.ts

@@ -0,0 +1,29 @@
+import { EmailColor, EmailScheme, EmailVariant } from './tokens';
+/**
+ * The icon an Alert shows for its colour — the same as @hintoric/ui's
+ * `ALERT_ICON_FOR_COLOR`, which the parity tests compare it with.
+ */
+export declare const EMAIL_ALERT_ICON_FOR_COLOR: {
+    readonly primary: "info";
+    readonly neutral: "info";
+    readonly danger: "report";
+    readonly success: "check-circle";
+    readonly warning: "warning";
+};
+export type EmailAlertIconName = (typeof EMAIL_ALERT_ICON_FOR_COLOR)[EmailColor];
+export declare const EMAIL_ALERT_ICON_BASE = "https://cdn.hintoric.com/assets/email/alert";
+export declare function emailAlertIconUrl(name: EmailAlertIconName, ink: string): string;
+/** The icon for an alert of this variant and colour, in the scheme's ink. */
+export declare function emailAlertIcon(scheme: EmailScheme, variant: EmailVariant, color: EmailColor): {
+    name: EmailAlertIconName;
+    ink: string;
+    url: string;
+};
+/** Every icon file an Alert can ask for — what has to be on the CDN. */
+export declare function emailAlertIconFiles(): {
+    name: EmailAlertIconName;
+    ink: string;
+    file: string;
+    url: string;
+}[];
+//# sourceMappingURL=alertIcons.d.ts.map

package/dist/alertIcons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alertIcons.d.ts","sourceRoot":"","sources":["../src/alertIcons.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+C,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7H;;;GAGG;AACH,eAAO,MAAM,0BAA0B;;;;;;CAMQ,CAAC;AAEhD,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,0BAA0B,CAAC,CAAC,UAAU,CAAC,CAAC;AAOjF,eAAO,MAAM,qBAAqB,gDAAgD,CAAC;AAEnF,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,kBAAkB,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAE/E;AAED,6EAA6E;AAC7E,wBAAgB,cAAc,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,GAAG;IAAE,IAAI,EAAE,kBAAkB,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAIpJ;AAED,wEAAwE;AACxE,wBAAgB,mBAAmB,IAAI;IAAE,IAAI,EAAE,kBAAkB,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,EAAE,CAW5G"}

package/dist/components/Alert.d.ts

@@ -0,0 +1,66 @@
+import { EmailColor, EmailVariant } from '../tokens';
+import * as React from 'react';
+/**
+ * alertVariants.ts: `gap-2/2.5/3.5`, `p-2/3/4`, `text-xs/sm/base` at a 1.5
+ * line-height; the icon is AlertIcon's 20px up to md and 24px at lg.
+ */
+declare const SIZES: {
+    readonly sm: {
+        readonly gap: 8;
+        readonly padding: 8;
+        readonly fontSize: 12;
+        readonly icon: 20;
+    };
+    readonly md: {
+        readonly gap: 10;
+        readonly padding: 12;
+        readonly fontSize: 14;
+        readonly icon: 20;
+    };
+    readonly lg: {
+        readonly gap: 14;
+        readonly padding: 16;
+        readonly fontSize: 16;
+        readonly icon: 24;
+    };
+};
+export interface AlertProps {
+    variant?: EmailVariant;
+    color?: EmailColor;
+    size?: keyof typeof SIZES;
+    /**
+     * A box — normally an image icon — on the first line, before the text.
+     * Left out, the alert shows the icon for its colour, as the web Alert
+     * does; `null` shows none.
+     */
+    startDecorator?: React.ReactNode;
+    /** A box on the first line, after the text. */
+    endDecorator?: React.ReactNode;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+}
+/**
+ * Alert for email, defaulting to soft / neutral like the web Alert; outlined
+ * and plain fill with `surface`. A table like Card, since that is the only box
+ * Outlook pads reliably. Every cell sets the type itself: tables in quirks
+ * mode — a webmail that drops the doctype — don't inherit font size, weight
+ * or line height.
+ *
+ * Decorators get a cell each, as wide as they are, and sit centred in a cell
+ * one line high, so an icon lines up with the first line of the text as the
+ * web Alert's `min-h-[1lh] items-center` does. That cell has no line height
+ * of its own — a decorator is a box; text in it needs its own font-size.
+ */
+export declare function Alert({ variant, color, size, startDecorator, endDecorator, style, children }: AlertProps): React.JSX.Element;
+export interface AlertTitleProps {
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+}
+/**
+ * AlertTitle.tsx: `text-base/6 font-semibold`, in the alert's colour. Body
+ * text under it keeps the alert's own size; give it `fontWeight: 400` for a
+ * regular weight, since the alert is medium.
+ */
+export declare function AlertTitle({ style, children }: AlertTitleProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Alert.d.ts.map

package/dist/components/Alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/components/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAwD,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AAErH;;;GAGG;AACH,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;CAID,CAAC;AAEX,MAAM,WAAW,UAAU;IACzB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IAC1B;;;;OAIG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,+CAA+C;IAC/C,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,EAAE,OAAgB,EAAE,KAAiB,EAAE,IAAW,EAAE,cAAc,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,UAAU,qBA6DpI;AA+BD,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,eAAe,qBAE9D"}

package/dist/index.d.ts

@@ -17,9 +17,15 @@ export { Card } from './components/Card';
 export type { CardProps } from './components/Card';
 export { Avatar } from './components/Avatar';
 export type { AvatarProps } from './components/Avatar';
+export { Alert, AlertTitle } from './components/Alert';
+export { EMAIL_ALERT_ICON_BASE, EMAIL_ALERT_ICON_FOR_COLOR, emailAlertIcon, emailAlertIconFiles, emailAlertIconUrl } from './alertIcons';
+export type { EmailAlertIconName } from './alertIcons';
+export type { AlertProps, AlertTitleProps } from './components/Alert';
 export { Chip } from './components/Chip';
 export type { ChipProps } from './components/Chip';
 export { HintoricLogo } from './components/HintoricLogo';
+export * from './templates/AuthCode';
+export * from './templates/AuthNoAccount';
 export * from './templates/SecurityActivityAlert';
 export * from './templates/WaitlistWelcome';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,YAAY,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EACL,YAAY,EACZ,cAAc,EACd,UAAU,EACV,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,SAAS,EACT,aAAa,GACd,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,iBAAiB,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAC7G,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAChF,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD,cAAc,mCAAmC,CAAC;AAClD,cAAc,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,YAAY,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EACL,YAAY,EACZ,cAAc,EACd,UAAU,EACV,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,SAAS,EACT,aAAa,GACd,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,iBAAiB,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAC7G,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAChF,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,0BAA0B,EAAE,cAAc,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACzI,YAAY,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACvD,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACtE,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mCAAmC,CAAC;AAClD,cAAc,6BAA6B,CAAC"}