@duro-app/ui-email 0.37.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Frederic Rousseau
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+/**
+ * Root wrapper: <Html><Head> (color-scheme meta + the prefers-color-scheme
+ * dark <style>) + a themed card <Body>/<Container>. Compose the rest of the
+ * email inside it with the other primitives.
+ */
+export declare function EmailShell({ preview, children }: {
+    preview?: string;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Heading({ as, children }: {
+    as?: 'h1' | 'h2';
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export type TextVariant = 'body' | 'small' | 'footer';
+export declare function Text({ variant, children, style, }: {
+    variant?: TextVariant;
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ href, children, align, }: {
+    href: string;
+    children: React.ReactNode;
+    align?: 'left' | 'center' | 'right';
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Hr(): import("react/jsx-runtime").JSX.Element;
+export declare function Link({ href, children, style, }: {
+    href: string;
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Section({ children, style, }: {
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=components.d.ts.map

package/dist/components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkB9B;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAC,OAAO,EAAE,QAAQ,EAAC,EAAE;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,2CAkC5F;AAED,wBAAgB,OAAO,CAAC,EAAC,EAAS,EAAE,QAAQ,EAAC,EAAE;IAAC,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,2CAgB3F;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AAErD,wBAAgB,IAAI,CAAC,EACnB,OAAgB,EAChB,QAAQ,EACR,KAAK,GACN,EAAE;IACD,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,2CAgBA;AAED,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,QAAQ,EACR,KAAgB,GACjB,EAAE;IACD,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;CACpC,2CAqBA;AAED,wBAAgB,EAAE,4CAEjB;AAED,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,QAAQ,EACR,KAAK,GACN,EAAE;IACD,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,2CAUA;AAED,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,2CAEA"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { EmailShell, Heading, Text, Button, Hr, Link, Section, type TextVariant } from './components';
+export { palette, space, radius, font, cls, darkModeCss, type EmailRoles } from './theme';
+export { Img, Preview, Link as RawLink } from '@react-email/components';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,WAAW,EAAC,MAAM,cAAc,CAAA;AACnG,OAAO,EAAC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,KAAK,UAAU,EAAC,MAAM,SAAS,CAAA;AAIvF,OAAO,EAAC,GAAG,EAAE,OAAO,EAAE,IAAI,IAAI,OAAO,EAAC,MAAM,yBAAyB,CAAA"}

package/dist/index.js

@@ -0,0 +1,215 @@
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import { Section as g, Button as p, Html as $, Head as h, Preview as b, Body as k, Container as y, Heading as f, Hr as S, Link as H, Text as z } from "@react-email/components";
+import { Img as P, Preview as U, Link as _ } from "@react-email/components";
+import { darkColors as M, lightColors as C } from "@duro-app/tokens/raw";
+const a = {
+  xs: "4px",
+  sm: "8px",
+  ms: "12px",
+  md: "16px",
+  lg: "24px",
+  xl: "32px",
+  xxl: "48px",
+  xxxl: "64px"
+}, x = {
+  sm: "8px",
+  md: "12px",
+  lg: "16px"
+}, i = {
+  family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif',
+  // rem → px (1rem = 16px): xs .75 / sm .875 / md 1 / lg 1.125 / xl 1.25 / heading 1.5
+  sizeXs: "12px",
+  sizeSm: "14px",
+  sizeMd: "16px",
+  sizeLg: "18px",
+  sizeXl: "20px",
+  sizeHeading: "24px",
+  weightNormal: 400,
+  weightMedium: 500,
+  weightSemibold: 600,
+  weightBold: 700,
+  lineHeight: 1.5
+}, c = (t) => ({
+  bg: t.bg,
+  card: t.bgCard,
+  cardBorder: t.border,
+  text: t.text,
+  textMuted: t.textMuted,
+  heading: t.text,
+  accent: t.accent,
+  accentText: t.accentContrast,
+  border: t.border
+}), u = {
+  light: c(C),
+  dark: c(M)
+}, n = {
+  body: "d-body",
+  card: "d-card",
+  text: "d-text",
+  textMuted: "d-text-muted",
+  heading: "d-heading",
+  button: "d-btn",
+  hr: "d-hr",
+  link: "d-link"
+}, m = (t) => {
+  const e = u.dark, o = t ? `${t} ` : "";
+  return [
+    `${o}.${n.body} { background-color: ${e.bg} !important; }`,
+    `${o}.${n.card} { background-color: ${e.card} !important; border-color: ${e.cardBorder} !important; }`,
+    `${o}.${n.text} { color: ${e.text} !important; }`,
+    `${o}.${n.textMuted} { color: ${e.textMuted} !important; }`,
+    `${o}.${n.heading} { color: ${e.heading} !important; }`,
+    `${o}.${n.button} { background-color: ${e.accent} !important; color: ${e.accentText} !important; }`,
+    `${o}.${n.hr} { border-color: ${e.border} !important; }`,
+    `${o}.${n.link} { color: ${e.accent} !important; }`
+  ];
+}, B = [
+  "@media (prefers-color-scheme: dark) {",
+  ...m("").map((t) => "  " + t),
+  "}",
+  "/* Outlook.com / Outlook mobile dark mode */",
+  ...m("[data-ogsc]")
+].join(`
+`), d = u.light;
+function T({ preview: t, children: e }) {
+  return /* @__PURE__ */ s($, { lang: "en", children: [
+    /* @__PURE__ */ s(h, { children: [
+      /* @__PURE__ */ r("meta", { name: "color-scheme", content: "light dark" }),
+      /* @__PURE__ */ r("meta", { name: "supported-color-schemes", content: "light dark" }),
+      /* @__PURE__ */ r("style", { dangerouslySetInnerHTML: { __html: B } })
+    ] }),
+    t ? /* @__PURE__ */ r(b, { children: t }) : null,
+    /* @__PURE__ */ r(
+      k,
+      {
+        className: n.body,
+        style: {
+          backgroundColor: d.bg,
+          fontFamily: i.family,
+          margin: 0,
+          padding: `${a.xl} 0`
+        },
+        children: /* @__PURE__ */ r(
+          y,
+          {
+            className: n.card,
+            style: {
+              backgroundColor: d.card,
+              border: `1px solid ${d.cardBorder}`,
+              borderRadius: x.md,
+              margin: "0 auto",
+              maxWidth: "520px",
+              padding: a.xl
+            },
+            children: e
+          }
+        )
+      }
+    )
+  ] });
+}
+function R({ as: t = "h1", children: e }) {
+  const o = t === "h1";
+  return /* @__PURE__ */ r(
+    f,
+    {
+      as: t,
+      className: n.heading,
+      style: {
+        color: d.heading,
+        fontSize: o ? i.sizeHeading : i.sizeMd,
+        fontWeight: o ? i.weightBold : i.weightSemibold,
+        margin: o ? `0 0 ${a.md}` : `0 0 ${a.sm}`
+      },
+      children: e
+    }
+  );
+}
+function j({
+  variant: t = "body",
+  children: e,
+  style: o
+}) {
+  const l = t !== "body";
+  return /* @__PURE__ */ r(
+    z,
+    {
+      className: l ? n.textMuted : n.text,
+      style: {
+        color: l ? d.textMuted : d.text,
+        fontSize: t === "footer" ? i.sizeXs : i.sizeSm,
+        lineHeight: i.lineHeight,
+        margin: `0 0 ${a.ms}`,
+        ...o
+      },
+      children: e
+    }
+  );
+}
+function I({
+  href: t,
+  children: e,
+  align: o = "center"
+}) {
+  return /* @__PURE__ */ r(g, { style: { textAlign: o, margin: `${a.xl} 0` }, children: /* @__PURE__ */ r(
+    p,
+    {
+      href: t,
+      className: n.button,
+      style: {
+        backgroundColor: d.accent,
+        color: d.accentText,
+        borderRadius: x.sm,
+        display: "inline-block",
+        fontSize: i.sizeSm,
+        fontWeight: i.weightSemibold,
+        padding: `${a.ms} ${a.xl}`,
+        textDecoration: "none"
+      },
+      children: e
+    }
+  ) });
+}
+function O() {
+  return /* @__PURE__ */ r(S, { className: n.hr, style: { borderColor: d.border, margin: `${a.lg} 0` } });
+}
+function W({
+  href: t,
+  children: e,
+  style: o
+}) {
+  return /* @__PURE__ */ r(
+    H,
+    {
+      href: t,
+      className: n.link,
+      style: { color: d.accent, textDecoration: "underline", ...o },
+      children: e
+    }
+  );
+}
+function X({
+  children: t,
+  style: e
+}) {
+  return /* @__PURE__ */ r(g, { style: { margin: `${a.lg} 0`, ...e }, children: t });
+}
+export {
+  I as Button,
+  T as EmailShell,
+  R as Heading,
+  O as Hr,
+  P as Img,
+  W as Link,
+  U as Preview,
+  _ as RawLink,
+  X as Section,
+  j as Text,
+  n as cls,
+  B as darkModeCss,
+  i as font,
+  u as palette,
+  x as radius,
+  a as space
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/theme.ts","../src/components.tsx"],"sourcesContent":["import {darkColors, lightColors, type RawColors} from '@duro-app/tokens/raw'\n\n// ---------------------------------------------------------------------------\n// Spacing / radius / type\n//\n// Email needs literal px values (clients reset the root font-size, so rem is\n// unsafe) and table-friendly units. These mirror @duro-app/tokens (spacing /\n// type scale) converted to px. Colours, by contrast, are imported live from\n// the tokens package below so the brand palette can never drift.\n// ---------------------------------------------------------------------------\n\nexport const space = {\n  xs: '4px',\n  sm: '8px',\n  ms: '12px',\n  md: '16px',\n  lg: '24px',\n  xl: '32px',\n  xxl: '48px',\n  xxxl: '64px',\n} as const\n\nexport const radius = {\n  sm: '8px',\n  md: '12px',\n  lg: '16px',\n} as const\n\nexport const font = {\n  family:\n    '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif',\n  // rem → px (1rem = 16px): xs .75 / sm .875 / md 1 / lg 1.125 / xl 1.25 / heading 1.5\n  sizeXs: '12px',\n  sizeSm: '14px',\n  sizeMd: '16px',\n  sizeLg: '18px',\n  sizeXl: '20px',\n  sizeHeading: '24px',\n  weightNormal: 400,\n  weightMedium: 500,\n  weightSemibold: 600,\n  weightBold: 700,\n  lineHeight: 1.5,\n} as const\n\n// ---------------------------------------------------------------------------\n// Semantic colour roles, derived from the shared token palettes\n// ---------------------------------------------------------------------------\n\nexport interface EmailRoles {\n  bg: string\n  card: string\n  cardBorder: string\n  text: string\n  textMuted: string\n  heading: string\n  accent: string\n  accentText: string\n  border: string\n}\n\nconst roles = (c: RawColors): EmailRoles => ({\n  bg: c.bg,\n  card: c.bgCard,\n  cardBorder: c.border,\n  text: c.text,\n  textMuted: c.textMuted,\n  heading: c.text,\n  accent: c.accent,\n  accentText: c.accentContrast,\n  border: c.border,\n})\n\nexport const palette = {\n  light: roles(lightColors),\n  dark: roles(darkColors),\n} as const\n\n// ---------------------------------------------------------------------------\n// Dark-mode mechanism\n//\n// Stable classNames that the dark <style> block targets. Inline (light) styles\n// are the base; the @media (prefers-color-scheme: dark) rules override them.\n// NB: inline styles beat <style> rules, so every override MUST use !important.\n// Honoured by Apple Mail (iOS/macOS); Gmail/Outlook apply their own dark\n// transform regardless; every other client falls back to the light base.\n// ---------------------------------------------------------------------------\n\nexport const cls = {\n  body: 'd-body',\n  card: 'd-card',\n  text: 'd-text',\n  textMuted: 'd-text-muted',\n  heading: 'd-heading',\n  button: 'd-btn',\n  hr: 'd-hr',\n  link: 'd-link',\n} as const\n\nconst ruleLines = (prefix: string): string[] => {\n  const d = palette.dark\n  const p = prefix ? `${prefix} ` : ''\n  return [\n    `${p}.${cls.body} { background-color: ${d.bg} !important; }`,\n    `${p}.${cls.card} { background-color: ${d.card} !important; border-color: ${d.cardBorder} !important; }`,\n    `${p}.${cls.text} { color: ${d.text} !important; }`,\n    `${p}.${cls.textMuted} { color: ${d.textMuted} !important; }`,\n    `${p}.${cls.heading} { color: ${d.heading} !important; }`,\n    `${p}.${cls.button} { background-color: ${d.accent} !important; color: ${d.accentText} !important; }`,\n    `${p}.${cls.hr} { border-color: ${d.border} !important; }`,\n    `${p}.${cls.link} { color: ${d.accent} !important; }`,\n  ]\n}\n\nexport const darkModeCss = [\n  '@media (prefers-color-scheme: dark) {',\n  ...ruleLines('').map((l) => '  ' + l),\n  '}',\n  '/* Outlook.com / Outlook mobile dark mode */',\n  ...ruleLines('[data-ogsc]'),\n].join('\\n')\n","import * as React from 'react'\nimport {\n  Html,\n  Head,\n  Body,\n  Container,\n  Section as RESection,\n  Heading as REHeading,\n  Text as REText,\n  Button as REButton,\n  Hr as REHr,\n  Link as RELink,\n  Preview,\n} from '@react-email/components'\nimport {palette, space, radius, font, cls, darkModeCss} from './theme'\n\nconst L = palette.light\n\n/**\n * Root wrapper: <Html><Head> (color-scheme meta + the prefers-color-scheme\n * dark <style>) + a themed card <Body>/<Container>. Compose the rest of the\n * email inside it with the other primitives.\n */\nexport function EmailShell({preview, children}: {preview?: string; children: React.ReactNode}) {\n  return (\n    <Html lang=\"en\">\n      <Head>\n        <meta name=\"color-scheme\" content=\"light dark\" />\n        <meta name=\"supported-color-schemes\" content=\"light dark\" />\n        <style dangerouslySetInnerHTML={{__html: darkModeCss}} />\n      </Head>\n      {preview ? <Preview>{preview}</Preview> : null}\n      <Body\n        className={cls.body}\n        style={{\n          backgroundColor: L.bg,\n          fontFamily: font.family,\n          margin: 0,\n          padding: `${space.xl} 0`,\n        }}\n      >\n        <Container\n          className={cls.card}\n          style={{\n            backgroundColor: L.card,\n            border: `1px solid ${L.cardBorder}`,\n            borderRadius: radius.md,\n            margin: '0 auto',\n            maxWidth: '520px',\n            padding: space.xl,\n          }}\n        >\n          {children}\n        </Container>\n      </Body>\n    </Html>\n  )\n}\n\nexport function Heading({as = 'h1', children}: {as?: 'h1' | 'h2'; children: React.ReactNode}) {\n  const isH1 = as === 'h1'\n  return (\n    <REHeading\n      as={as}\n      className={cls.heading}\n      style={{\n        color: L.heading,\n        fontSize: isH1 ? font.sizeHeading : font.sizeMd,\n        fontWeight: isH1 ? font.weightBold : font.weightSemibold,\n        margin: isH1 ? `0 0 ${space.md}` : `0 0 ${space.sm}`,\n      }}\n    >\n      {children}\n    </REHeading>\n  )\n}\n\nexport type TextVariant = 'body' | 'small' | 'footer'\n\nexport function Text({\n  variant = 'body',\n  children,\n  style,\n}: {\n  variant?: TextVariant\n  children: React.ReactNode\n  style?: React.CSSProperties\n}) {\n  const muted = variant !== 'body'\n  return (\n    <REText\n      className={muted ? cls.textMuted : cls.text}\n      style={{\n        color: muted ? L.textMuted : L.text,\n        fontSize: variant === 'footer' ? font.sizeXs : font.sizeSm,\n        lineHeight: font.lineHeight,\n        margin: `0 0 ${space.ms}`,\n        ...style,\n      }}\n    >\n      {children}\n    </REText>\n  )\n}\n\nexport function Button({\n  href,\n  children,\n  align = 'center',\n}: {\n  href: string\n  children: React.ReactNode\n  align?: 'left' | 'center' | 'right'\n}) {\n  return (\n    <RESection style={{textAlign: align, margin: `${space.xl} 0`}}>\n      <REButton\n        href={href}\n        className={cls.button}\n        style={{\n          backgroundColor: L.accent,\n          color: L.accentText,\n          borderRadius: radius.sm,\n          display: 'inline-block',\n          fontSize: font.sizeSm,\n          fontWeight: font.weightSemibold,\n          padding: `${space.ms} ${space.xl}`,\n          textDecoration: 'none',\n        }}\n      >\n        {children}\n      </REButton>\n    </RESection>\n  )\n}\n\nexport function Hr() {\n  return <REHr className={cls.hr} style={{borderColor: L.border, margin: `${space.lg} 0`}} />\n}\n\nexport function Link({\n  href,\n  children,\n  style,\n}: {\n  href: string\n  children: React.ReactNode\n  style?: React.CSSProperties\n}) {\n  return (\n    <RELink\n      href={href}\n      className={cls.link}\n      style={{color: L.accent, textDecoration: 'underline', ...style}}\n    >\n      {children}\n    </RELink>\n  )\n}\n\nexport function Section({\n  children,\n  style,\n}: {\n  children: React.ReactNode\n  style?: React.CSSProperties\n}) {\n  return <RESection style={{margin: `${space.lg} 0`, ...style}}>{children}</RESection>\n}\n"],"names":["space","radius","font","roles","c","palette","lightColors","darkColors","cls","ruleLines","prefix","d","p","darkModeCss","l","L","EmailShell","preview","children","jsxs","Html","Head","jsx","Preview","Body","Container","Heading","as","isH1","REHeading","Text","variant","style","muted","REText","Button","href","align","RESection","REButton","Hr","REHr","Link","RELink","Section"],"mappings":"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"}

package/dist/theme.d.ts

@@ -0,0 +1,56 @@
+export declare const space: {
+    readonly xs: "4px";
+    readonly sm: "8px";
+    readonly ms: "12px";
+    readonly md: "16px";
+    readonly lg: "24px";
+    readonly xl: "32px";
+    readonly xxl: "48px";
+    readonly xxxl: "64px";
+};
+export declare const radius: {
+    readonly sm: "8px";
+    readonly md: "12px";
+    readonly lg: "16px";
+};
+export declare const font: {
+    readonly family: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif";
+    readonly sizeXs: "12px";
+    readonly sizeSm: "14px";
+    readonly sizeMd: "16px";
+    readonly sizeLg: "18px";
+    readonly sizeXl: "20px";
+    readonly sizeHeading: "24px";
+    readonly weightNormal: 400;
+    readonly weightMedium: 500;
+    readonly weightSemibold: 600;
+    readonly weightBold: 700;
+    readonly lineHeight: 1.5;
+};
+export interface EmailRoles {
+    bg: string;
+    card: string;
+    cardBorder: string;
+    text: string;
+    textMuted: string;
+    heading: string;
+    accent: string;
+    accentText: string;
+    border: string;
+}
+export declare const palette: {
+    readonly light: EmailRoles;
+    readonly dark: EmailRoles;
+};
+export declare const cls: {
+    readonly body: "d-body";
+    readonly card: "d-card";
+    readonly text: "d-text";
+    readonly textMuted: "d-text-muted";
+    readonly heading: "d-heading";
+    readonly button: "d-btn";
+    readonly hr: "d-hr";
+    readonly link: "d-link";
+};
+export declare const darkModeCss: string;
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,KAAK;;;;;;;;;CASR,CAAA;AAEV,eAAO,MAAM,MAAM;;;;CAIT,CAAA;AAEV,eAAO,MAAM,IAAI;;;;;;;;;;;;;CAeP,CAAA;AAMV,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,MAAM,CAAA;IAClB,MAAM,EAAE,MAAM,CAAA;CACf;AAcD,eAAO,MAAM,OAAO;;;CAGV,CAAA;AAYV,eAAO,MAAM,GAAG;;;;;;;;;CASN,CAAA;AAiBV,eAAO,MAAM,WAAW,QAMZ,CAAA"}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@duro-app/ui-email",
+  "version": "0.37.1",
+  "description": "Token-driven, dark/light-aware email components for Duro (React Email).",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "dependencies": {
+    "@react-email/components": "^1.0.9",
+    "@duro-app/tokens": "^0.37.1"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "react": "^19.0.0",
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.0.0"
+  },
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "typecheck": "tsc --noEmit"
+  }
+}